今回は、CSSの基本の書き方とCSSの読み込み方についてまとめたいと思います。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
目次
CSSは、基本的に次のような形で書きます。
（この要素の） {（このスタイルを）:（こうする）} という形です。
プロパティと値は、コロン（：）で区切って、中かっこ（{ }）で囲みます。
h1 { color : blue }
これは、h1要素の文字の色を青にするという指定です。
セレクタ（selector）とは、HTML要素をセレクトするもので、HTML要素を特定します。
HTML要素の名前、id名（HTML要素のid属性の値）、class名（class属性の値）など、色々な種類に対して、指定することができます。
プロパティ（property）はスタイルの種類です。
「color」なら文字の色、「background-color」なら背景色、「font-size」ならフォントサイズ、のように、こちらもたくさんの種類に対して、指定することができます。
値（value）はプロパティの値です。スタイルをどのようにするのかを指定します。
色なら「blue」や「#0000FF」、サイズなら「20px」や「2em」、のように、プロパティによって値の書き方も様々です。
１つのセレクタに複数のスタイルを指定する場合は、プロパティと値のセットをセミコロン（;）で区切ります。
h1{
color:blue;
font-size:120%;
line-height:1em;}
改行等は無くても問題はありません（読み辛いですが…）。
h1{color:blue; font-size:120%; line-height:1em;}
複数のセレクタに同じスタイルを指定したい場合は、セクレタをカンマ（,）で区切ってから、スタイルの指定をします。
区切りのためのカンマが抜けたり、セレクタの最後（中かっこが始まる直前）にカンマがあると、エラーとなるので要注意です。
section h1,
section h2{
color:blue;
line-height:1em;}
この場合も、改行等は無くても大丈夫です。
section h1, section h2{color:blue; line-height:1em;}
CSSのコメントは、スラッシュとアスタリスクで囲んで書きます。
/*CSSのコメントはこのように書きます。
始めと終わりだけ気を付ければ良くて、途中で改行しても大丈夫です。*/
CSSは、HTMLファイルに読み込まれて反映されますが、HTMLファイルでCSSを読み込む方法が４通りあります。
この方法は、HTMLのhead部分で、<style> ～ </style>の中に直接CSSを書く方法です。
この方法で書いたCSSは、そのHTMLファイルだけに適用されます。
ですので、そのページに特有のスタイルを書く場合に有効な方法です。
逆に、全てのHTMLファイルに同じスタイルを適用したい場合は、この方法では、同じ内容を各HTMLファイル全てに書く必要があります。
スタイルを変更する際など、編集作業が大変ですので、全てのHTMLファイルに同じスタイルを適用したい場合には、この方法は向いていません。
<head>
<style>
.sample img {
width:34px;
padding:8px;
border:0;}
</style>
</head>
HTML5から、style要素はscoped属性を指定すれば、body内にも置けるようになりました。
この方法も、そのページだけに適用したいスタイルを書く場合に有効な方法です。
body内に書けるので、ピンポイントでスタイル変更をしたい場合などに便利です。
ただし、他のHTMLファイルでも共通して使うスタイルには、この方法は向いていません。
<section>
<style scoped>
p { border: solid 3px #CCC; padding:1em; }
p.bRed { border-color:#f66; }
p.bYellow { border-color:#fc0; }
</style>
<h1>サンプル</h1>
<p class="bRed">この段落のborderは赤。</p>
<p class="bYellow">この段落のborderは黄色。</p>
<p>この段落のborderはグレー。</p>
</section>
<section>
<p>この段落はborder無し。上のsectionのスタイルが適用されない。</p>
</section>
この方法は、最もスタンダードな方法です。
CSSを別ファイル（拡張子は「.css」）にし、link要素でHTMLファイルに読み込ませる方法です。
スタイルを変更する際にCSSを編集する場合は、適用する各HTMLファイルをそれぞれ修正するのではなく、外部のCSSファイルのみを修正するだけで済むので、とても効率的です。
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
link要素を複数書いて、複数の外部CSSファイルをHTMLファイルに読み込むこともできます。
効果的にCSSファイルを分けると、編集作業がより捗ります。
<head>
<link rel="stylesheet" href="css/reset.css" >
<link rel="stylesheet" href="css/layout.css" >
</head>
このように複数のCSSファイルを読み込む場合、link要素の順番（外部CSSファイルを読み込む順番）がとても重要となります。
CSSには、前に読み込まれたものを、後で読み込んだものが上書きするというルールがあるので、上の例では、reset.css（デフォルトスタイルのリセット）→layout.css（レイアウト用のCSS）という流れで、サイトのスタイルを整えています。
これを逆に書いてしまうと、せっかく指定したスタイルがリセットされてしまいます。
（優先度のルールについては、別記事でまとめたいと思います。）
外部CSSファイル内で「@import」を使っても、複数のCSSファイルを読み込むことができます。
<!-- HTMLファイル -->
<head>
<link rel="stylesheet" href="style.css" >
</head>
<!-- CSSファイル（ここではstyle.css）-->
@import url(css/reset.css); /*ブラウザのデフォルトスタイルをリセット*/
@import url(css/layout.css); /*全体のレイアウト*/
@import url(css/responsive.css); /*レスポンシブ用*/
この場合も、書く順番（外部CSSファイルを読み込む順番）が大事です。
CSSは、前に読み込まれたものを、後で読み込んだものが上書きするということを念頭に置いておく必要があります。
style属性を使って、HTML要素に直接スタイルを書き込むこともできます。
この方法によると、その要素にだけ、CSSが適用されます。
ページ内のある要素だけに特別なスタイルを指定したい場合などに有効な方法です。
ただし、大枠では、HTML文書とCSSを分離することが推奨されているので、この方法は必要な場合に限定的に使用するのが無難です。
編集作業を考えても、多用することは避けた方が良いです。
<p style="margin-bottom:0; font-size=85%"> </p>
このように、インラインで書く方法は、CSSの優先度的には最強となります。
他のどんなスタイル指定よりも、インラインスタイルが最優先で適用されます。
（優先度のルールについては、別記事でまとめたいと思います。）
INTERNOUS,inc. All rights reserved.
