ドットインストールでCSSを学ぼう#07〜#09
前回までの学習で、「セレクタ」についておぼろげながら理解しつつある（曖昧な言い方）ぽんきちさんです、こんにちは。
今日もドットインストールさんで元気にCSS の学習です。
#07 擬似要素を使ってみよう
「擬似要素」というと、前回学んだ「擬似クラス」が思い浮かびますが違うもので、
- 擬似クラス：ある状態の要素を指定する時
- 擬似要素：ある要素の一部を指定する時
という違いがあります。
今回は、このようなpタグが用意されていました。
「ひい！」
こんにちは地獄ですね（笑）
この１行目だけに、スタイルを当てたいというときに使う擬似要素を学習します。
１行目だけにスタイルを指定する
先ほどの長ーい「こんにちは」地獄の１行目だけにスタイルを当てたいときには、
CSSに
p:first-line {color: skyblue; }
と記述します。
「１行目」ということですね。
ブラウザで見ると、このようになっています。
本当だ！改行なしのこんにちは地獄の１行目だけがスカイブルーになっています＾＾
最初の１文字目だけにスタイルを指定する
最初の１文字目だけにスタイルを指定する場合には、次のように記述します。
p:first-letter{ color: skyblue; }
「１文字目」となっていますね。
ブラウザで見るとこのようになっています。
おお！１文字目だけがスカイブルーになっていますね＾＾
ある要素の直前、直後を指定する
たとえば、p要素の直前に何かを指定したい時には次のように指定します。
p:before { ... }
このように:beforeや:afterというように記述します。
:beforeや:afterは、どちらもcontentプロパティが必要です。
contentの中に、必要な要素を入れます。
p:before{
content: "-->";
}
p:after{
content:"<--";
}
これをブラウザで見るとこのようになっています。
p要素の前に「-->」p要素のあとに「--<」となっていますね。
「擬似クラス」よりも、「擬似要素」のほうが、見た目にも感覚的にもわかりやすかったように思います。
しっかり覚えようと思います＾＾
#08 セレクタの詳細度を理解しよう
詳細度のちがい
詳細度とは、
複数のセレクタがあった時に、どのセレクタが優先されるのかを決めるルールです。
上に行くほど、優先度の高いものになります。
(a) style=""
(b) id
(c) 属性／擬似クラス
(d) 要素／擬似要素
例を見てみましょう。
a{ color: skyblue; }
この記述を見てみます。
style属性ではないので、最初の数値は０。
idも入っていないので、次の数値も０。
属性もないので、次の数値も０。
要素はあるので、次の数値は１になります。
これよりも詳細度の高いセレクタを書いて、そちらが優先されるかどうか見てみます。
htmlの記述は次のようになっています。
aに、クラスがついています。
cssにこのクラスをつけると、そのほうが数値が高くなります。
a.link{ color: pink; }
(classのときには"."がつくのでしたね)
すると、
style属性ではないので、最初の数値は０。
idも入っていないので、次の数値も０。
クラスがついたので、次の数値は１。
要素もあるので、次の数値も１。
最初のほうは「aはスカイブルー」と指定されています、
２番目のほうは「aのlinkはピンク」と指定されています。
２番目のほうが詳細度が高いので、「Dotinstall」の文字はピンクで表示されるはずです。
なるほど！
ちなみに、aのみの時の詳細度は
0,0,0,1
a.linkのときの詳細度は
0,0,1,1
と教えてくださいました。数値で書かれるとわかりやすいですね。
同じ詳細度だと、後から書いたほうが優先される
このように並べて書かれていたとします。
a{ color: skyblue; }
a.link{ color: pink; }
a.search{ color: orange; }
a.linkとa.searchは同じ詳細度ですが、a.searchのほうが後に書かれているので、優先されます。
文字の色はオレンジになっているはずです。
ほんとだ！上書きされるんですね。なるほど。
属性よりもidのほうが詳細度が高いので、
先ほどのあとにこのように書き入れたとします。
a{ color: skyblue; }
a.link{ color: pink; }
a.search{ color: orange; }
a#site{color: blue; }
(#はidにつくのでしたね)
id のほうが詳細度が高いので、数値で書くとこうなります。
0,1,0,1
(idと要素がある、ということになりますね)
idのほうが詳細度が高いので、色も青になるはずです。
ほんとだ！なっていますね！
そして、style属性が一番詳細度が高いので、htmlの方にこのように書いたとしたら、
style="color:green;"
一番詳細度が高いのが緑ということになるので、緑に表示されます。
へええ！
（「green」と書いたら割とお茶っぽい色になるんだなあと変なところで感心）
最優先にする方法（乱発してはいけない）
あまり乱発してはいけないそうなのですが、!importantという方法もあります。
cssに次のように書き入れます。
a{color: skyblue !important; }
(赤が付け足したところです。)
aだけで、詳細度は「0,0,0,1」ともっとも低かった要素ですが
これで最優先され、文字はスカイブルーになるはずです。
なるほど！
確かに、乱発したらすごく意味がわからないことになりそうですね＾＾；
詳細度を理解していると、うまくいかないときに対応できるようになりそうです。
#09 プロパティの値を指定しよう
よく指定するのが、「長さ」「色」だということです。
長さ
使われるのは、以下のもの。
「px」「em」「%」
pxはピクセル。
「ピクセルさん！」
「まるで、全然知らない人ばかりの集団に入った時に
偶然知人に出会った時のような喜び」
なんだか嬉しい（笑）
ブログのフォントサイズを変えたりしたときに実験しながら学んだ部分です。
h1の文字のサイズを16pxにするときには、以下のように記述します。
h1{font-size: 16px; }
対して、emと％は相対的な指定です。
「em」は、親要素となっているフォントサイズの何倍かを指定します。
たとえば、
body{font-size: 16px;}
h1{font-size: 2em;}
としたとき。
bodyのフォントサイズ16pxで、h1はその2倍（32px）の大きさになるということです。
へえ！便利！
body{font-size: 16px;}
h1{font-size: 2em;}
h2{font-size: 150%;}
これだと、h2のフォントサイズはbodyのフォントサイズの150%（24px）になるということです。
視覚的にイメージしやすく、わかりやすい部分ですね。
色
今まで行ってきたように、色の名前で指定することができます。
「ああ、スカイブルーとかブルーとかピンクとか紫とか色の名前で指定してきましたよね」
「緑はお茶みたいな色でしたね＾皿＾」
また、色の名前のほかに
RGB法（Red,Green,Blue）を16進法や数値で記述して行く方法もあります。
「ブログの色を変える」記事などで、webカラーのパージさんやらHUEさんやらにお世話になりました。
進数の場合は0からf、もしくは00からffで指定することができます。
数値の場合は0から255、0%から100%であらわすこともできるそうです。
「？？」
具体例を見ていきましょう＾＾；
たとえば、h1の文字色を青にしたかったとします。
色の名前で指定する場合はこのように記述しました。
h1{ color: bule; }
これをRGB方で記述するとこうなります。
h1{color: #00f;}
#（パウンド記号）のあとに、R（赤）は０、G（緑）も０、B（青）はいっぱいのfということで記述するのです。
「ああ、見たことある感じになってきた（ほっとする）」
それぞれを２桁ずつであらわすと、
h1{color: #0000ff;}
となります。今までの記事で使ってきたのはこの６桁のものですね！
また、RGB法を数値で書く時にはこのようになります。
h1{color: rgb(0,0,255);}
赤と緑がゼロ、青は最大の255ということですね。
もちろんパーセントでは、
h1{color: rgb(0%,0%,100%);}
となります。こちらもわかりやすいですね。
色は、今まで知らずに使っていたのですが
やっと色コードの意味がわかりました。
これは楽しい！
ますます学習がうれしくなりそうです（＾＾）
