ドットインストールでCSS3を学ぼう#01〜#03
今日から、ドットインストールさんでCSS3を学んでいこうと思います。
とっても楽しみ！
#01 CSS3とは何か？
ここから、動画の下の文字起こしサービスは有料になります。
ちゃんと耳をそばだてて（笑）聞いていきましょう！
概要
CSS3は、ホームページの見た目を規定するCSSのバージョン３です。
これをマスターすることで、きれいなサイトを作ることができるようになります。
必要な知識
CSS3を学ぶ前に、
ドットインストールさんで
を勉強しておくことがおすすめされています。
勉強の順序ですね。
学習の範囲
CSS3は、まだまだ議論中の仕様が多いので、今回はほぼ仕様が固まっていて、なおかつよく使われているものに絞って学習をしていきます。
仕様、実装状況
仕様や実装状況は、以前にもご紹介をしたW3CのCSS current statusやcan I use
で調べることができます。
英語なので私には大変そうですが、必要になったら調べたいと思います。
では、今後学習をすすめていくためにいつものひながたファイルを作りましょう。
<!DICTYPE html>
<htmi lang="ja">
<head>
<meta charset="utf-8">
<title>CSS3 Practice</title>
<link rel="stylesheet" href="default.css">
</head>
<body>
</body>
</html>
cssの画面も作って、両方を同時に見られるようにしておきます。
今後の学習が楽しみですね！
#02 remを使ってみよう
CSS3では、新しいプロパティがたくさん使えるようになっていますし。
プロパティの値の指定方法も新しいものがいくつか出ています。
今回は、remについて学習します。
文字の大きさの指定をしたいと思います。
今回、htmlにはこのような文書が用意されています。
bodyタグの中に、
<h1>Hello
<span>World</span>
</h1>
と用意されています。
今回はHelloとWorldの大きさを変えてみます。
CSS2.1の場合
CSS入門編で学んだCSS2.1の場合、文字の大きさの指定は
px、em、%などで行いました。
では、具体例を見ていきましょう。
h1とspanへの文字の大きさの指定はこのように行っていました。
html{
font-size: 32px;
}
h1{
font-size: 2em;
}
span{
font-size: 0.5em;
}
emは、親要素のフォントサイズを基準に計算するものです。
htmlのフォントサイズは32pxなので
h1のフォントサイズは2倍の64px。
spanの親要素はh1なので、64pxの0.5倍の32pxということになります。
これはとても便利なのですが、要素が入り組んでくると
どれが親要素なのか混乱してくるという欠点があります。
CSS3の場合
CSS2.1で使われていたemの拡張機能として、remが使えるようになりました。
これは、ルートに対するem。
つまり、常に最初に指定したhtmlの文字サイズを基準にして
ほかの文字サイズを指定することができるというものです。
html{
font-size: 32px;
}
h1{
font-size: 2rem;
}
span{
font-size: 0.5rem;
}
どちらも、基準はhtmlの32pxなので
h1の大きさは32pxの2倍の64px。
spanも、htmlの0.5倍なので32×0.5で16px
ということになります。
なるほど、これなら「親要素はどれだったっけ」などと混乱しなくてすみますね！
can I useの使い方
とても便利なremなのですが、どのブラウザで使えるか調べてみたいと思います。
can I useを開いてみましょう。
remが使えるかどうか検索してみます。
すると、対応するブラウザが表示されます。
緑が使えるもの。
赤が使えないものです。
IEの8だけはremが使えませんが、他のブラウザでは使えるということがわかります。
太い線のところが現在のバージョンです。
このように調べていくと安心ですね。
#03 rgba()、hsla()を使ってみよう
次は色の指定についてです。
rgbについては、css入門編の#09で学びました。
red、green、blueがそれぞれどのくらいの割合で入っているのかを数値で表す方法でしたね。
それに対し、rgbaは
red、green、blueに加えてalpha（透明度）が加わったものなのだそうです。
rgba
- Red
- Green
- Blue
- Alpha (0-1)
透明度については、0が一番透明、1が一番不透明な状態です。
hslaについては、次のような数値になります。
hsla
- Hue （色相）
- Satulation （彩度）
- Lightness （明るさ）
- Alpha （透明度）
です。
サチュレーション！血中酸素飽和度をはかるときの単位というイメージでしたが
鮮やかさ（つまり彩度）という意味だったのですね。
そしてHueについてはこの記事でも取り上げていますが
このような色相の輪のどこのあたりの色なのかを数値で表すものです。
色好きとしては、「色相」「彩度」「明度」「透明度」などという言葉が出てくると
テンションも上がるというものです。
では、具体例をあげて見てみましょう。
今回、htmlにはこのようにboxが4つ用意されています。
これに、それぞれ色をつけていきたいと思います。
まずはcssでdivの大きさの指定を。
div{
width: 100px;
height: 50px;
}
ボックスの大きさは、幅が100pxで高さが50pxになっています。
まずはrgb法で。
box1の色をこのように指定してみます。
#box1{
background: rgb( 255, 100, 100);
}
box2はrgba法にしてみましょう。
#box2{
background: rgba( 255, 100, 100, .2);
}
box2は透明度を0.2にしました。
0.2の0は省略できるので、.2と記述します。
さあ、ブラウザで色を見てみましょう！
上のbox1は、rgb(255, 100,100)の値の色です。
下のbox2は、透明度が0.2なのでとても透明度が高いですね。
なんて楽しいのでしょう！
さあ、次はhslaで。
このように指定します。
#box3{
background: hsla(210, 100%, 50%, .7);
}
box3は、
色相が210度のあたり（青になるそうです）
彩度は100%(鮮やかということですね)
明度は50%(半分の明るさ)
透明度は0.7（やや不透明な感じ）
です。
ブラウザで見ると、
うん、綺麗な青ですね。
この色をちょっと暗くしたいな…などというときにhslaは実力を発揮します。
box4は次のように指定してみましょう。
#box4{
background: hsla(210, 100%, 40%, .7);
}
明度（明るさ）を、先ほどの50%から40%に下げてみました。
するとbox4は…
おおお！box3よりも少しくらい色になりました！
このように、少しだけ色を変えたいときなどにhslaは大活躍なのです。
今回は色好きとしてはテンションの上がる内容でした。
そして今回の疑問。
210度で青になるってことは…
赤のあたりから、時計回りに角度を計算するってことなのかな？
ざっくりと「〇〇度なら、だいたい赤」とか「〇〇度なら、だいたい黄色」とか
覚えておかないといけないということですよね。
大変だ。
でもrgb法で「だいたいこの色」を覚えるよりは簡単そうな気もします。割合じゃなくて角度ですし。
うーん、おもしろい！
続きも楽しみです。
