CSS

目指せ脱初心者！スマートなCSSの書き方教えます

CSS

特別編

解 消 テ クニック
自分でも把握できないごちゃごちゃ「スパゲティ状態」のスタイルシートにさようなら
photo：Tsushima Takao

text：長谷川恭久

CSSが広く使われるようになり、ウェブしていくと、あっという間にCSSファイル

が提供している標準のテンプレートの中

サイトの構築において情報とデザインのの内容は何十行どころではない長さになにも、長々とスタイルの定義リストが記述分離が明確になりました。つまり、XHTMLってしまいます。凝ったデザインにすると、されていて、少し修正を加えたくても修正やHTMLに記述するのは情報そのものや定義しなければならないプロパティーも増するべき場所を探すのに時間がかかるこ文書構造だけとなり、視覚的なデザインはえ、ファイルサイズが大きくなってしまいまともしばしばあります。

CSSに記述されるようになりました。

す。そして何よりも、CSSファイルが長くそこで、CSSがこんがらがったスパゲテ

これにより、サイト構築の効率化が進なりすぎて、どこに何を書いたのかが自分ィ状態にならないようにして、できる限りみ、ある程度のCSSの知識があればサイでもわからなくなってしまいます。いわゆる短く、そして整理された状態で CSSを記

トの見た目を容易に変えられるようになり「スパゲティ状態」です。ブログサービス

述するためのヒントを紹介します。

ました。CSSでデザインされたサイトでは、ウェブ制作に詳しい人でなくても、CSSを数行修正するだけで、全ページの見た目CSSでのスタイル指定の基本を変えたりすることも簡単にできます。
CSSで高度なテクニックを駆使するのならば、古いブラウザーでも新しいブラウ

CSSファイルのスマートな書き方を学ぶ前に、CSSでのスタイル指定の基礎をおさらいしておきましょう。
CSSでは、スタイルを指定するザーでも同じように表示されるようにする

HTML ／ XHTML のタグ名やク「ハック」と呼ばれるものや、特定のブラウラス名、ID名などの要素を「セレザーに特有のCSS解釈に関するバグを回クター」として指定して、中かっ避する書き方などもありますが、そういっ

こで囲んで中にプロパティー名とた技法を使うのでなければ、CSSは比較

宣言

h1 { font-size: 120% }

指定する値をコロン（:）でつないで書きます。中かっこの中に複数的簡単に覚えることができます。ブログ運のプロパティーと値のペアを指定

営に慣れてきた人も少しずつCSSに手をする場合は、各ペアの最後にセミ加えていることでしょう。

コロン（;）で区切りを指定します。

セレクター プロパティー 値
図1 基本的なCSSの文法

しかし、CSSファイルにスタイルを定義

128 +++ iNTERNET magazine 2005.01 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

スパゲティCSS解消法①

スッキリ度

親子の関係は大事ですHTML／XHTMLタグにクラス名を指定して、付けた名前に従ってCSSにプロパティーを指定する方法はよく使われます。
サイトの構造が図2のようになっている場

×
スパゲティ

コード1-1

無駄にクラスが設定された例●スッキリ

コード1-2子孫クラス指定でHTMLを簡略化

合、navとsectionのそれぞれにあるh2見HTMLHTML

出しにスタイルを指定するのに、コード1-<div id="nav"><div id="nav">1のようにすることがあります。もちろん、<h2 class="nav-head2">カ<h2>カテゴリー名</h2>

こう書く必要がある場合もありますが、ク

テゴリー名</h2></div>

ラス名やID名が多くなると、あとからCSS</div><div id="section">を編集しづらくなるうえに、XHTMLファイ<div id="section">ルの情報を不必要に増やしてしまいます。
図2では、レイアウトを作る3つのセク<h2 class="sectionhead2">カテゴリー名</h2></div>

ションにID名が付けられています。このIDをうまく利用すれば、同じh2タグに対してCSS異なるスタイルを指定できます。

.nav-head2{

コード1-1のHTMLコードには、#navと#sectionの中にそれぞれh2があります。このように、1 つの要素の中に別の要素が存在するような階層的な上下関係（親子CSS
div#nav h2{
color: #300;
font-size: 100%;color: #300;}

font-size:100%;

div#section h2{
color: #6CC;}

font-size: 100%;.section-head2{
color: #6CC;

関係とも言います）
がある場合、その関係をセレクターとして使うことが可能です。こ<h2>カテゴリー名</h2></div>}

font-size:100%;}

