ドットインストールでCSS3を学ぼう#04〜#06
ドットインストールさんでCSS3を学んでいます。今回は第２回目。
#04~#06までの範囲を学習したいと思います。
#04 opacity()で透明度を操作しよう
前回、#03でrgba、hslaなどで色の操作をする方法を学びました。
aで透明度を操作することができましたね。
今回は、
要素全体を透明にしたいときに使うopacityプロパティについて学びます。
今回はbodyに画像が用意されています。
<body>
<img src="sheep.jpg">
</body>
羊さんかな？
そして、cssはこのようになっています。
body{background: skyblue; }
img{
border: 7px solid blue;
}
まず、body全体の背景色はスカイブルーになっています。
そして、画像の周りに線が引いてあります。
太さ7pxの実線、色は青ですね。
ブラウザで見るとこのようになっています。
羊だった！本当に羊だった！（謎の喜び）
背景がスカイブルーで、羊の画像の周囲には青の太めの実線。
今回は、opacityプロパティを使って
画像全体（画像と線）の透明度を上げてみましょう。
cssにこのように記述します。
img{
border: 7px solid blue
opadity: 0.3;
}
赤字が今回書き加えた分です。
#03で学んだhsla法の透明度と同じように、
0が一番透明で、1が一番不透明な状態になります。
今回の透明度は0.3。けっこう透明なのではないでしょうか。
さあ、ブラウザで見てみましょう。
わあーー！
画像と線が少し透明になって、
背景のスカイブルーが見えるようになっている形です。
そうか、画像が透明になったら
背景の色が目立つようになるよね…！
文字や線だけを透明にするのであれば、rgba法やhsla法がいいのですが、
要素全体の透明度を操作するのにはopacityがとても便利ということですね。
#05 属性セレクタを使ってみよう
css2.1の場合
css2.1でも、属性セレクタについて勉強しました。
この中の、#05にあたる部分で属性セレクタについて学習しています。
そのときには、このような指定方法を学びました。
1. aタグのうち、title属性のあるものだけスカイブルーになるように指定する場合はcssをこのように記述しました。
a [title] { color: skyblue; }
2. aタグのhref属性がgoogleの場合だけ、オレンジになるように指定する場合には次のように記述しました。
a[href="http://google.com"] { color: orange; }
3. class属性にsearchが含まれる場合だけ紫になるように指定する場合には次のように記述しました。
a[class~="search" ]{ color: violet; }
aとhref属性に言い換えると
- a[href] （aタグのうち、href属性のあるものだけ）
- a[href="foo"] （aタグのhref 属性がfooのものだけ）
- a[href~="foo"] （aタグのhref属性の値がいくつかあるうち、fooが含まれるものだけ）
ということになりますね。
css3の場合
CSS3では、さらに属性セレクタが拡張されています。
- a[href^="foo"] （aタグのhref属性がfooで始まるもの）
- a[href$="foo"] （aタグのhref属性がfooで終わるもの）
- a[href*="foo"] （aタグのhref属性がfooを含むもの）
具体例を見ていきましょう。
今回用意されているhtmlはこんな感じ。
リンクが４つ設定されています。
<p>
<a href="http://google.com">Google</a>
</p>
<p>
<a href="http://yahoo.co.jp">Yahoo!</a>
</p>
<p>
<a href="http://dotinstall.com">Dotinstall</a>
</p>
<p>
<a href="mypage.html">My page</a>
</p>
これらの文字色を指定しましょう。
aタグのhref属性がhttpから始まる場合
cssにこのように記述します。
a[href^="http"]{color: orange; }
href属性がhttpから始まるものは、グーグル・ヤフー・ドットインストールの3つです。
この3つの文字がオレンジになっていれば成功です。
OK！ばっちりですね。
aタグのhref属性がcomで終わる場合
cssにこのように記述します。
a[href$="com"]{color: orange; }
href属性がcomで終わっているものはグーグルとドットインストールなので、
その2つの文字がオレンジになっていれば成功です。
OK！なるほど。
aタグのhref属性にco.jpを含む場合
この場合にはこのように記述します。
a[href*="co.jp"]{color: orange; }
href属性の値にco.jpがあるのはヤフーだけですよね。
なので、ヤフーだけオレンジ色になって入れば成功です。
できました！
css2.1のときにも「属性セレクタって難しいなあ、覚えられるかなあ」と思っていましたが
css3で増えたことにより、ますます不安になりました（笑）
ゆっくり覚えていきたいと思います。
#06 nth childなどを使ってみよう
#06では、擬似クラスについて学習します。
CSS2.1でも、擬似クラスを勉強しました。
ちょっとしたシンパシー。
ではさっそく具体例を交えながら学習しましょう。
今回用意されているhtmlは、リストになっています。
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
</body>
箇条書きで１番から５番までが書かれている感じですね。
CSS2.1では「:first-shild」を使いました
これに関しては、こちらの記事の#06をご覧ください。
リストの一番上だけスカイブルーにしたいときにはこのように記述したのでした。
ul li:first-child{ color: skyblue; }
CSS2.1では、一番上のものしか指定できなかったのですが
CSS3では、もっと多くの項目に指定することができるようになりました！
:last-child
これは、リストの最後の項目だけ指定するという意味です。
cssにこのように記述してみましょう。
li:last-child{
background: vioret;
}
このように指定すると、リストの最後だけ背景が紫になっているはずです。
ブラウザで確認するとこうなっています。
最後の項目だけ紫になっていますね。OK！
:nth-child
読み方は、「えぬすちゃいるど」です。
これを指定すると、何番めの項目を指定するのか数字で指定することができます。
li:nth-child(3){
background: vioret;
}
このように指定すると、
「上から３番めの項目の背景を紫色にしますよ」ということになります。
ブラウザで見てみましょう。
おもしろいし便利ですね！
ちなみに、:nth-childは奇数、偶数を指定することもできます。
このように書いてみましょう。
li:nth-child(odd){
background: vioret;
}
ブラウザで確認するとこうなっています。
おもしろい！奇数行だけ紫になっていますね。
同じように、偶数を指定する時にはこうなります。
li:nth-child(even){
background: vioret;
}
ブラウザでみると、偶数行だけが紫になっています。
読みやすくなって、すごく便利そうですね。
ちなみに、私のように英語が苦手な人はこのように覚えるといいそうです。
奇数は３文字（奇数）のodd
偶数は４文字（偶数）のeven
あらやだ奥さん！
なんだかわたくしにも覚えられましてよ！！
（忘れるまでは）
:nth-dhildは、さらに自然数を入れることもできるそうです。
li:nth-child(3n+1){
background: vioret;
}
なんかいきなり数学チックになりましたが（笑）
nには自然数が入るので、入る数字が0だった値は1、1が入ったら値は4になりますよね。
なので、ブラウザを見ると1行目と4行目が指定されているのがわかります。
おもしろい！
今の所、どこで使うのか全く予想もつきませんがおもしろいです。
:nth-last-child
:nth-childは、最初から何番目なのかを指定するものですが、
:nth-last-childは「最後から何番目なのか」を指定するものです。
このように書いてみましょう。
li:nth-last-child(4){
background: vioret;
}
「後ろから4番目」という意味になるので、
ブラウザで見るとこうなっています。
た、たしかに後ろから数えたら4番目。
なんだかギャグみたいに感じますが、きっと大事な機能なんだろうなあ…。
覚えられるかなあ…（白目）
:only-child
最後はこれです。
これは、子要素が一つだけのものに適用されるものです。
先ほどのhtmlに、これを加えてみましょう。
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
<ul>
<li>Only Me!</li>
</ul>
</body>
赤字のところが、今回足したところです。
上のリストと違って、子要素が一つだけなのがわかります。
CSSにこのように記述をすると、
li:only-child{
background: vioret;
}
子要素が一つだけのものの背景色が紫になるはずです。
ブラウザを見てみましょう。
子要素が一つしかないリストの「オンリーミー！」だけが紫になっていますね。
便利な擬似クラスがたくさん増えて楽しいなあと思ったのでした。
（使いこなせるかどうかはまた別の話）
また、楽しんでいきたいと思います。
