CSS(スタイルシート)の基本、小技、テクニック総まとめ

恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。

ということで順番に説明していきます。

1. 全般的なこと

1-1. CSSリセット

ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。

そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。

方法は色々ありますが、個人的には一番有名なEric Meyer's Reset CSSを使っています。

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

CSSの一番最初にこれを記述して、後から記述したもので上書きしていく感じになります。

1-2. 複数のクラスを指定する

クラスはスペースで区切ると複数指定することができます。

<div class="font size1">font1</div>
<div class="font size2">font2</div>
<div class="font size3">font3</div>

共通な部分と個別の部分を別のクラスで指定すると効率よく書くことができます。

.font {
  color: red;
  font-weight: normal;
}
.size1 { font-size: 18px; }
.size2 { font-size: 16px; }
.size3 { font-size: 14px; }

効率的なセレクタの使い方を説明した記事もありますのでぜひ。CSSセレクタの効率的、効果的な使い方をいろいろ｜Webpark

1-3. IE用簡単CSSハック

CSSハックは使わないに越したことはないですが、IEに関してはなかなか新バージョンへの乗り換えも進まないし、ある程度仕方ない部分もありますね。

color: red; /* 全てのブラウザ */
color: green¥9; /* IE8 とそれ以下のバージョンに対応 */
*color: yellow; /* IE7 とそれ以下のバージョンに対応 */
_color: orange; /* IE6　に対応 */

この場合、IE9だと赤に、IE8だと緑に、IE7だと黄色に、IE6だとオレンジになります。CSSハックはたくさんありますがこれだけでも結構使えると思います。

2. まとめて書けるプロパティ

2-1. border

まずはボーダーです。よく使いますね。

• border-width　…　線の太さ
• border-style　…　線の種類
• border-color　…　線の色

これらは一括で指定することができます。

border-left-width: 1px;
border-left-style: solid;
border-left-color: red;

border-left: 1px solid red;

記述する順番に決まりはありません。

続いてはこちら。

上下左右すべて同じの線の場合は一括で指定できます。

• border-top　…　上のボーダー
• border-right　…　右のボーダー
• border-bottom　…　下のボーダー
• border-left　…　左のボーダー

border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;

border: 1px solid red;

2-2. background

これもよく使いますね。

• background-color　…　背景色
• background-image　…　背景画像
• background-repeat　…　背景画像の並べ方（repeatで繰り返し、no-repeatで繰り返しなし、repeat-xで横方向、repeat-yで縦方向）
• background-position　…　背景画像の表示位置（水平方向、垂直方向の順で指定。「left top」「5px 3px」など）
• background-attachment　…　背景画像をスクロールさせるかどうか（scroll（初期値）かfixed）

これら背景に関するプロパティを一括して指定することができます。

background-color: #f5f5f5;
background-image: url: url(img/bg.png);
background-repeat: repeat-x;
background-position: left top;
background-attachment: scroll;

background: #f5f5f5 url(img/bg.png) repeat-x left top scroll;

必要のないものは省略することもできて、並べる順番も特に決まりはありません。

2-3. font

個人的にはあまり使っていないです。

• font-style　…　イタリック体（italic）と斜体（oblique）を指定。初期値はnormal（標準）です。
• font-variant　…　スモールキャピタルを指定。small-caps を指定すると、アルファベットの小文字の部分が「大文字を縮小したような形」で表示されます。
• font-weight　…　フォントの太さ。
• font-size　…　フォントサイズ
• line-height　…　行の高さ
• font-family　…　フォントの種類

あまり使うことのないプロパティもありますが、これらをまとめることができます。line-heightが含まれていることに違和感を覚えるのは私だけでしょうか。

font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 120%;
font-family: "ＭＳ Ｐゴシック";

font: italic normal bold 80%/150% "ＭＳ Ｐゴシック";

「行の高さ（line-height）」を指定する場合は、「サイズ（font-size）」の後にスラッシュ（ / ）を入れ、その後に記述します。