れを「子孫セレクター」と呼びます。コード1-2のように、親要素と子要素の間に半角スペースを空けて書くと子孫セレクターのほかにh2タグが使われていても、指定し指定になります。このように指定した場合、た親子関係にないh2にはそのスタイルが適用されません。
また、コード1-3のように、どこにあるh2にも共通する定義をまず指定しておいて、#header

独自のスタイルを指定したい親子関係の●スッキリ

くまとめることができます。

#nav

HTMLの階層構造を利用したセレクタ#section/* 共通プロパティー */h2{
font-size: 100%;}/* 独自プロパティー */div#nav h2{

ーはほかにもありますが、子孫セレクター

color: #300;

はNetscape 4.xのような古いブラウザー}でも対応しているので安心して使えます。

div#section h2{
color: #6CC;

子孫セレクターを使ってもCSSファイルを劇的に小さくすることはできませんが、図2 ブログの典型的なブロック分け共通プロパティーをまとめて記述

CSS

h2に関する定義だけを子孫セレクターを使って指定すれば、よりCSSファイルを短コード1-3}

HTMLをよりシンプルにできます。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2005.01 +++129

スパゲティCSS解消法②

スッキリ度

グループだと心強いです
CSSでデザインしていると、さまざまなセレクターを扱うことになりますが、セレク

×
スパゲティ

ターが多いとCSSの行数が増えてスパゲティ状態になりやすくなります。

コード2-1

同じ値を複数のセレクターで指定●スッキリ

コード2-2

同じ指定はセレクターをグループ化

コード2-1では、h1〜h3の見出しにそCSS

CSS

れぞれプロパティーを定義していますが、

h1{

h1, h2, h3{

よく見てみるとbackground-color、color、

background-color: #ffc;

background-color: #ffc;

padding にはすべて同じ値が指定されてcolor: #633;

color: #633;

います。こういった場合、コード2-2のよう

font-size: 120%;にカンマ（,）
で区切って複数のセレクター

padding: 0.5em;

をグループとして記述し、共通しているプロパティーと値を記述できます。HTMLタ

padding: 0.5em;}}
h1{
font-size:120%;h2{

グのセレクターだけでなく、クラスやIDをbackground-color: #ffc;}

使ったセレクターや子孫セレクターなどもcolor: #633;

h2{

グループ化できます。

font-size: 110%;

複数のセレクターに共通するプロパテ
ィーと値の指定はこのようにグループにしてまとめておいて、各セレクターで異なる

padding: 0.5em;
}

h3{

h3{}

font-size:105%;

プロパティーに関しては個々に記述すれbackground-color: #ffc;

ば、それだけでもコードの量をずいぶん少color: #633;なくできます。

font-size: 105%;

また、同じ種類の文書構造はグループで指定できることが多いため、グループでfont-size:110%;}padding: 0.5em;
}

●
スッキリ

コード2-3

指定した値をあとから上書き指定しておけば、デザインを変えるときにCSS

h1とh2は修正したけれどもh3を修正し忘

h1, h2, h3{

れたというミスがなくなります。

background-color: #ffc;

セレクターのグループ分けで注意しておとからh3だけ別の色を指定する方法が有

きたいのがカンマ（,）の付け方です。グル効です。これは、同じセレクターの同じプープにしたいセレクターごとにカンマを付ロパティーへの値の指定が複数ある場

color: #633;
padding: 0.5em;}

けるという非常に単純なルールですが、う合、あとから指定されたほうの値が有効にっかり最後のセレクターのあとにもカンマなる CSS のルールを利用しています。

を付けてしまうと、指定したスタイルが適

CSSファイルの中で、グループで指定した}用されなくなります。

値よりもh3単独のスタイル指定を後ろに

