CSSは「ホームページの見た目」を司る強力なスクリプトです。
はっきり言って、ホームページの見た目がいいかどうかは、デザインよりも「CSSが適切に整っているか」という点の方が大きいと言ってもいいでしょう。
多少、デザインが粗くても、CSSで適切にまとまった構造を作るだけで、整ったホームページに見えてしまうんですね。
そうしたCSSを極めようと思ったら、やることは膨大にあります。
でも、まずはSelector（セレクタ）を覚えることで、確実な一歩が踏み出せます。
セレクタの基本
CSSは、基本的に「どこに」「どんな見た目を適用するか」を指定します。
その「どこに」を指定するのが、セレクタです。
例えば、以下のHTMLがあります。
html
<h1>タイトル</h1>
<p>本文です。</p>
このh1に色を付けたい場合、CSSではこう書きます。
css
h1 {
color: red;
}
"h1"と書いてある部分を"セレクタ"と呼びます。
これで、ページ内のすべてのh1タグが赤色になります。
これは#4で学習しな内容ですが、今回はこのセレクタ部分を深掘りします。
class
html
<p class="text-red">赤い文字です。</p>
css
.text-red {
color: red;
}
classを指定する場合は、先頭に「.（ドット）」を付けます。
id
html
<p id="main-text">重要な文章</p>
css
#main-text {
font-size: 24px;
}
idは「#」を使います。
初心者の人向けコラム
初心者のうちは、
タグ → そのまま
class → .
id → #
これだけ覚えておけば十分です。
HTMLのDOMを意識したセレクタ
CSSは、HTMLの構造を見ながら指定できます。
この「HTMLの親子関係」をDOM（ドム）構造と言います。
例えば、こんなHTMLがあります。
html
<div class="box">
<p>文章1</p>
<p>文章2</p>
</div>
この.boxの中のpだけにCSSを適用したい場合は、こう書きます。
css
.box p {
color: blue;
}
これは、
「boxの中にあるpタグ」
という意味になります。
さらに、直下だけを指定する方法もあります。
css
.box > p {
color: green;
}
この>は、
「直下の子要素だけ」
という意味です。
例えばこういうHTMLの場合。
html
<div class="box">
<p>これは対象</p>
<div>
<p>これは対象外</p>
</div>
</div>
>を使うと、最初のpだけに適用されます。
CSSは「HTMLの構造を読む力」がかなり重要です。
慣れてくると、
「この要素の中の、このパーツだけ装飾したい」
という感覚が自然に身についてきます。
複雑なセレクタの読み方
他人（色々なWebサイト）のCSSを見ると、急に難しそうなセレクタが出てきます。
例えばこんな感じです。
css
.header .menu li a {
color: white;
}
初心者が見ると、
「呪文かな？」
と思いがちですが、落ち着いて左から読むだけです。
これは、
.header の中にある
.menu の中にある
li の中にある
a
という意味です。
HTMLで書くと、こんなイメージです。
html
<div class="header">
<ul class="menu">
<li>
<a href="#">リンク</a>
</li>
</ul>
</div>
つまりCSSは、
「HTMLの住所指定」
みたいなものだと考えましょう。
擬似クラス
さらに、擬似クラスという便利機能もあります。
css
a:hover {
color: red;
}
これは、
「マウスを乗せた時」
という意味です。
ボタンをホバーした時に色が変わるアニメーションなどは、これを利用しています。
スペースの注意点
CSSは、スペース1つで意味が変わることがあります。
例えばこの2つ。
css
.box p { ... }
.boxp { ... }
全然意味が違います。
.box p は、
「boxの中のpタグ」
です。
でも .boxp は、
「boxpというclass名」
になります。
さらに初心者がハマりやすいのがこちら。
css
.box.red { ... }
これは、
「boxクラスとredクラスの両方を持っている要素」
です。
HTMLで言うとこう。
html
<div class="box red"></div>
そして、一方で、
css
.box .red
これは、
「boxの中にあるredクラス」
になります。
スペースが入るだけで、意味が変わるんですね。
CSSは、見た目以上に「記号の意味」が大事です。
あとがき
CSSは最初、
覚えることが多い
何を書けばいいかわからない
なぜ効かないのかわからない
という状態になりがちです。
でも、セレクタを理解すると、一気に世界が変わります。
なぜなら、
「どこに適用されているのか」
が読めるようになるからです。
CSS初心者の壁は、プロパティの数ではなく、「セレクタの読み方」と言ってもいいくらいです。
逆に言えば、セレクタが理解できると、他人のCSSも読みやすくなります。
まずは、
タグ指定
class指定
id指定
子孫セレクタ
> の直下指定
このあたりを、実際に手を動かしながら試してみてください。
CSSは「暗記」より、「実験」の方が圧倒的に身につきます。
0 件のコメント:
コメントを投稿