font-size、line-height、font-familyは順番を守る必要がありますが、その他順番は自由です。

フォントサイズとフォントの種類以外は省略可能です。

2-4. padding、margin

よく使いますね。というか略さず書くことはほとんどないです。

4方向とも違う場合です。

padding-top: 10px;
padding-right: 5px;
padding-bottom: 8px;
padding-left: 3px;

padding: 10px 5px 8px 3px;

次は左右が一緒で上下が違う場合です。

padding-top: 10px;
padding-right: 5px;
padding-bottom: 8px;
padding-left: 5px;

padding: 10px 5px 8px;

上下と左右がそれぞれ一緒の場合です。

padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;

padding: 10px 5px;

最後はすべて同じ場合です。

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

padding: 10px;

2-5. ul、ol、li

今度はリストです。

• list-style-type　…　マーカーの種類（disc、circle、squareなど）
• list-style-position　…　マーカーの表示位置（outside（初期値）かinside）
• list-style-image　…　マーカーを画像で表示

画像を指定した場合はマーカーの種類（disc、circle、squareなど）より優先して表示されます。

list-style-type: disc;
list-style-position: inside;
list-style-image: url(sample.png);

list-style: disc inside url(sample.png);

順番に決まりはありません。省略した場合は初期値になります。

3. セレクタに関すること

3-1. 最初に現れる文字にだけスタイルを適用する

最初に現れる文字にスタイルを適用します。雑誌なんかでありそうな感じです。

p:first-letter{
  font-weight:bold;
  font-size:32px;
}

3-2. 最初の行にだけスタイルを適用する

p:first-line{
  font-weight:bold;
  color:red;
}

3-3. 最初に現れる要素にだけ適用する

最初に現れる要素にのみ適用されます。

p:first-child {
  font-weight:bold;
  color:red;
}

<p>最初のp要素にだけ適用されます。</p>
<p>2つ目以降のp要素には適用されません。</p>

3-4. n番目に現れる要素に適用する

先ほどは最初に現れるものに適用しましたが、:nth-of-type(n)のnを操ることで様々な要素にスタイルを適用します。

nの部分は数字のほかに、以下のように複数指定することもできます。

p:nth-of-type(2n+1) {
  font-weight:bold;
  color:red;
}

このようにすると奇数番目に表れるp要素にのみ適用されます。

<p>1行目</p>
<p>2行目</p>
<p>3行目</p>
<p>4行目</p>
<p>5行目</p>

テーブルで1行ごとに色を変えるときなどに使えます。かなり便利なセレクタですがIE8以下は非対応です。これとよく似ているnth-childとの違いは、nth-childをご参考に。

4. テキストに関すること

4-1. 文章内の最初の文字を1文字下げる

日本語の文章は最初の一文字を開けることが多いですが、そんな時スペースでっていうのもなんだかな～という方に。

text-indent: 1em;

4-2. 2行目以降の文字を1文字下げる

text-indent: -1em;
padding-left: 1em;

4-3. 長い単語やURLを途中で折り返す

英語の場合、空白やハイフンが現れるまで折り返さず枠をはみ出ても表示されちゃいます。

そんな場合以下のスタイルでうまいこと折り返してくれます。

word-wrap: break-word;

このブログではpreタグに使ってます。トラックバックのURLなんかもこれで解決かも。

4-4. 長い単語やURLの表示を途中でやめる

先ほどの同じ例で、今度ははみ出た部分を省略して「...」としてみます。

white-spce: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;

4-5. 単語を途中で折り返さない

タグクラウドなんかで、タグ名が途中で折り返して見にくいという場合はこちらを。

タグクラウドはフォントの大きさをspanタグで指定していることが多いので、以下のように指定してあげます。spanじゃない場合は変更してみてください。

div span{
white-space: nowrap;
}

5. 小技いろいろ

5-1. divを中央揃えにする