h2{

コード 2-2 では h1 〜 h3 すべてに同じ

font-size:120%;

font-size:110%;書く必要があることに注意してください。

「#633」の色を指定していますが、h1とh2

基本的なタグとそれに対する基本的なには同じ色を指定するけれどもh3の色だプロパティーは先に書いて、複雑な設定けを変えたいということもあるでしょう。こはあとに書くというように記述の仕方に一の場合、コード2-3のようにh1〜h3にまと貫性を持たせると、CSSはすっきりするこ

めて「color: #633」を指定しておいて、あとでしょう。

130 +++ iNTERNET magazine 2005.01 +++

h1{}
h3{
font-size:105%;
color: #300;}

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

スパゲティCSS解消法③backgroundプロパティーでダイエット

スッキリ度

CSSにはたくさんのプロパティーがある
ため、1行に1プロパティーという形で書いていくと、CSSファイルはどんどん長くなってしまいます。そこで、まとめて記述で×スパゲティ

コード3-1

背景のプロパティー5つを個別に指定

きるプロパティーは 1 行にまとめてしまい

CSSましょう。一部のプロパティーは、関連す#section {る複数のプロパティーを 1 行にまとめてbackground-color: #ccc;（簡略化して）指定できるのです。慣れてくbackground-image: url(bg.gif);

ると、簡略化されたプロパティーの書き方

background-repeat: repeat-y;のほうが楽に書けるため、こちらの書き方

background-attachment: scroll;をよく使うことになるでしょう。

background-position: 0 0;}

簡略化されたプロパティーを記述する
方法は、最近多くのユーザーに使われているほとんどのブラウザーで問題なく使えます。しかし、IE 5.0や Netscape 4.xのような古いブラウザーだと簡略化したプロ●
スッキリ

コード3-25つの値をまとめて指定

パティーを一部正しく読み込めない場合もCSSあるので、古いブラウザーでも見た目をで#section {きる限り同じにしたい場合は簡略化指定は控えたほうがいいかもしれません。

background: #ccc url(bg.gif) repeat-y scroll 0 0;}

簡略化できるプロパティーとしては、background、margin、padding、border、list-style、fontがあります。それぞれのプロパティーをどのようにしたら短く書けるのか、その記述方法を簡単に紹介します。
まずはbackgroundプロパティーを見てみましょう。背景のスタイルを決めるプロ●
スッキリ

デフォルト値の指定を省略

CSS#section {パティーはコード3-1のように5種類あります。これらのプロパティーは、コード3-2の

コード3-3

background: #ccc url(bg.gif) repeat-y;}ようにbackgroundプロパティーを使って1行にまとめられます。
backgroundプロパティーにどのようなが、各プロパティーのデフォルトになる値にかなりスッキリします。デフォルト以外の順番で値を指定するかの決まりは特にあはわざわざ書く必要はありません。たとえ値にしたいときはbackgroundの値に新しりませんが、background-positionにあたば、background-attachmentのデフォルト

く追加すればいいだけなので、メインテナる2 つの値は必ずセットにして横軸の位値は「scroll」なので、これは省略できます。

ンスが非常に楽になります。

置、縦軸の位置の順番で書く必要がある

また、background-positionのデフォルト

ほとんどのブラウザーで問題なく使えることにだけ注意してください。

値は「0 0」なので、この値もbackgroundbackgroundですが、Netscape 4.xではコード3-2ではbackgroundプロパティでの記述では省略できます。このようにデ指定した値がうまく適用されない場合があーに指定できる値をすべて列挙しました

フォルト値を省略すると、コード3-3のようるので注意しましょう。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2005.01 +++131

スパゲティCSS解消法④

marginとpaddingのプロパティー
でダイエットスッキリ度

marginとpaddingは、コード4-1やコード4-2のように上下左右の値をそれぞれ指×スパゲティ定します。これらの値は、marginプロパティーやpaddingプロパティーを使えば、

コード4-1

上下左右の余白やを個別に指定

×スパゲティ

コード4-2

上下左右の詰めを個別に指定

コード4-3のように、それぞれ1行にまとめ

CSS

CSSて記述できます。

#nav{#header{

値を書く順番は、top→right→bottom

margin-top: 10px;

padding-top: 10px;→leftと決められています。これは、図3のmargin-right: 5px;

padding-right: 20px;

ように上から時計回りに記述していると考

margin-bottom: 20px;

padding-bottom: 10px;

えれば覚えやすいでしょう。

margin-left: 10px;}

コード4-1のように上下左右の値がバラ

padding-left: 20px;}

バラの場合は順番に従ってコード 4-3 のmarginのようにそれぞれの値を書きます
が、コード4-2のように上と下の値が同じ、左と右の値が同じの場合は値を4つ書く必要はありません（もちろん記述しても全然 問 題 ありません が ）。コード 4 - 3 のpaddingのように上下の値と左右の値の●スッキリ

コード4-34方向の余白や詰めをまとめて指定●
スッキリ

一部の方向の値だけを指定

CSS

CSS

#nav{

#header{margin:

みを書くだけでもきちんとスタイルは適用

padding: 5px 10px 10px;

10px 5px 20px 10px;されます。

コード4-4}

margin: 10px;}

また、コード4-4のpaddingプロパティ#header{ーのように、値を3つだけ指定する書き方

