CSSの基本についてまとめました。記事で取り上げた内容は、CSSを使う上での基礎知識や基本的な使い方など、CSSを使う上ではなくてはないらない知識ばかり。Web制作のビギナーだけでなく、CSSの総ざらいをしたいエンジニアやデザイナーにもご覧いただければと思います。
CSSの基礎知識
まずはCSSの基礎知識から、Web制作での使われ方を念頭に置きながら解説していきましょう。
CSSとは？
CSS（Cascating Style Sheets）とは、Web制作で使われているプログラミング言語のこと。Web制作と言えばHTMLなのですが、それと並んでWeb制作では欠かせないスキルに数えられます。
CSSがWebページで担っている役割は、HTMLとCSSを比較すれば理解しやすいでしょう。
例えば、下のサンプル画像を見てみてください。
これは本記事のための用意した、シンプルなサンプルページです。このページは、HTMLファイル1つとCSSファイル1つから構成されています。それぞれ、下のような内容になっています。
こちらがHTMLで、
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプルWebページのタイトル</title> <link rel="stylesheet" href="sample.css"> </head> <body> <h1>ページの大見出し</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h2>ページの中見出し</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </body> </html>
下がCSSファイルです。
body {
font-size: 62.5%;
}
h1,h2 {
color: #333;
}
h1 {
font-size: 3.0em;
padding: .25em 0 .25em .25em;
border-bottom: 2px solid #ccc;
}
h2 {
font-size: 2.0em;
padding: .25em 0 .25em .5em;
border-left: 2px solid #ccc;
margin-left: 1em;
}
p{
color: #333;
font-size: 1.6em;
margin-left: 1.5em;
}
h1 + p:first-letter{
margin-right: .2em;
font-size: 2.5em;
}
画像にあった文章や見出しはHTMLファイルに書かれてありますね。一方で、フォントの大きさや色はCSSファイルに書かれています。HTMLファイルがページの構成やコンテンツを、CSSがデザインなどのスタイルを担っていることがわかります。
試しに、CSSの読み込まないようにすると、同じHTMLなのに下のように無味乾燥なページになってしまいます。CSSの重要さが、少しわかった気がしますね。
ここまでのまとめとして、HTMLとCSSの違いを下表にまとめておきましょう。
| HTML | Webページの構造やコンテンツを決めている。ページに配置する要素の種類やそれぞれの親子関係、ページに表示する文章など。 |
|---|---|
| CSS | Webページの見た目を決めている。フォントや背景、さまざまな装飾など。 |
CSSはこのように、ページの見た目を決めています。ページのデザインを変更したり、テキストやフォームに装飾を追加したい時は、CSSコードを書けばOKということになります。
なおHTMLについては、下の記事で詳しく解説しています。
CSSファイルの作り方
CSSファイルを作るには、どうすればいいのでしょうか？CSSファイルの作り方を確認しておきましょう。
とは言っても、CSSファイルを作るのはとても簡単です。ファイルの拡張子として.cssをつけるだけ。簡単ですね。
拡張子が.cssになっていれば、CSSのプログラムファイルとして認識されます。
CSSファイルの読み込み方
上の例で見たように、CSSを使うにはHTMLファイルから読み込む必要があります。HTMLファイルからCSSファイルを読み込む方法を見ておきましょう。
CSSファイルを読み込むには、HTMLのheadセクションにて下のように書きます。
<link rel="stylesheet" href="">
hrefのところに、CSSファイルへのパスを書けばOK。例えば、sample.cssというCSSファイルを読み込みたい時は下のように書きます。
<link rel="stylesheet" href="sample.css">
CSSファイルがフォルダに格納されている場合は、下のように書きます。
<link rel="stylesheet" href="css/sample.css">
なお、CSSはHTMLファイルから読み込む意外に、直接HTMLの中に書いてしまうこともできます。headセクション内に、下のようにCSSを書いていけばOKです。
<style type="text/css">
p {color: #555;}
</style>
bodyセクション内で書くことも可能です。各HTML要素のタグ内に、style属性を追加して直接CSSスタイルを書く方法です。
<p style="color: #555;">CSSの書き方を説明しています。</p>
HTMLの中に直接CSSが書けるのは便利なように見えます。ただし、特段の理由がない限りこういった書き方は避けた方がよいです。
HTMLとCSSの役割が、1つのファイルに混在してしまうからです。コードの可読性も低下しますし、メンテナンス性も下がってしまうでしょう。
基本的にはHTMLとCSSは別のファイルに分けて、HTMLからCSSを読み込むようにしてください。
CSSの書き方まとめ
それではCSSの使い方に入っていきましょう。具体的なコードも載せてあるので、サンプルとしてもご活用いただければと思います。
基本的な書き方
CSSの基本的な書き方を確認しておきましょう。
CSSを書くときは、大きく3つのパーツを書くことになります。「セレクタ」「プロパティ」「値」の3つです。例をあげて見ていきましょう。HTMLで書いたセレクタに対して、CSSで設定したプロパティが適用されていくのです。
下のコードを見てください。
h1 {color: blue;}
この例では、h1というセレクタに対して、colorプロパティにblueという値を設定しています。HTMLで設定したh1に対して、フォントが青色（blue）で表示されます。
CSSの書き方の基本は、以上です。案外難しくなさそうですね。
さて、上の例では、h1に設定しているプロパティはcolorの一つだけでした。実際にCSSを使う時は、下のように複数のプロパティを設定することが多いです。
h1 {color: blue; font-size: 2em; font-weight: 300;}
プロパティの数が多くなってくると、コードが読みづらくなってしまいます。そこで、下のように改行やインデントを使ってCSSを書くことが一般的です。
h1 {
color: blue;
font-size: 2em;
font-weight: 300;
}
随分と見やすくなりましたね。CSSのコードはこのように、セレクタごとに設定したいプロパティを列挙して書いていきます。
セレクタ
CSSコードは、セレクタとプロパティ、値の3つから構成されていました。ここではセレクタに話題を絞って、書き方を見ていきましょう。
全ての要素
CSSでは、セレクタを指定してそれぞれのスタイルを書いていきます。ところで、全てのセレクタに適用させたいスタイルはどのように書けば良いのでしょうか？全てのセレクタに、同じスタイルを書き込まなければいけないのでしょうか？
CSSには便利な機能があって、半角アスタリスクを使うことで全セレクタを対象とするスタイルを書くことができます。
* {
color: blue;
}
CSSは原則、書いた順番に適用されます。つまり、下に書いてあるスタイルが優先されて、上に書いてあるスタイルは上書きをされるのです。
そのため、全てのセレクタに適用させたいスタイルは、CSSファイルの一番上に書くといいでしょう。
id
HTMLでidをつけたセレクタにCSSを当てたい場合は、半角シャープを使って下のように書きます。
#sample-id {
color: #ffffff;
}
半角シャープの後に続いて、id名を書けばOKです。
class
idの場合は半角シャープでしたが、classの場合は半角ピリオドを使います。
.sample-class {
color: #ffffff;
}
半角ピリオドの後に、class名を記述します。
セレクタの複数指定
複数のセレクタに、同じスタイルを使いたい場合の書き方です。
まずは下のCSSコードを見てください。
h1 {
color: blue;
}
h2 {
color: blue;
}
h3 {
color: blue;
}
h1からh3までの見出しタグに、同じスタイルが適用されています。どれもcolorプロパティで、値も同じですね。
これでは少し非効率なので、下のように書き直すこともできます。
h1, h2, h3 {
color: blue;
}
かなりスッキリしましたね。
子孫セレクタ
子孫セレクタとは、セレクタの入れ子構造に従って、適用させるセレクタを決める方法です。
下のHTMLコードを見てください。
<p>CSSの書き方<span>中級編</span>です。</p> <ul> <li>ステップ１：<span>子孫セレクタ</span></li> <li>ステップ１：<span>隣接セレクタ</span></li> <li>ステップ１：<span>擬似要素</span></li> </ul>
span要素が4つありますが、pタグの中に入っているspanにだけスタイルを適用させたいとします。その場合、下のように書きます。
p span {
color: blue;
}
このようにセレクタを半角スペースで区切ることによって、その親子関係を指定することができます。
上の例だと、pタグの中に入っているspanには適用されますが、ulタグの中のspanにはスタイルは適用されません。
子要素にのみ適用させる
まずは下の例を見てください。
<p>CSSの書き方<span>初級編</span>です。</p> <p>CSSの書き方<a href="#"><span>中級編</span></a>です。</p> <p>CSSの書き方<span>上級編</span>です。</p>
CSSは下の通り。
p span {
color: blue;
}
この場合、3ヶ所のspanにはどれも指定したcolorプロパティが適用されます。
そうではなく、1番目と3番目のaリンクがついていない要素にだけ、colorプロパティを適用させたいとしましょう。その場合は、下のようにCSSを書きかえます。
p > span {
color: blue;
}
すると、2番目のspanにはcolorプロパティが適用されず、1番目と3番目だけを青色で表示できます。
入れ子になっている全ての要素ではなく、直下の要素にだけスタイルを適用させたい時に活用しましょう。
隣接セレクタ
次は隣接セレクタです。これは、隣り合っているセレクタにだけスタイルを適用させる方法です。
まずは下のHTMLコードをご覧ください。
<ul> <li>メニュー１</li> <li>メニュー２</li> <li>メニュー３</li> </ul>
これに次のCSSコードをあてます。
li {
color: yellow;
}
li + li {
color: blue;
}
半角プラスを使っている部分を見てください。これは、li要素と隣り合っているli要素に、適用させるスタイルを指定しています。表示結果は、下のようになります。
| 表示結果 | |
|---|---|
| 1番目のli要素（メニュー１）。 | liと隣接していないので、yellowで表示される。 |
| 2番目のli要素（メニュー２）。 | 1番目のliと隣接しているので、blueで表示される。 |
| 3番目のli要素（メニュー３）。 | 2番目のliと隣接しているので、blueで表示される。 |
後にある要素全てに適用させる
指定したセレクタよりも後にある要素全てに、スタイルを適用させる書き方です。
<p>CSSの書き方「初級編」です。</p> <h3>ここにメニュー</h3> <p>CSSの書き方「中級編」です。</p> <p>CSSの書き方「上級編」です。</p>
CSSは下記です。
h3 ~ p {
color: blue;
}
このように書くことで、h3より後にある全てのp要素にスタイルを適用させることができます。h3より前のp要素には、スタイルは適用されません。
擬似要素、擬似クラス
次は、擬似要素と擬似クラスです。
これらを使うと、さらに工夫を凝らしたCSSを書くことができます。いくつか例をあげていきましょう。
::first-letter
テキストの中で、1文字目だけに適用するスタイルを指定します。下記が具体例です。
<p>サンプルその１</p>
p{
font-size: 1.6em;
}
p::first-letter{
margin-right: .2em;
font-size: 2.5em;
}
p要素の最初の1文字目だけ、font-sizeが大きく表示されます。雑誌や新聞でよくある、ドロップキャップがこれで実装できます。
この他にも、最初の行にだけスタイルを適用させる:first-lineや、指定した番目の文字にだけスタイルを当てる:nth-of-typeなどがあります。
:hover
マウスでホバーした時のスタイルが指定できます。
<a href="#">リンク</a>
a:hover {
color: blue;
text-decoration: underline;
}
上ではテキストリンクに対して:hoverを使っていますが、もちろん画像にも使えます。デザインに一手間加えることもできますし、ユーザビリティを向上させることもできるでしょう。
:checked
チェックボックスやラジオボタンなどのフォーム要素で使える擬似クラスです。
具体例をあげます。
<input type="checkbox"><label>選択肢</label>
input[type=checkbox]:checked + label {
color: #0000FF;
}
上の例では、checkboxにチェックが入るとlabelの色が変わるようになっています。上でご紹介した隣接セレクタを使うことで、選択肢ごとにスタイルを変えられるようにしています。
プロパティと値
次はプロパティと値について見ていきましょう。
プロパティの書き方については、前述の通りです。プロパティは非常に数が多いのですが、ここでは代表的な3つのプロパティをご紹介していきましょう。
font-size
Webページではあらゆる部分でテキストを表示しますが、そのサイズを指定するのがfont-sizeになります。
font-sizeは下のように指定をします。
p {
font-size: 12px;
}
この例では、pタグ内のフォントを12pxで表示するよう指定しています。
font-sizeの値としてはいくつかの方法があります。下に列挙していきましょう。
まずは上でも例にあげた、px（ピクセル）で指定する方法から。絶対的なサイズを指定します。
p {
font-size: 12px;
}
次はemを使った方法です。emとは設定されたサイズに対して、相対的にサイズ指定をするときの方法です。16pxを1.0emとしてある場合、0.75emで12px相当になります。
p {
font-size: 0.75em;
}
相対指定には他にも方法があります。パーセントを使うと、下のように書くことができます。
p {
font-size: 120%;
}
キーワードを使って指定をすることも可能です。mediumを標準として、xx-small、x-small、small、medium、large、x-large、xx-largeの7段階があります。
p {
font-size: large;
}
margin
marginは要素の外側につくる余白を設定します。
p {
margin: 5px;
}
上の例では、要素の外側に5pxの余白をつくります。値を指定するには、font-sizeと同じでpxやem、%などが指定できます。自動で余白を設定するには値にautoを指定してください。。
なお、marginの値の書き方には3通りの方法があります。1つ目は、上の書き方です。この書き方だと、要素の上下左右にそれぞれ5pxの余白をとります。
p {
margin: 5px;
}
次は、上下・左右の順に指定をする方法です。この場合、上下に5pxずつ、左右に10pxずつの余白をとります。
p {
margin: 5px 10px;
}
3つ目は、上下左右を別々に指定する書き方です。値の順番に、上・右・下・左となります。この例では、上に5px、右に0px、下に15px、左に10pxの余白をとります。
p {
margin: 5px 0px 15px 10px;
}
border
要素の周囲に枠線を設定するためのプロパティです。borderプロパティの値は、下の順位指定をします。
p {
border: 幅 スタイル 色;
}
具体的には、下のように記述をします。
p {
border: 1px solid #0000ff;
}
スタイルにはsolidの他にもdouble（二重線）やgroove（立体的に山型）、dotted（点線）などが指定できます。
なお、borderは要素の上下左右の全てに、同時に枠線を描きます。上下左右、別々に指定したいときは、border-bottomやborder-top、border-left、border-rightを使います。
それ以外のプロパティ
上でご紹介したものも含めて、よく使うプロパティをリストアップしておきましょう。
| height | 要素の高さを指定します。 |
|---|---|
| width | 要素の横幅を指定します。 |
| float | 要素の左寄せ、右寄せを指定します。 |
| background | 要素の背景を指定します。 |
| color | テキストの色を指定します。 |
| font-size | フォントのサイズを指定します。 |
| font-family | フォントとその適用順を指定します。 |
| text-align | 要素におけるテキストの配置（左寄せ、中央寄せ、右寄せ）を指定します。 |
| border | 要素につける枠線を指定します。 |
| margin | 要素の外側の余白を指定します。 |
| padding | 要素の内側の余白を指定します。 |
コメントアウト
CSSでコメントアウトを使う方法です。
プログラミングにおいて、コメントはとても大事です。プログラムそのものには影響を与えませんが、コーディングを円滑にしたり、保守性を高めてくれたりします。CSSにおいてもそれは同じです。上手にコメントを使っていくようにしましょう。
さて、CSSではコメントアウトをするには下のように記述をします。
h1 {
/* コメントアウトする文章 */
color: blue;
}
下のように書くことで、CSSコードを区切る見出しとして使うことも多いです。
/* 見出しのスタイル */
h1 {
color: blue;
}
/* それ以外のスタイル */
p {
color: red;
}
なお、CSSでコメントした内容はWebページには表示されないのですが、ソースコードには残ります。開発時のコメントなど、公開すべきでない内容はコメントとして残さないか、圧縮（minify）した時に取り除くようにしておきましょう。
CSSをキレイに書く方法
CSSの書き方について見てきましたが、最後に一つ。CSSをキレイに書くにはどうすればいいのでしょうか？何かコツなどあるのでしょうか？
一つのヒントとして参考になるのが、Googleによるガイド（英語）です。
ここにはCSSを効率的に書くヒントがたくさんつまっています。ぜひ一度目を通されるといいでしょう。
英語が苦手な方は、Googleで調べてみてください。上のガイドを、日本語でわかるようにまとめているページがたくさん見つかるはずです。
CSSがキレイに書けたかをチェックしたいときは、CSSの文法チェックツールを使ってみてください。CSSの文法通りに書けているかが確認できますし、不具合をなくすことにも役立つはずです。
» The W3C CSS Validation Service
CSSの実践的な知識
最後に、CSSをWeb制作の現場で使う時に役立つ、実践的な知識をいくつかご紹介します。
圧縮（minify）
CSSコードは圧縮（minify）をすることもできます。圧縮をしたCSSを使うと、圧縮していないCSSファイルと比べてファイルサイズが大きく減らせます。読み込むコード量が減るので、Webページの表示速度を改善することができるのです。
圧縮をすると、CSSファイルはどのようになるのでしょうか？まずは圧縮をする前のコードがこちら。
h1 {
color: blue;
font-size: 2em;
font-weight: 300;
}
これを圧縮すると、下のようになります。
h1{color:blue;font-size:2em;font-weight:300}
半角スペースやインデント、不要なセミコロンなどが取り除かれて、1行でまとめられていることがわかります。可読性は大幅に低下しますが、ファイルサイズは大きく減らせます。上の例では、50パーセント弱のサイズダウンができています。
さて、CSSの圧縮をする方法です。手動で行うのは手間がかかりすぎるので、下記のようなツールを使うといいでしょう。
» Refresh-SF – Online JavaScript and CSS Compressor
» Code Beautifier: CSS Formatter and Optimiser
プリプロセッサー（Sass、Less）
CSSを効率的に書いていくには、プリプロセッサーは大きな助けになってくれます。書くべきCSSコード量が大幅に減らせますし、コーディングを便利にしてくれる機能が使えます。
CSSで使われているプリプロセッサーは、SassやLessがあげられます。どちらも導入は簡単にできますし、CSSと似た文法で書けるので学習コストも低いと言えます。
またCSSプリプロセッサーが使えると、後述するようなCSSフレームワークのカスタマイズにも役立ちます。CSS開発の幅が広がるので、ぜひ活用してみてください。
Sass（Scss）の基本や導入方法、基本的な使い方は下の記事でまとめています。よろしければそちらも併せてご覧いただければと思います。
» CSSコーディングを効率化する！SCSSの特徴と基本的な使い方
CSSフレームワーク
ゼロから全てのCSSコードを書いてもいいのですが、フレームワークを使うと開発のスピードアップが期待できます。コード量が減ることから保守性も高まりますし、人的ミスを減らすことにもつながるでしょう。
CSSフレームワークにはさまざまなものがありますが、それぞれ一長一短。メリットとデメリットがあります。CSSフレームワークを導入する時は、開発内容に合わせて、最適なフレームワークを選択する必要があります。
下の記事では、代表的なCSSフレームワークについてまとめています。各フレームワークの特徴も解説してあるので、CSSフレームワーク選びの参考にしていただければと思います。
リセットCSS
皆さんはWebページを見るとき、Webブラウザを使いますよね。Googleが提供しているChromeやMozillaによるFirefox、Safari、IEなど。人それぞれ、使いやすいWebブラウザを使っていることと思います。
こういったブラウザは、実はデフォルトでCSSを備えています。これらのデフォルトCSSが残っていると、自分が意図するスタイルとは異なる表示になってしまう危険性もあります。
そこで使われているのが、リセットCSSです。これは各ブラウザが持っているデフォルトのCSSをリセットしてくれるもの。リセットCSSは、自分が書いたCSSの前に読み込みます。これによって、まっさらな状態に戻してから、自分が書いたCSSを適用していけるのです。
リセットCSSにもいくつか種類があって、それぞれリセットする内容が異なっています。代表的なリセットCSSとその特徴ついては、下の記事でまとめています。
あとがき
CSSの基本や実践的な内容までまとめてご紹介しました。基礎的な内容を中心に取り上げましたが、実務でCSSを使いながら、より発展的な内容にチャレンジしていっていただければと思います。
なお、CSSについては下の記事でもまとめています。こちらの記事もよろしければご覧いただければと思います。
» レスポンシブデザインでスマホ対応させる方法（CSS3、メディアクエリ）