HTMLはウェブサイトの「骨組み」を作り、CSSは「装飾」を担当する。
その概念そのものは、把握できたでしょうか。
ここで、よく質問を受ける項目が2つあります。
1つめが、HTMLにCSSファイルを読み込む方法。
前前回、記述したソースコードの中に、こっそり書いてあったことにお気づきでしょうか。
深くはご説明していなかったので、改めて説明させて頂きます。
2つめが、classとidの使い方についてです。
CSSでサイトを装飾する時、必要になるのがclassです。
前回もやりましたが、classでcssのプロパティと紐づけて装飾をします。
しかし、class以外にも「id」という紐づけ方があるのです。
今回は、まずHTMLにCSSファイルを読み込む方法を、ご説明していきます。
次にclassとidの基本的な使い方について、お伝えしていきます。
cssはhtmlに読み込んで使いましょう
基本的にcssとhtmlは別のファイルとして存在します。
ですのでhtmlから、cssを読み込む必要があります。
cssがhtmlに読み込まれて、初めてcssは装飾として機能します。
では、どのようにしてhtmlからcssを読み込めば良いのでしょうか。
下記のソースコードをみてください。
<!--index.htmlに書かれています-->
<link href="css/common.css" rel="stylesheet" type="text/css">
これが、cssを読み込むソースコードです。
<head>内に書いて、使用します。
ここで、変更するべき箇所は1箇所しかありません。
<!--index.htmlに書かれています-->
href="css/common.css"
hrefのダブルクオーテーション(“)で囲まれた中身「css/common.css」の部分です。
これを「パス」と呼び、ファイルの位置を示しています。
なお、cssだけではなく他のファイル形式もパスを使って読み込みます。
画像やjs ( JavaScript ) ファイルなど、外部ファイルを読み込む際は、いつでもパスを使います。
今回のパスは「index.htmlと同じ階層にあるcssフォルダの中の、common.cssを読み込む」という意味になります。
スラッシュ ( / ) で区切ったところがフォルダを意味します。
「css/」でcssフォルダの中、ということです。
逆に「../」がつくと、階層を1つ上がる、という意味になります。
<!--index.htmlに書かれています-->
href="../css/common.css"
上記であれば「index.htmlから1つ上のフォルダの中にあるcssの中のcommon.css」になります。
このように、htmlからパスでcssを読み込んで、初めてcssを使えるようになります。
もしcssが読み込まれていなければ、cssを使うことはできません。
cssが効かない場合、まずcssが読み込まれているか確認しましょう。
cssの基本的な書き方と考え方
ではcssで、どうやってhtmlを装飾するのでしょうか。
まず、classのおさらいから、進めていきましょう。
前回で理解された方も、改めておさらいしてみてください。
基本的にhtmlは<p>や<h1>のようなタグで作られています。
しかし、それ単体だと何の装飾もできません。
例えば、下記のようなhtmlがあったとします。
<!--index.htmlに書かれています-->
<h1>タイトル</h1>
しかし、これだけだと、何の装飾もされません。
そこでまず、装飾だけを別途、cssで用意します。
下記のcssを見てください。
<!--common.cssに書かれています-->
.red{
color:#ff0000;
}
これは、文字の色を赤に変える、という意味のcssです。
では、上記を使って、文字を赤くするにはどうするべきでしょう。
<!--index.htmlに書かれています-->
<h1 class="red">タイトル</h1>
このようにclass=”red”という形で互いを紐づけて使います。
すると、タイトル、という文字列が赤くなります。
ちなみに今回はredというclassの名前をつけましたが、なんでも構いません。
英数字であれば、なんでもclassの名前としてつけられます。
ここで少し、補足です。
もう一度、下記のソースコードを見てください。
<!--common.cssに書かれています-->
.red{
color:#ff0000;
}
redの前に ( . ) があるのが、わかるでしょうか？
( . ) が何を意味するかと言えば、classを意味しています。
ただ、CSSの書き方はclassだけではありません。
実は、もう1つ、書き方があるのです。
<!--common.cssに書かれています-->;
#red{
color:#ff0000;
}
( # ) になったことに、お気づきでしょうか。
これはclassではなく、idと言います。
htmlに記述するときもidと記載します。
<!--index.htmlに書かれています-->
<h1 id="red">タイトル</h1>
さて、idとclassで何が違うのでしょうか？
違いは使うことのできる回数です。
idは「1ページに1度」しか使えません。
classは「1ページに何度でも」使えます。
つまりidは固定された1つであって、classは使い回せるのです。
その時のcssの用途によって、使い分けると、把握が楽になります。
また、idの方が読み込みが早いという噂もあります。
ただし、最近ではidはほとんど使わない方がいいとされます。
JavaScriptとの兼ね合いや、アンカーリンク等で必要なときだけ使います。
基本的にはidではなく、classを使うようにしてください。
これが、cssを使う時に覚えておくべき、基礎的な知識です。