padding: 10px 20px;もあります。この場合は、上の値、左右の}値、下の値の順に指定されていることになります。上下左右すべてが同じ値の場
合はコード4-4のmarginプロパティーのよ
うに1つの値を記述するだけで全方向に同じ値を指定したことになります。
marginとpaddingの簡略化した表記もtop（上）

background の場合と同様に Netscape
4.x ではうまく動作しないことがあります。
また、IE 5.0でもうまく表示されないことがあると言われています。
left（左）right（右）bottom（下）132 +++ iNTERNET magazine 2005.01 +++図 3 margin や padding は上から右回りの順番で指定

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

スパゲティCSS解消法⑤list-style プロパティーで
ダイエット

スッキリ度

リスト
（箇条書き）のスタイルを決めるプ
ロパティーは、コード5-1のようにlist-styleimage、list-style-type、list-style-positionの3つがあります。

×
スパゲティ

これらの値は、list-styleプロパティーをCSS

使ってコード5-2のように1行にまとめるこul{

コード5-1

箇条書きのプロパティーを個別に指定とができます。backgroundプロパティー

list-style-image: url(mark.gif);のときと同様に、値を書く順番は特に決

list-style-type: circle;
list-style-position: inside;

まっていませんし、デフォルト値を使う場}

合は省略することもできます。
箇条書き項目の左側にデフォルトで表示される黒い丸の代わりになるマーカーを定義するプロパティーとして list-styleimage（アイコン画像を指定）とlist-styletype（標準で定義されているマークを指定）●
スッキリがありますが、画像とマークの両方が指定CSSされていると、どのような順番で書かれてul{

いても画像の指定が優先されます。つまり、コード 5-2 のように記述した場合、指コード5-2

箇条書きのプロパティーをまとめて指定

list-style: url(mark.gif) circle inside;}

定された画像が読み込めないときにだけ「circle」が使われます。
スパゲティ解消法②で説明したように、CSSでは、プロパティーの指定が複数あってそれぞれ異なる値を指定している場合●
スッキリ

は、あとに書かれた値が優先されるというCSSルールがあります。このルールは、複数のul{

プロパティーを1つにまとめて指定する場
合でも同じで、まとめて指定しているプロ

コード5-3

まとめて指定した値の一部を上書き指定

list-style: url(mark.gif) circle inside;}

パティーの一部を別の指定で上書きでき
ul.special{ます。
たとえば、コード5-3では、どのulタグに

list-style: url(mark2.gif) square;}でも共通するスタイルをまず指定しておいて、そのあとにul.specialのスタイルを改めて指定しています。このようにすれば、
ul.specialではマーカーの指定（list-style-

ただし、IEではこの書き方で問題ない

ul.special の list-style では、list-style-imageとlist-style-typeにあたる値）だけがのですが、MozillaやFirefoxなどでは、あpositionにあたる値が指定されていないた

上書きされ、それ以外のプロパティー（list-とに書かれたlist-style全体の指定が前のめ、前に指定した「inside」ではなくデフォstyle-positionにあたる値）
はul共通のス

指定全体を上書きしてしまうため注意が必

ルトの値が使われてしまうのです。

タイルがそのまま使われます。

要です。たとえばコード5-3の書き方では、インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2005.01 +++133

スパゲティCSS解消法⑥

fontで簡略
プロパティー指定

スッキリ度

文字関連のプロパティーはコード6-1のようにたくさんあるため、細かく指定してい×
スパゲティ

くと、どんどんCSSファイルが長くなります。もちろん文字に関するプロパティーは

コード6-1

フォント関連の指定を個別に記述

ここに示したもの以外にもいくつかあるのCSS

ですが、コード6-1で指定されているプロ

p.specific{

パティーは、fontプロパティーを使えば、コ

font-style: italic;

ード6-2のように1行にまとめて記述でき

font-variant: normal;

ます。backgroundプロパティーと同様に、

font-weight: bold;

値を書く順番は基本的に自由ですが、守

font-size: 95%;
line-height: 180%;

らなければならないルールが2つだけあり

font-family: "ＭＳ Ｐゴシック", "ヒラギノ丸ゴ Pro W4",ます。それはfont-sizeとfont-familyにあHiraMaruPro-W4, Osaka, sans-serif;

たる値は必ず記述する必要があり、しかも}fontプロパティーに指定する値の最後にfont-size→font-familyの順に記述しなければいけないことです。このルールを守ら●
スッキリ

ないとfontに記述したすべての値が適用されないので注意が必要です。他の値は順番を変えたり省略したりできます。

コード6-2

