今回は、初歩的に覚えておくこと必須級のCSS記述のサンプル記述を紹介致します。
ブラウザバグ対策から、出来る限り軽量化させるための記述、htmlソースに影響を与える記述などなど、初歩的な記述9選の紹介です。
今回はテクニカルな記述は紹介していません。
テクニカルな記述については別の機会に紹介したいと思います。
また、レスポンシブやAMP対応については考慮していませんので、予めご了承下さい。
今回はPCブラザウ対応編としたいと思います。
横幅を揃えることで、そのまま使える原理ではありますが、スマホ端末考慮は簡単ではありませんので、レスポンシブ編は改めて紹介致します。
CSS小技集！覚えておくこと必須級のコーディング集（スマホ端末対応編）を書きましたので、レスポンシブやスマホ端末対応はこちらをご覧下さい。
本コンテンツは、AMPページでは正常に表示されません。
画像の扱いなど、適宜修正は致しましたが、コンテンツそのものを変えまくるわけにはいきませんでしたので、一部チェック出来ない状態ではありますが、そのままアップすることに致しました。
恐れ入りますが、予めご了承下さいますよう宜しくお願い致します。
サンプル記述内のid名やclass名には縛りはありませんので、適宜書き換えてください。
今回は「サンプル表示」のエリアを設けています。
「サンプル表示」のコンテンツ表示エリア内はデフォルトでテキストを左寄せにしています。
（※「サンプル表示」のテキスト枠は中央寄せです。）
「サンプル表示」のコンテンツ表示エリアをbodyとして捉えてください。
（※背景が薄い色の枠です。）
それでは、宜しくお願い致します。
未経験で弊社に入社した人に、一番最初に教えていることかもしれません（笑）
コンテンツを中央寄せ（センタリング）するための記述です。
text-align:center; のみの記述では、ブラウザ非対応の場合中央寄せ出来ないため、この記述で対処します。
<div id="cent"> 中央寄せにするコンテンツ </div>
body {
text-align: center;
}
#cent {
width: 200px;
margin: 0 auto;
border: 1px solid #333;
text-align: left;
}
ポイントは「 margin: 0 auto; 」です。
コンテンツの横幅のマージンをブラウザの横幅に対して左右均等にしてくれるため中央に寄ります。
コンテンツを横詰めする時によく使われる float 、しかし何の処理もしないとブラウザバグが起きてしまいます。
横詰めしている要素の次の要素までも詰まって表示されてしまいます。
ここでは、その次の要素が横詰めされないための処理になります。
<div id="float-one"> <ul> <li>横詰めその１</li> <li>横詰めその２</li> <li>横詰めその３</li> </ul> </div> <div id="float-two"> 改行コンテンツ </div>
body {
text-align: center;
}
#float-one {
width: 200px;
margin: 0 auto;
border: 1px solid #333;
text-align: center;
}
#float-one:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#float-one ul {
margin: 0;
padding: 0;
}
#float-one ul li {
float: left;
margin: 0;
padding: 0;
list-style: none;
}
#float-two {
width: 200px;
background-color: #efefef;
margin: 0 auto;
}
ここで最も重要なポイントは、「 #float-one 」の直後にある「 :after 」の記述です。
CSSで見えないコンテンツを設置しているという解釈です。
ただ、ちょっと小難しく見えるので、理屈ではなくそのまま覚える感じで問題ないと思います。
「 :after 」記述に関しては、一つ共通のclassをつくって様々なところで使い回すような記述を散見します。
弊社では共通で使いまわしていないため、本項ではSEMラボラトリー式という感じで記載しました。
画像では角丸のテーブルをよくつくりますが、CSSでも実装出来てしまいます。
割と簡単ですので、簡単な角丸テーブルを作成する時には、この記述を使うのが一番早いでしょう。
また、CSSでカラーのグラデーションや影装飾と併せて使うと画像入らずです。
ここでは、カラーのグラデーションや影装飾については触れていませんので、別の機会に紹介致します。
<div id="kadomaru">角丸コンテンツ</div>
body {
text-align: center;
}
#kadomaru {
margin: 0 auto;
padding: 10px;
border: 1px solid #333;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
display: inline-block;
}
角丸のポイントは、「 border-radius 」の箇所です。
他の「 -webkit 」や「 -moz 」などの記述のある部分はブラウザ毎の対応というやつです。
ですので、ひとまずは3つセットの記述で使ってください。
左上や右上など、個別に設定することも可能ですので、個別記述については以下を参考にしてください。
#kadomaru {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
}
何となく違和感を感じるので、個別指定はあまり使うことがない気がします・・・。
CSSで罫線（けいせん）や記号文字を記述するという手法、あまり使う場面はないかもしれません。
パンくずの表記やヘッダーやフッターにリストでリンクを作成する時くらいしか使わないと思います。
メジャー級に目立つ記述というわけではありませんが、リンクの繋がり箇所に余計なデータを書くことがないので、意外と優れものではあると思います。
<div id="keisen"> <ul> <liv<a href="#" rel="nofollow">リンク１</a></li> <li><a href="#" rel="nofollow">リンク２</a></li> <li><a href="#" rel="nofollow">リンク３</a></li> <li>リンク４</li> </ul> </div>
body {
text-align: center;
}
#keisen {
width: 400px;
margin: 0 auto;
}
#keisen:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#keisen ul {
margin: 0;
padding: 0;
}
#keisen ul li {
float: left;
text-align: left;
margin: 0;
padding: 0;
list-style: none;
}
#keisen ul li a {
margin-right: 10px;
position: relative;
padding-right: 8px;
display: block;
background-image: none;
/** background-image は当ページの処理の都合で書いている内容です。無視して下さい。 **/
}
#keisen ul li a:after {
content:">";
font-size:100%;
line-height: 1em;
font-family:"ＭＳ Ｐゴシック",sans-serif;
color:#999;
position:absolute;
right:-5px;
top: 3px;
display: block;
}
#keisen ul li:last-child a:after {
content:"";
}
この辺りは、ちょっと難しいかもしれません。
「 :after 」のところの処理が重要になってきます。
また、「 :last-child 」は後述致しますので、ここでは定型フォーム的な感じで使ってもらえたらと思います。
パンくずなど、最後のリストはリンクがつかないことが多いと思いますので、リンクがつかないリストに対しては罫線や記号文字を入れないという処理です。
多数のサイトでも紹介されていますが、「次のページへ」系の箇所に多様されています。
この記述についても理屈などは後回しでいいと思います、まずはテンプレだと思って使うようにして下さい。
<div id="float-cent"> <ul> <li><a href="#" rel="nofollow">０１</a></li> <li><a href="#" rel="nofollow">０２</a></li> <li><a href="#" rel="nofollow">０３</a></li> <li><a href="#" rel="nofollow">０４</a></li> </ul> </div>
body {
text-align: center;
}
#float-cent {
width: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
border: 1px solid #333;
}
#float-cent:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#float-cent ul {
margin: 0;
padding: 0;
position: relative;
left: 50%;
float: left;
}
#float-cent ul li {
margin: 0;
padding: 0;
list-style: none;
position: relative;
left: -50%;
float: left;
}
#float-cent ul li a {
background-image: none;
/** background-image は当ページの処理の都合で書いている内容です。無視して下さい。 **/
}
コンテンツを透過させることが出来ますが、使う場所が結構限定的になってしまうかもしれません。
私自身、この透過はあまり使っていません。
弊社のHPのトップのコラムの画像の上に黒色の背景色を透過させていますが、思いつく限りですとその程です（笑）
これもテンプレだと思って使って頂く程度でいいかもしれません。
因みにですが、透過とは透けて表示させるという意味です。
<div id="touka"> <span>透過コンテンツです。</span> </div>
body {
text-align: center;
}
#touka {
display: inline-block;
padding: 10px;
margin: 0 auto;
background-color: #000;
font-weight: bold;
filter:alpha(opacity=50); /** 1 〜 100 で調整**/
-moz-opacity: 0.5; /** 0.1 〜 1.0 で調整**/
opacity: 0.5; /** 0.1 〜 1.0 で調整**/
}
#touka span {
color: #fff;
filter:alpha(opacity=100); /** 1 〜 100 で調整**/
-moz-opacity: 1.0; /** 0.1 〜 1.0 で調整**/
opacity: 1.0; /** 0.1 〜 1.0 で調整**/
}
透過しているかどうか分かりにくいサンプルになってしまいました（汗）
でも真っ黒の背景がグレーになっていますので、間違いなく透過しているでしょう（笑）
画像やもっと手の込んだデザインにすると分かりやすくなりますよ、当サイトのトップページのコラム一覧でも見てみて下さい。
因みにですが、ここでもブラウザ毎の対応をするために3つセットで透過設定記述をしています。
これもワンセットで覚えて下さいね。
意外にもたまに頂くご質問の一つがこれ、画像にリンクをつけた時にラインがでないようにするための記述です。
簡単なCSS装飾ですので、さらっと書いてしまいたいと思います。
<div> <a href="#" rel="nofollow"><amp-img src="/img/twitterlogo.gif" width="200" height="200" layout="responsive" alt="サンプルで表示しています"><amp-img></a> </div>
body {
text-align: center;
}
amp-img,
amp-img a {
border: 0;
vertical-align: bottom; /** ブラウザバグ対策 **/
}
ブラウザバグ対策のための「 vertical-align: bottom; 」については、セットの記述だと思って頂いて差し支えないと思います。
子要素の最初、子要素の最後・・・よく分かりませんよね（汗）
リストタグの最初と最後と言った方が分かりやすいかもしれません。
しかし、リストタグだけのことではありません。
親になる要素があって、子の要素がある・・・という関係のあるタグ全てに適応されます。
ということで、書いてみたいと思います。
<div class="oyayouso"> <div class="koyouso">リスト０１</div> <div class="koyouso">リスト０２</div> <div class="koyouso">リスト０３</div> <div class="koyouso">リスト０４</div> </div>
body {
text-align: center;
}
.oyayouso {
display: inline-block;
padding: 10px;
margin: 0 auto;
border: 1px solid #333;
}
.oyayouso .koyouso {
border-bottom: 2px solid #ff0000;
clear: both;
}
.oyayouso .koyouso:first-child {
border-bottom: 2px solid #0000ff;
}
.oyayouso .koyouso:last-child {
border-bottom: 2px solid #0000ff;
}
画像の周りにテキストを回りこませること自体はそこまで難しくないかもしれません。
ただ、親要素を作らずにimgタグにclassを割り振ってfloatだけではブラウザバグが起きかねません。
ということで、少々面倒かもしれないことですが、そんなブラウザバグ回避も兼ねた記述をします。
<div class="gazou-mawari"> <div class="gazou-mawari-a"> <div class="gazou-mawari-oya"> <p class="amp-img-f-l"><img src="/img/twitterlogo.gif" width="200" height="200" layout="responsive" alt="サンプルで表示しています"><amp-img></p> <p style="background-color:#efefef;">テキストです。テキストです。テキストです。テキストです。テキストです。</p> <p>テキストです。テキストです。テキストです。テキストです。テキストです。</p> <p>テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。</p> </div> </div> <div class="gazou-mawari-b"> <div class="gazou-mawari-oya"> <p class="img-f-r"><amp-img src="/img/twitterlogo.gif" width="200" height="200" layout="responsive" alt="サンプルで表示しています"><amp-img></p> <p style="background-color:#efefef;">テキストです。テキストです。テキストです。テキストです。テキストです。</p> <p>テキストです。テキストです。テキストです。テキストです。テキストです。</p> <p>テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。</p> </div> </div> </div>
body {
text-align: center;
}
.gazou-mawari {
width: 400px;
margin: 0 auto;
}
.gazou-mawari-a {
width: 100%;
margin: 0 auto 10px auto;
border: 1px solid #333;
}
.gazou-mawari-b {
width: 100%;
margin: 0 auto;
border: 1px solid #333;
}
.gazou-mawari-oya {
padding: 15px 10px 0 10px;
}
.gazou-mawari-oya:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.gazou-mawari-oya p {
text-align: left;
_zoom: 1; /** pの背景で起こるブラウザバグ対策 **/
overflow: hidden; /** pの背景で起こるブラウザバグ対策 **/
margin: 0 0 10px 0;
padding: 0 3px;
}
.gazou-mawari-oya .img-f-l {
float: left;
margin: 0 5px 5px 0;
padding: 0;
}
.gazou-mawari-oya .img-f-r {
float: right;
margin: 0 0 5px 5px;
padding: 0;
}
テキストです。テキストです。テキストです。テキストです。テキストです。
テキストです。テキストです。テキストです。テキストです。テキストです。
テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。
テキストです。テキストです。テキストです。テキストです。テキストです。
テキストです。テキストです。テキストです。テキストです。テキストです。
テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。
記述の量が増えてしまいました。
凡そ上述の感じにすると、ブラザバグなく画像の周囲にテキストを回りこませても問題は出てこないのではないでしょうか。
CSSをご理解頂いている方であれば、わざわざ画像をpタグで囲む必要はないかもしれません。
私も囲わないことの方が多いかもしれません。
ただ、私の理想で言えば、一つ一つ囲むことですので、ここでは上述のように記述しました。
ただ、右下や中央に設置してテキストを上から表示・・・のような物理的に難しいことをする場合は背景で画像を表示させたり、「 position: absolute; 」でコントロールする必要がございますのでご注意下さい。
いかがでしたでしょうか？
要所要所でSEMラボラトリー式になっているところがあり、分かりにくく感じられたかもしれません・・・申し訳ございません。
弊社は常々コーディングには拘り、エコでありながらサイトの中身をよりGoogleに伝えやすいことを考慮してコーディングルールを設けています。
また、同時にブラウザバグが起きないことにも配慮していますので・・・という次第です。
しかし、これらのCSSの小技を、自分自身がいつ知ったのか思い出そうと思ってもなかなか思い出せません（笑）
知らない間に覚えてしまった気がします。
というのも、一度書けば覚えてしまうことと、過去に携わったサイトに必ず記述が残るので、それを元に徐々に形を変えながら書いて今に至っています。
ですので、元となる記述はどこかで見たものではあるのですが、何度も見ることがないので明確に覚えていません。
ということで、引用などを出していませんが、書かれている内容が「この書き方は私（うちの会社）が始めたものだ！」というご主張などがございましたら、ご指摘を頂けますと幸いです。
引用としてリンクや注釈を書かせて頂きます。
恐れ入りますが、宜しくお願い致します。
執筆 : 清水 隼斗
「CSS小技集！覚えておくこと必須級のコーディング集（PCブラウザ対応編）」のシェアをお願い致します！