divなどの要素を真ん中に表示します。

#container{
  width: 200px;
  margin: 0 auto;
}

多くのサイトがこれを使ってコンテンツ全体を真ん中に表示していると思います。

昔はtext-align:centerで真ん中によらないと悩んだこともありました。

5-2. 上下中央揃えにする

上下中央揃えってIEのおかげで意外と面倒です。IE以外でしたら単純にdisplay:table-cell;を使えばいいわけですので、ほとんどIE用の記述となってます。

div.vertical div{
  display:table-cell;
  vertical-align: middle;
  *display: inline;
  *zoom: 1;
}
.vertical2{
height: 100px;
}

htmlもIEのおかげで面倒になってます。

<div class="vertical">
  <div>上下真ん中に表示されます</div>
  <div class="vertical2"></div>
</div>

1行のテキストの場合はこちらでも大丈夫です。HTMLも入れ子にする必要もありません。

.vertical{
  line-height:200px;
  height:200px;
}

横メニューで上下中央にテキストを持ってきたいときなど結構使えます。

5-3. 高さの違うボックスをきれいにそろえる

floatで横に並べた高さが違うボックスをきれいにそろえます。

.box{
  overflow: hidden;
}
.contents1{
  float:left;
  padding-bottom: 10000px;
  margin-bottom: -10000px;
}
.contents2{
  float:left;
  padding-bottom: 10000px;
  margin-bottom: -10000px;
}

<div class="box">
  <div class="contents1">内容</div>
  <div class="contents2">内容</div>
</div>

ちなみに10000pxという数字に意味はありません。長い方のコンテンツより小さくならなければ大丈夫です。

5-4. 最低限表示する高さを指定

divなどで最低限表示する高さを指定します。

.min{
  min-height: 100px;
  height: auto !important;
  height: 100px;
}

下2行はIE6対策です。

5-5. hrに背景画像を使う

仕切り線を表すhrに背景画像を使うこともできます。

hr {
  background-image: url(back.png);
  height: 10px;
  border: 0;
}

5-6. 画像の下に文字を回り込ませない

.content {
  padding: 0 0 0 180px;
  position: relative;
}
.content img {
  position: absolute;
  left: 10px;
  top: 10px;
}

<div class="content">
  <img src=".gif" alt="image" border="0" width="150" height="80" />
  <p>ここに文章を入れます</p>
</div>

5-7. リストの一番上の線を消す

borderを使うとリストに仕切り線を入れることができます。

li {
  padding: 3px;
  border-top: 1px dotted #777;
}

けど、全体を枠で囲むときなんかは上の線がだぶってしまうので消した方がいいと思います。そんな時は以下のコードで一番上の線だけ消せちゃいます。

ul {
  overflow: hidden;
}
ul li {
  margin-top: -1px;
  border-top: 1px dotted #777;
}

IE6以下は非対応ですが以下の方法でも大丈夫です。というか個人的にはこちらを使っています。

ul li {
  border-top: 1px dotted #777;
}
ul li:first-child {
  border-top: none;
}

5-8. リストのリンクを押しやすくする

リスト状に並んだリンクのクリックできる範囲を広くしてを押しやすくします。

<ul id="menu">
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
</ul>

#menu li {
  list-style-type: none;
  width: 400px;
  margin: 0;
  padding: 0;
  border-top: 1px dotted #777;
}
#menu a {
  text-decoration: none;
  display: block;
  padding:2px 10px;
}
#menu a:hover {
  background: #fff;
}

5-9. リストを使った横並びメニュー

よくあるタイプのリストを横に並べたメニューです。

<ul id="menu">
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
</ul>

#menu li{
  list-style-type: none;
  float: left;
  width: 100px;
  text-align: center;
}
#menu a {
  display: block;
  width: auto;
  padding:5px 10px;
  background: #05a;
  color: #fff;
  text-decoration: none;
}
#menu a:hover {
  background: #036;
}