フォント関連の指定をまとめて記述

CSS

コード 6-2 にある「95%/180%」は最初

p.specific{の値がfont-sizeで次がline-heightの値でfont: italic normal bold 95%/180% "ＭＳＰゴシック",

す。line-heightは省略できますが、記述す"ヒラギノ丸ゴ Pro W4", HiraMaruPro-W4, Osaka, sans-serif;}

る場合にはfont-sizeとセットにして「/」で区切って記述します。

「継承」を利用しよう
CSSには、「継承」という便利な仕組みがkeywordクラスのspan要素はp要素の述を減らせて便利なのですが、注意が必要あります。要素に親子関係がある場合、親子要素になっています。この場合、CSSでな場合もあります。色や枠線の太さなどな要素に指定されたスタイルは、何も指定しp要素のスタイルとしてフォントサイズやらば親要素に指定したのと同じものを子要なくても子要素にも適用されるようになっ色が指定されていれば、その指定はp要素素に指定しても問題ないのですが、サイズています。これが継承です。たとえば、次の子要素であるspan.keywordにも自動指定は重ねて使ってはいけません。たとえのようなHTMLがあるとします。

的に適用されます。このため、p要素のス

ば、親要素でfont-size: 90%を指定してタイルに指定しているプロパティーは、わいる場合、子要素にも同じ font-size:

ざわざspan.keywordのスタイルとして改90%を指定してしまうと、継承のためにめて指定する必要はありません。

子要素は結果的に90%×90%＝81%相<p>CSSでは、デザインの基本となる<spanclass="keyword">ブロックモデル</span>を理解することが大切です。</p>

134 +++ iNTERNET magazine 2005.01 +++継承をうまく使えば、不必要なCSSの記

当のサイズになってしまうのです。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&DスパゲティCSS解消法⑦

borderで簡略プロパティー指定

スッキリ度

デザインにメリハリを付けるために、ボックスに枠線を付けることも多いでしょう。
枠線のプロパティーはコード7-1のようなものがありますが、これはコード7-2のようにborderプロパティーにまとめて1行で書

×
スパゲティ

コード7-1●

枠線関連の指定を個別に記述

スッキリ

border: 1px solid #633;

border-width: 1px;合はこれでいいのですが、4方向で違う枠線を使いたい場合は少し事情が異なりま}border-style: solid;

上下左右すべて同じ枠線を使いたい場

枠線関連の指定をまとめて記述.side{.side{

くことができます。

コード7-2border-color: #633;}

す。marginやpaddingでは上下左右の値を1つのプロパティーでまとめて指定できましたが、borderでは上下左右について●スッキリ

コード7-3

上下左右に違った枠線を指定（方向別）

それぞれ3つの値を指定できるため、1つのプロパティーで4方向の枠線に別々の.side{
border-top: 2px solid #ccc;指定をすることはできません。この場合、border-right: 1px dotted #666;

すっきりとCSSを指定するには2つの方法

border-bottom: 1px solid #999;があります。1つは、border-topやborderleftなどそれぞれの方向に対応するプロパ

border-left: 2px dotted #666;}

ティーにそれぞれ3つの属性の値を指定する方法（コード7-3）、もう1つは、borderwidthやborder-styleなどの属性のプロパティーにそれぞれ4方向の値を指定する方法（コード7-4）です。4方向の枠線がバラ●
スッキリ

コード7-4

上下左右に違った枠線を指定（属性別）.side{

バラになることは少ないでしょうから、コー

border-width: 2px 1px 1px 2px;

ド7-4のようにするほうがCSSファイルにborder-style: solid dotted;
border-color: #ccc #666 #999;

書く内容は減りますが、あとからメインテナンスすることを考えると、コード7-3のよ}

うに書くほうがわかりやすいでしょう。

自分なりのルールを作ろう
今回紹介したのはCSSをスマートに書はずです。このように細かいルールは存くときには、自分なりのルールを作り、一くための方法の一部にしか過ぎませんが、在するものの、CSSには「こういう順番で貫性をもったコードを書く必要があります。

基本的なところはカバーしています。

こう書かなければならない」という絶対的スマートにコードを書くことにより、あとでここで紹介したプロパティーの書き方をなルールが存在しません。だからと言ってどこに何を書いたのかがわからなくなるこ

実行するだけでもコードの行数はかなり減

場当たり的にCSSを書いていると、すぐとを防げるのです。

り、見通しのいい CSSファイルにできるにスパゲティ化してしまいます。CSSを書

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2005.01 +++135

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.