CSSの基本的な書き方をまとめてみた「CSS記述方法」
CSSは外部ファイルで読み込むのがセオリーですが、更新をすぐに反映させるなら直接記述もアリです。
CSSは3つの要素でできています。セレクタ・プロパティ・値の3つです。
CSSには優先順位があり、変更が反映されない場合はより優先された設定を探しましょう。
CSSを知ればWEBを制する
CSSはWEBページにデザイン的な要素を加えるためのデータです。
以前はHTMLソース内に直接デザイン指示を書き込んでいましたが、今はレイアウトとデザインは別々に分けるのが主流です。
ですのでデザイン要素は、基本的にはCSSファイルの中に全て書き込んでしまいます。
タグと名称で双方を紐づける
CSSデザイン（スタイル）とHTMLソースを結び付けるのが、「タグ」や「名称」です。
HTMLレイアウトは、骨組み「タグ」と属性として付けられた「名称」で9割を占めています。
タグと名称部分に着目すれば、複雑なHTMLソースの見た目に惑わされる事はありません。
本記事では、CSSの基本的な書き方・記述方法についてまとめました。
外部CSSファイルの読み込み
まずは基本的なCSSファイルの読み込みから解説しましょう。
今CSSは外部ファイルとして、HTMLファイルとは別にする事がほとんどです。
CSSファイル自体は既にあるものとしてお話を進めます。
head内に読込コードを入れる
HTMLソースのheadタグの中に、CSSファイルの位置を読み込むコードを書きます。
headタグ内記述例
<head> <link rel="stylesheet" href="css/style.css"> </head> css/style.cssの部分は自分の環境に合わせて変えましょう。
これでこのページのHTMLと、CSSに記述した設定が紐づけられるようになります。
全ページで読み込む事
このCSS読込コードは、基本的には全ページのheadタグ内に入れます。
こうしておくとデザインファイルはstyle.cssに統一されるので、修正が出た場合に大変便利です。
style.cssを1か所修正すれば、それが全ページに反映してくれるからですね。
もしHTMLソース内に直接デザイン指定を入れていた場合、該当箇所を全て漁って書き直さなければなりません。
CSSは複数ファイル準備できる
この時読み込むCSSファイルは1枚である必要は無く、何枚でも読み込めます。
例えばPC版のスタイルに関する記述は「style.css」スマホ版は「responsive.css」と分けておく事ができます。
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css">
スマホ版のスタイル修正は全てresponsive.cssに入っている訳ですから、WEBサイトの管理効率が良くなりますよね。
他にも色に関するCSS（color.css）を分けたり、フレームワーク（bootstrap.css）を分けたりします。
4枚読み込んだ例
<link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/font.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css">
HTMLファイルに直接CSSを書く
CSSファイルを読み込むのではなく、HTMLソース内に直接CSSを書く事もできます。
直接CSSを書くのには2つのタイプがあります。
・head内に記述する
・body内タグに直接記述する
headタグ内に記述する
headタグ内にstyleタグを入れて、CSSスタイルをそこに直接記述する事があります。
headタグ記述例
<head> <style type="text/css" media="screen"> セレクタ{ プロパティ: 値; プロパティ: 値; プロパティ: 値; } セレクタ{ プロパティ: 値;> プロパティ: 値; プロパティ: 値; } </style> </head>
これにより記述した1ページ全体に対して効果が及びます。
逆に言えば、上記の記述が入っていないページには反映がされない事になります。
body内タグに直接書く
もう一つはbodyタグ内に直接CSSを指定する方法です。
タグに直接指定する訳ですから、そこにしか適用されません。
HTMLソース記述例
<div style="font-size: 14px;"></div>
先ほども言った通りこの書き方は、仕様変更があると該当箇所を全て書き直す必要があるのであまりお勧めはしません。
記述しようと思えば「できなくは無い」程度と認識しておいて下さい。
headやbodyに直接書くメリット
headやbodyに直接CSSを書くメリットは無いのかと言えば、そうではありません。
WEBサイトの更新をすぐ反映させたい時に重宝します。
更新が反映されない場合
CSS記述を修正した場合、すぐにWEBサイトに反映されない事があります。
特に何度も変更があったりすると、スマホでは反映されない傾向にあります。
CSSを修正しただけの場合HTMLソース自体に変化がないため、キャッシュの影響でF5を押しても切り替わらない事が原因です。
直接書く事でHTMLファイルを変化させる
そんな時、headやbody内タグに直接修正を記述すれば、HTMLソース自体が修正された事になるので、F5で反映されやすくなります。
何度も修正をしたり、とにかくすぐに反映をさせる必要がある場合に使うようにしましょう。
CSSの3つの構成
次はCSS自体の書き方です。CSSは以下の3つの構成で成り立っています。
・セレクタ
・プロパティ
・値
セレクタ
セレクタとは、CSSスタイルを適用する対象となる「タグ」を指しています。
pタグやul、li、divなど、HTMLを構成する全てのものをタグと呼びます。
タグセレクタ記述例
例えばliタグやdivタグにCSSを適用したい場合は以下の様にします。
セレクタ{ プロパティ: 値; } div{ margin: 20px; } li{ list-style-type: none; }
それから「id=""」「class=""」など、タグに付随したの名称も全て「セレクタ」になります。
名称セレクタ記述例
#wrap{ プロパティ: 値; } .contents{ プロパティ: 値; }
プロパティ
プロパティとは、設定したセレクタに対して変化させる内容を指定したものです。
プロパティには様々な種類があり、例えば色を変更するのなら「color」、背景色を変えるなら「background」を指定します。
この「プロパティ名」は非常にたくさんあります。できれば大部分を覚えておくべきでしょう。
仮に忘れた場合も検索すればすぐに出てきますので安心して下さい。
値
値は、プロパティで指定したところをどの様に変化させるのかを指定するものです。
ここは大部分が「記号」「値」「名称」になります。
例えば、色colorであれば「red;」或いは「#ff0000;」などの色表示記号が入ります。
余白を作るpaddingであれば「10px;」など数値が入ります。
記述記号
どんなCSSも、このセレクタとプロパティ・値の3つで構成されています。
セレクタ名は{}の外に記述され、プロパティと値は{}の中に入ります。
プロパティの後ろには「:」コロンが付く事、そして値の後ろには「;」セミコロンが付きます。
.style1{ background: #000; }
上記の例では.style1がセレクタ、backgroundがプロパティ、#000が値を示しています。
複数スタイルが設定できる
下記の様に一つのセレクタに対し、複数のプロパティと値を指定する事ができます。
セレクタ{ プロパティ: 値; プロパティ: 値; プロパティ: 値; }
タグと名称の違い
セレクタはsectionや、h1-h6、li等、あらゆるタグが指定できると説明しました。
しかしこういったタグは、1ページ内にたくさん使われますよね。
セレクタにタグを指定してしまうと、それら全てにCSSが適用されてしまいます。
タグに直接CSSを指定した場合
p{ color: #666; }
上記の様にすると、全てのp文章の色が薄いグレーになってしまいます。
pタグの場所によっては、もう少し濃くしたい箇所なども出てくる訳ですよね。
そのためそれぞれのタグ要素に「名前」をつけ、その名前が付いている部分に適用させるのがセオリーです。
これがid=""やclass=""で指定されている「名称」部分になります。
id属性について
idセレクタを書くときは、id名称の前に「#」をつけます。
そもそもidはページ内リンクのジャンプ先指定のために使われます。
id属性で付ける名称は1ファイル内で1か所のみでしか使えず、同じ名称を2か所以上で使う事はできません。
<div id="sec1">テキスト</div>…1回目 <div id="sec2">テキスト</div>…1回目 <div id="sec1">テキスト</div>…2回目は使えない #sec1{ プロパティ: 値; }
このような理由から、id属性に対してCSSを設定する事はあまり無いと考えて下さい。
使ったとしても1か所しか同じ名称指定ができないので、そこでしかスタイルを適用できません。
class属性について
classセレクタを記述する場合は、class名称の前に「.」をつけます。
class属性は先ほどのidと違い、同じ名称を何度でもつけることができます。
同じclass名称がついたタグはには、同一のCSSスタイルが適用されます。
<p class="sec">テキスト</p>…同グループ <p>テキスト</p> <p class="sec">テキスト</p>…同グループ .sec{ border: solid 1px #000; }
上記の様にclass名「sec」が設定された1行目と3行目のpタグがグループ化されます。
このグループ化されたp要素にのみ、borderのスタイルが適用されるという訳です。
セレクタの関係性を示すスタイル
セレクタはそれぞれ単体で使えますが、記述位置の関係を利用して複数並べる使い方もできます。
複数セレクタによる入れ子関係
<div class="wrap"> <div class="contents"> </div> </div>
上記は、wrapの中にcontentsが入れ子の状態で入っていますよね。
ここにCSSを記述する場合、以下の2つの書き方があります。
単体セレクタと複数セレクタCSS
.contents{ プロパティ: 値; } .wrap .contents{ プロパティ: 値; }
上のCSSはいずれもcontentsに対して指定したCSSです。
複数セレクタを並べて範囲を限定する
上下のCSSは同じcontentsに対して設定されたCSSですが、それぞれの「指定範囲」に違いがあります。
・上のCSS…contentsのクラス名全て
・下のCSS…wrapクラスの中にあるcontentsのみ
下のCSSは「wrap」クラス要素の中にある「contents」クラス要素に対してのみ効果が反映されます。
つまりwrapに囲われていないcontentsは対象外となるのですね。
この様に半角スペースを付けて複数のセレクタを並べて記述する事ができます。
特定のセレクタ関係にある要素に対し、固有のスタイルを指定できます。
その他のセレクタ間の関係
入れ子関係以外にも、関係性を示す様々な書き方があります。
半角スペース
A B…Aの中にあるBという要素を指定
記号「>」
A > B…Aの直下にあるBという要素を指定
記号「＋」
A + B…同じ要素レベル内Aの直後に来るBを指定
記号「~」
A ~ B…同じ要素レベル内Aの後ろにあるBを指定
記号「,」
A,B…AとBの両方とも指定
関係性を持つ書き方を多用しない
この様な「A B」や「A > B」の関係性を持つ書き方は使いどころが限定されます。
ある程度中身が固まった後に、突発的な修正が必要な場合などでしょう。
セレクタ関係が崩れたら無効
例えばソース変更により上記の入れ子関係が解消されてしまうと、CSSが効かなくなります。
そうなるとCSSの修正箇所がたくさん出てきてしまいますよね。
セレクタは今回の様に関連性を持たせずに、できるだけclass単体で指定するようにしましょう。
設置したての時は覚えているから良いのですが、時間が経つと入れ子の事を忘れてしまいます。そんな時が一番危ないと思います。
複数の値を並べて記述できる
最後の要素である「値」についても、実は様々な書き方があります。
paddingプロパティCSS
.area{ padding-top: 10p; padding-left: 5px; padding-bottom: 10px; padding-right: 5px; }
上記はpadding余白の上下が10px、左右が5pxという指定です。
これは以下の様に書く事ができます。
短縮形CSS（上下左右）
.area{ padding: 10px 5px 10px 5px; }
これはそれぞれ、上・左・下・右の順に半角スペースを空けて値が入っている事になります。
4行のプロパティが1行になっているので、随分省略できていますよね。
さらに以下の様に省略する事もできます。
短縮形CSS（上下と左右）
.area{ padding: 10px 5px; }
今回のケースは上下と左右がそれぞれ同じなので「10px」で上下を示し「5px」で左右を示す事ができます。
この様に半角スペースを入れて省略する事ができるプロパティがたくさんあります。
その他短縮できるプロパティ
.bg{ background-color: #999; background-image: url(../images/top_img1.jpg); background-repeat: no-repeat; background-potision: 10px; 20px; }
短縮した背景プロパティCSS
.bg{ background-color: #999 url(../images/top_img1.jpg) no-repeat 10px; 20px; }
borderプロパティCSS
.line{ border: solid 1px #000; }
上記の様に省略できる様になります。
半角スペース入りで複数の値がある場合は、複数種類のプロパティ名を省略していると考えて下さい。決して惑わされない様に。
メモを残せる
CSSファイルの中で使えるのは半角英数字のみで、日本語は通用しません。
先ほどの3つの構成に沿ったものしか書く事ができない訳です。
しかし「覚書メモ」の様なものを日本語で残せます。これが大変大事なものになります。
コメントアウト
こういった日本語メモを書く場合は、「コメントアウト」という方法を使います。
日本語の前後を特殊な記号で挟んで、CSSの制御とは無関係である事を認識させる訳です。
具体的には「/*」と「*/」で囲んだ範囲をコメントと認識します。
CSSコメント例
/*テスト用、本番になったら消す事*/ .test{ background: #f1f1fd; /*背景色はヴァイオレット*/ } /*------- この中には何を書いてもOK ------*/
この様にコメントを残しておくと、この部分を作った場所や理由を思い出す事ができます。
メンバーと情報共有するのにも役立ちますね。
むしろコメントの方がキモだったりします。記述時のルールや忘れてはならない事、書いてはいるが使っていないスタイルなど、ありとあらゆる事を書いていた方がいざという時に自分を助けます。
優先順位について
CSSで一番大変なのが「優先順位」を知る事です。
CSSの効果が反映されないケースに遭遇した場合、必ずこの優先順位が影響しています。
効果が反映されないのは「より優先されたCSSの記述がどこかにあるから」なのですね。
この優先順位は複数の様々なルールが組み合わさっていますので、ぜひ理解を深めて下さい。
同じ記述なら後に書いた方が優先される
下記のように同じ要素に対して同じCSSプロパティを指定した場合、「後から書いた方」が適用されます。
.iro{ color: red; } …間に他のスタイルが挟まっていて気づかない .iro{ color: brue; }
上の方のCSSでいくら文字の色を変更しても、下が青になっているので青から色が変わりません。
最終的に書いたCSSに上書きされてしまう訳ですね。
同じ記述が別ファイルにある事を忘れている
特に下のCSS設定を「別CSSファイル」に書いていて、それに気づかない事がよくあります。
基本的に書く場所は自分の自由なので、どこに何を書くかのルールを徹底する必要がある訳ですね。
読み込むCSSの順も影響
先述したhead内でCSSファイルを読み込む順番も影響します。
当然ながら、後から（下で）読み込んだ方が優先されます。
上のCSSファイルの記述をいくら変更しても、後から読み込んだCSSに同じ記述がある限り反映されませんよね。
同じ記述があるのであれば、後から読むCSSファイルの方を修正する必要があります。
複数セレクタによる記述が優先
先ほどの入れ子関係の様に複数のセレクタを組み合わせる場合も、優先順位が上がります。
/*複数セレクタによる記述が優先*/ div .contents{ background:#fff; } .contents{ background:#000; }
下のCSSはclassのみですが、上は2つのセレクタの入れ子関係を指定しています。
このケースの場合どちらが先に書かれているかに関係なく、複数セレクタを並べている方が優先されます。
セレクタ同士の優先度
HTMLタグとclassとを比較した場合、class属性の方が優先されます。
またclassとidを比較した場合は、id属性のほうが優先されます。
つまりセレクタは、id属性←class属性←タグの順で優先が高くなりますね。
CSS
/*idが最優先*/ #wrap{ background: #fff; } .contents{ background: #000; } /*記述は一番後だが、優先順位は一番下*/ div{ background: #f1f1fd; }
HTML
<div id="wrap"> <div class="contents">この場合背景は白になる</div> </div>
importantが最優先
特別な優先順位を持つのが「important」です。
値の後に「!important」とつけると、idやclassや順番に関係なく何よりもその設定が優先されます。
その後に全く同じCSSの記述で!importantが付かない限り、優先が続く事になります。
CSS
/*タグ指定だがimportantにより最優先*/ div{ background: #f1f1fd !important; } #wrap{ background: #fff; } .contents{ background: #000; }
HTML
<div id="wrap"> <div class="contents">この場合背景はヴァイオレットになる</div> </div>
importantは一見便利そうですが、多用するとメンテナンス時に大変になります。
どうしてもという時のみにしましょう。
まとめ
CSSに不慣れの人はこれらの内容を理解するのは大変かもしれません。
しかしとにかくCSSを見続けていれば、慣れてくるものです。
一番ややこしく感じるのが半角スペース等が入った複数セレクタの関係性と優先順位でしょう。
特に他人の作ったCSS解読には難儀する事が多いのですが、どのようなCSSであってもルールは同じです。
ぜひ頑張ってみて下さい。