これを基本にしてCSS3を使って装飾したのがこちら　⇒　細部にこだわってみた！CSS3を使った美しい横メニューの作り方｜Webpark

5-10. 色の違うボーダーの境目をきれいに見せる

下と左に違う色のボーダーを付けると境目がギザギザになります。見出しなどでよく見かけますが個人的にはあまり好きではないです。

擬似要素を使うときれいに見せることができます。

h4{
  position: relative;
  padding-left:10px;
  border-left: 10px solid #05a;
}
h4:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  height: 0;
  width: 100%;
  border-bottom: 1px solid #999;
}

ただしIE7以下は非対応です。個人的にはそれでもこちらを使いたいです。

5-11. 画像を使わずに吹き出しを作る

擬似要素とボーダーで作る三角形を使うと画像なしでCSSだけで吹き出しを作ることができます。

.fukidashi {
  position: relative;
  color: #fff;
  background: #555;
  margin: 10px 0px 10px 0px;
  padding: 5px 10px 5px 10px;
  border-radius: 3px;
}
.fukidashi:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 30px;
  height: 0;
  width: 0;
  border: 10px solid transparent;
  border-top: 10px solid #555;
}

吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付けて、他のボーダーは「transparent（透明）」にしています。

あと、この正方形の一辺が100pxになることに注意してください。

今回はspanにしていますが、見出しにも使えます。

擬似要素を使った見出しの作り方はこちらをご参考に　⇒　CSSの擬似要素を使った見出しデザイン｜Webpark

5-12. HタグとPタグを横並びに表示する

こんな感じでタイトルと日付を表示して、タイトルにだけHタグを付けてみます。

<div>
  <h4>記事のタイトル</h4>
  <p>(2011.4.1)</p>
</div>

pよりspanの方がよさそうですがブロックレベル同士でも横並びになるというのを分かっていただくためpにしています。

そのままだと日付が下の段にきてしまいます。

そんなときはこれで解決。

div h4, div p {
  display: inline;
}

日付にまでHタグを付けるのは嫌だという方や日付には違うスタイルを適用したいという方におすすめです。

5-13. リスト以外の要素をカウントする

リストだと「list-style-type: decimal;」で自動的に順番を付けることができます。それ以外の方法でリスト以外のものに番号を付けます。

.count h6 {
  counter-increment : chapter ;
}
.count h6:before {
  content : "第" counter(chapter) "章" ;
  padding-right: 10px;
  color : #777;
}

これでh6タグが現れた順に番号が付けられます。

タイトルという文字の前についている第１章から第３章はCSSで自動的に付けています。CSSのcounter-incrementを使ってリスト以外に番号を付ける方法｜Webparkもご参考に。

5-14. clearfixで回り込みを解除

以下のHTMLで中にある2つのボックスをfloatを使って横に並べます。

<div class="wrap-box">
    <div class="float-box"></div>
    <div class="float-box"></div>
</div>

.wrap-box{
  padding: 10px;
  background: #ccc;
}
.float-box{
  float: left;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #777;
}

floatで回りこんでclearしないと親ボックスが子要素を包まなくなります。

子要素をもうひとつ追加してclear:bothを付けてやると解決ですが、毎回そんな訳にはいきません。というときは以下のコードを追加すると解決です。

.wrap-box:before,
.wrap-box:after {
    content: " ";
    display: table;
}
.wrap-box:after {
    clear: both;
}
.wrap-box {
    *zoom: 1;
}

これで親ボックスが子ボックスを包むように表示されます。

このテクニックをclearfixといい、「A new micro clearfix hack – Nicolas Gallagher」で紹介されているものが有名です。

さいごに

ということでCSSに関する小技テクニックを幅広くまとめてみました。といっても過去に紹介したもののまとめ的な感じになっていますが。。

基本的な内容が多いですが、意外と抜け落ちているところもあるかもしれませんので、これがいい復習の機会になれば幸いです。