ドットインストールでCSS3を学ぼう#07〜#09
どきどきわくわくプログラミング学習！
ドットインストールさんの「CSS3」#07~#09を学習します。
#07 nth-of-typeなどを使ってみよう
#06で学んだ擬似クラスの続きです。
nth-childなどは、要素のうちの何番目なのかを指定することができましたが
そのときの子要素はすべて隣接していなければならなかったのでした。
今回は、隣接していなくても指定する方法を学習します。
今回用意されたhtmlはこんなかんじ。
<section>
<h1>Title</h1>
<p>Hello 1</p>
<p>Hello 2</p>
<h2>Ttle</h2>
<p>Hello 3</p>
<p>Hello 4</p>
<p>Hello 5</p>
</section>
pの間にタイトルが挟まっている感じですよね。
こうなると、nth-childで一気に指定することはできません。
そのような時に使うものは以下のとおり。
first-of-type
cssで
:p first-of-type
{
background: violet;
}
としていたとしましょう。
first-of-typeで指定すると、
「すべてのp要素のうち、最初に出てくるもの」ということになるので
最初のp要素「Hello 1」だけが
背景紫になっているはずです。ブラウザで確認してみましょう。
OK！ばっちりですね。
last-of-type
同じように、このように指定してみましょう。
:p last-of-type
{
background: violet;
}
全てのp要素のうち、最後のものを指定するということなので
最後のp要素、「Hello 5」の背景色が紫になっているはずです。
はい！ばっちりです！
nth-of-type
nth-childと同じように、何番目なのかを指定することもできます。
次のように記述してみましょう。
:p nth-of-type(3)
{
background: violet;
}
すべての要素のうち、最初から数えて３番目の背景色が紫になります。
今回の場合は「Hello 3」の背景色が紫になっているはずです。
うん、なっていますね！
nth-last-of-type
:p nth-last-of-type(4)
{
background: violet;
}
これも、last-childと同じで
「すべてのp要素のうち、最後から数えて4番目」ということです。
p要素を最後から数えて4番目のものは「Hello 2」なので
背景色が紫になっていればOKです。
OKですね！
ただ、疑問が。これ、どこで使うんだろう（白目）
あとからp要素が増えたらえらいこっちゃになる気がします。
私だけ？
only-of-type
これは、その要素が一つだけのときに使います。
次のように指定してみましょう。
h2: only-of-type
{
background: violet;
}
ひとつしかない、「h2」につけてみます。
h2にあたる、2個目の「Title」の背景が紫になるはずです。
なりました！
なるほど、このような指定方法もあるのですね。
普通にh2に指定するのとどう違うんだろう？
h2がたくさんある場合と、一つしかない場合では色々と違うのかな？
疑問点を残しつつも、また例のごとく「進んだらわかるだろう」とゆるーく受け止めて次に進みます。
#08 もっと擬似クラスを見てみよう
ほかの擬似クラスも見てみましょう。
not
最初に、否定の擬似クラス「not」です。
用意されているhtmlはこんな感じ。
<ul>
<li>Hello 1</li>
<li class="target">Hello 2</li>
<li>Hello 3</li>
<li>Hello 4</li>
<li>Hello 5</li>
<li></li>
</ul>
Hello2だけが、ターゲットクラスになっています。
ここでは、「ターゲットがついている以外のもの」を指定してみましょう。
cssにこのように記述します。
li:not(.target)
{
background: violet;
}
「ターゲットがついているもの以外」の背景色を紫にします。
ブラウザを見ると、このようになっています。
「Hello 2」以外が紫になっていますね。
あれ？さっき（#07）の紫と色が違うよね？ずいぶんピンク寄りだよね？どうしてなんだろう？？
まあ…いいか。（いいのか？）
empty
次は、要素の中身が空のものを指定する「empty」です。
li:empty
{
background: violet;
}
要素の中身が空のもの
<li></li>
のところだけ、背景色が紫になっています。
要素の中身がないものだけ、背景色が紫になっています。
enabled,disabled
これらは、フォーム部品でよく使います。
enabledが有効になっている状態、
disabledが無効になっている状態を選択するためのものです。
htmlでinputテキストが用意されていました。
<form>
<p>Email:<input
type="text"
name="email"</p>
</form>
これに対して、cssを次のように記述します。
input [type="text"] : enabled
{
background: violet;
}
htmlに、disabledなどの記述がないので、enabledということになります。
なので、インプットフォームの中が紫になっているはずです。
なっています。OK！
ではdisabledはどうするかというと、htmlを少し変えてみましょう。
<form>
<p>Email:<input
type="text"
name="email"disabled</p>
</form>
disabledを書き足します。
このままだと、背景に色はつきません。
真っ白ですね＾皿＾
disabledのときに背景色を変えたい場合には、cssに次のように記述します。
input [type="text"] : disabled
{
background: violet;
}
すると、背景が紫になります。
checked
これは、チェックボックスに何かをされているときに指定をするというものです。
htmlにはこのようなチェックボックスが用意されていました。
<form>
<p><input type="checkbox"
name="check" value="1"
id="check"><label
for="check">check?</label></p>
</form>
ええと…。
最近htmlの復習もしているのに、ぱっと見でどんな感じかわからない私がここにおりますが
気にせず（気にしろ）進めましょう。
これにチェックされているときに色がつくようにしましょう。
cssに次のように記述します。
input [type="checkbox"] : checked
{
background: violet;
}
ただ…、チェックボックスの背景色が変わっても見づらいですよね。
なので、チェックボックスの隣にあるラベル（<label>）の背景色を変えてみましょう。
どうするかというと、
隣接するセレクタを指定すればいいので
input [type="checkbox"] : checked + label
{
background: violet;
}
+で繋ぐのでしたね。
これは、「css入門編#04」で学習しました。復習復習。
こうすると、チェックボックスのとなりの背景色が紫になっているはずです。
ブラウザを見てみましょう。
チェックボックスにチェックをすると、隣のラベル「Check?」の背景色が紫になりました。
たくさんの擬似クラスがあって覚えるのはとても大変ですが、役に立ちそうですね。
#09 border-radiusを使ってみよう
次は、角丸をつける方法です。
画像や領域の角がまるくなっているものです。
これはすぐに役立ちそう。楽しみですね！
今回htmlに用意されたのは空っぽのdiv。
<div></div>
とてもすがすがしいdivだけっぷりです。
これを、cssでこのようにしています。
div{
width: 200px;
heigtht: 200px;
background: skyblue
}
幅が200px、高さが200px、背景色がスカイブルーの四角になっています。
こんな感じの四角ですね。これの角を丸くしていきましょう。
それには、border-radiusを使います。
div{
width: 200px;
heigtht: 200px;
background: skyblue
border-radius: 30px;
}
このようにすると、
半径30pxの円で、角が丸くなるのです。楽しいね！
ちなみに楕円にするときには、水平方向と垂直方向の間を/で区切ります。
div{
width: 200px;
heigtht: 200px;
background: skyblue
border-radius: 30px / 15px;
}
こうすると、水平方向は半径30px、垂直方向には10pxの楕円になります。
おもしろい！
どの角を丸めるのかを指定することもできます。たとえば右下の角を丸めたいときには
div{
width: 200px;
heigtht: 200px;
background: skyblue
border-bottom-right-radius: 30px ;
}
このように書くと、
右下だけが丸まります。
もう一つの方法としては、padding やmargin のように、数値を複数指定することで角丸にすることもできます。
div{
width: 200px;
heigtht: 200px;
background: skyblue
border-radius: 30px;
}
このように、数値が一つだと全ての角が丸になります。
2つ数値を入れた場合
border-radius: 10px 30px;
などとした場合には、1つ目の数値が左上と右下、
2つ目の数値が右上と左下になります。
3つ数値を入れた場合
border-radius: 10px 20px 30px;
1つ目が左上
2つ目が右上と左下
3つ目が右下
という順番になります。
4つ数値を入れた場合
border-radius: 10px 20px 30px;
これは、時計回りに
左上、右上、右下、左下という順番になります。
例を見てみましょう。
border-radius: 10px 20px 30px;
この場合には、
左上が10px、右上と左下が20px、右下が30pxの円になっています。
また、丸める単位もpxだけでなくemや%で表すこともできます。
例えば、次のようにしてみましょう。
border-radius: 50%;
50%にするとどうなるかというと、
正円になります！
50%は半径ということになりますものね。
ちなみに、背景に画像を入れると、
backgroud: skyblue url('sheep.jpg') ;
border-radius: 50%;
(今回も羊の画像が用意されていました)
このようになりました！
こ、これはアイコン！
よく見る、丸いアイコンのようになっていますね。
このように作られていたのかな、と思うと感慨深いですね。
内容がだんだんむずかしくなってきましたが、がんばりたいと思います。
