HOME
CSSとは？
WEBサイトの基本構造を担うのがHTMLであるのに対し、WEBサイトのデザインを担うものがCSSです。
HTMLの文字の大きさや色、配置などをCSSによって指定していくことで思い描くWEBサイトのデザインを表示させるようにします。
画像編集ソフトでサイト全体のデザインを画像データとして用意して丸々表示させる裏技もありますが、リンクが貼れなかったり、検索順位に影響を与えたりとおすすめできません。
WEBサイトの本来の役割や機能を発揮させてデザインを表現するにはCSSが必要不可欠です。
CSSの学習方法や練習方法は？
CSSは後述するプロパティというデザイン項目やそれに対する値の指定の方法を覚えなければなりません。数も多いうえ、なかには実際に使用する頻度が少ないものもありますので一気に丸暗記しようとするのではなく、練習のために既存のサイトをまねて作ってみる過程で、デザインのために必要なプロパティを理解していくという学習方法がオススメです。
世の中のサイトは全てCSSでできていているので、既存のどんなサイトでもあきらめなければ再現できないデザインはありません。デベロッパーツールを使えば実際にどのように記述しているかも見れますので、この表現はどうやっているのか学習するのに便利です。
CSSの書き方（セレクタとプロパティについて）
CSSで装飾したい対象のHTMLを「セレクタ」、装飾する項目を「プロパティ」と呼びます。プロパティに対して「値」を指定することで対象のHTMLの装飾を変更します。
CSSは記述する場所によって若干書き方が変わります（後述「CSSを読み込む方法」）。次の例ではstyleタグを用いてHTML内に記述しています。
<style>
p{
font-size:20px;
color:red;
}
</style>
<p>CSSの書き方
|
CSSの書き方 |
|---|
装飾したい対象はpタグなので「ｐ」がセレクタになり、「{」と「}」の間に、装飾項目であるプロパティ「font-size（文字の大きさ）」「color（文字の色）」
とその値（数値や色）を指定します。
プロパティと値の間には「：」（ダブルコロン）を、値の後ろには「；」（セミコロン）を付けるのがルールです。
クラス指定やID指定を行う
先程の記述の場合、セレクタにpタグを指定しているのでページ内もしくはサイト内すべてのpタグへスタイルが適用されます。
たとえばpタグでも場所によって異なる装飾を適用したい場合は、クラスやIDをセレクタとして指定します。
<style>
p{
font-size:20px;
color:red;
}
.test{
color:green;
}
#sample{
color:blue;
}
</style>
<p>CSSの書き方
<p class="test">クラス指定の方法
<p id="sample">ID指定の方法
|
CSSの書き方 クラス指定の方法 ID指定の方法 |
|---|
上記の例では、pタグの文字サイズは全て20pxにしつつ、それぞれ異なる色を指定しています。 クラスやIDのセレクタに対しても文字サイズを指定できますが反映される優先順位がありますので次項をご確認ください。
CSSが反映される優先順位は？
CSSは「クラスやIDで指定した方が優先される（さらにクラスよりもIDが優先）」、「後に記述したものが優先される（上書きされる）」というルールがあります。
記述したCSSが反映されない場合はその要素に対して別の場所でCSSを指定している場合が多いので確認してみてください。
なお「!important」を値の後に付けると、その値が最優先になります。
<style>
#sample{
color:blue;
}
.test{
color:green;
}
p{
color:red;
}
</style>
<p class="test" id="sample">CSSの優先順位</p>
|
CSSの優先順位 |
|---|
上記の場合、後に記述してある「p」へ指定した値（red）よりもIDである「#sample」へ指定した値（blue）が優先されています。
CSSを読み込む方法
HTMLに対してCSSを反映させるには、「HTMLタグに直接記述する方法」、「HTMLファイル内にstyleタグを用いて記述する方法」、 「CSSファイルを用意し読み込む方法」があります。
htmlタグ内に直接書き込む
HTMLタグの中にstyle=""という形でプロパティと値を指定する方法です。
記述したタグひとつに対してだけ反映されるのでピンポイントで指定したい場合には便利です。
<p style="font-size:24px;">CSSを読み込む方法</p>
|
|---|
CSSをHTMLに埋め込む
HTML内に埋め込む場合は、<style></style>というstyleタグを記述することで、その中にCSSを書くことが出来ます。
styleタグ内はCSSとして認識されるのでサイトにコードが表示されることはありません。
なお当サイトのコード解説箇所では、わかりやすいようにHTML内に記述する形式で表記しています。
<!DOCTYPE>
<html>
<head>
-省略-
</head>
<body>
<style>
.sample{
font-size:24px;
}
</style>
<p class="sample">CSSを読み込む方法</p>
</body>
|
|---|
別ファイルを作成して読み込む
CSSを記述したファイルを「.css」という拡張子で保存し各ページに読み込ませる方法が主流です。 メインとなるCSSファイルは「style.css」という名前で読み込ませるのが一般的となっており、その他印刷時の指定をまとめた「print.css」など必要に応じて作成しサイトに読み込ませます。
ファイルをサーバーにアップロードし、そのパスを指定し読み込ませます。
CSSファイルはCSS専用ファイルなので、ファイル内にCSSを書く際はstyleタグは不要です。
<!DOCTYPE>
<html>
<head>
-省略-
<link rel="stylesheet" href="ファイルのあるディレクトリまでのパス/style.css">
-省略-
</head>
<body>
<p>CSSを読み込む方法</p>
</body>
|
「style.cssファイル内の例」
|
|---|
<link rel="stylesheet" href="ファイルのあるディレクトリまでのパス/style.css">の部分でCSSファイルを読み込ませています。 /style.cssの前の部分はサーバーのどこにアップロードしたのかによってそれぞれ異なります。例えばsampleというフォルダの中のcssというフォルダ内にアップしたのであれば href="sample/css/style.css"となります。
よく使うプロパティ一覧
| font-size | 文字の大きさを指定するためのプロパティです。詳しくはこちら |
|---|---|
| font-family | 文字のフォントを指定するためのプロパティです。詳しくはこちら |
| color | 文字の色を指定するためのプロパティです。詳しくはこちら |
| border | 要素に枠線を表示するプロパティです。詳しくはこちら |
| background | 要素の色（背景色）を表示するためのプロパティです。詳しくはこちら |
| width | 要素の横幅を指定するためのプロパティです。 |
| height | 要素の高さを指定するためのプロパティです。 |
| padding | 要素の内側の余白を指定するためのプロパティです。詳しくはこちら |
| margin | 要素の外側の余白を指定するためのプロパティです。詳しくはこちら |
まとめ
HTMLとCSSを理解できればWEBサイトを制作することが可能です。プロパティやそれに対する値の指定方法など覚えることは多いですが、作りたいデザインを実現するために 必要なものを調べて書いて確かめるといった作業を繰り返していくうちに自然と見につくを思いますので根気よく学習することをおすすめします。
