押さえておきたいWeb知識 
目次
CSS3
CSS3はCSSの新しい仕様(2020年5月現在)のことです。
CSS3は従来のCSSとは異なり、角の丸い枠線を引けたり、要素をぼかしたり、影をつけたり、様々なことができるようになりました。
解説
CSS3から影をつけたり、透明度を指定したり、角丸の枠線を簡単に表示することができるようになりました。
他にもCSS3から以下の機能が追加されました。
| 機能 | 詳細 |
|---|---|
| Marquee | 要素が左右に移動しながら表示させることができる |
| Multi-column Layout | テーブルを使用せずに段組みできる |
| Ruby | 文字にルビを振ることができる |
| Animations Module | アニメーション機能をつけることができる |
| Web Fonts | フォントを利用してテキストを表示させることができる |
追加された機能の中でもWeb FontsのおかげでWebページのデザイン性が圧倒的によくなりました。
CSS3ができるまでWebページはユーザーのコンピューターにインストールされているフォントでしか表現することができませんでした。
そのため、多くのWebサイトは味気のないデザインになることが多かったです。
Web Fontsが利用できるようになったことで、様々なフォントを使用することができるようになりました。
ただし、フォントファイルは容量が大きいので日本語のように文字数が多い言語ではサーバーの負荷がかかるので注意が必要です。
また、CSS3からセレクタも大幅に拡張されました。
今回追加された疑似クラスを使用することで要素毎にclass属性指定をしなくても複雑なデザインを表現できるようになりました。
今回追加された疑似クラスは以下の通りです。
| 機能 | 詳細 |
|---|---|
| :root | ルート要素 |
| :nth-child(n) | 指定した要素のn番目の子要素 |
| :nth-lastchild(n) | 指定した要素の後ろからn番目の子要素 |
| :first-child | 指定した要素の最初の子要素 |
| :last-child | 指定した要素の最後の子要素 |
| :empty | 空要素 |
| :not(.foo) | class属性にfooが指定されていない要素 |
| :disable | 無効になっている要素 |
| :checked | チェックされている要素 |
CSSをもっと学習したい方へ
最後まで読んで頂きまして、ありがとうございました。
CSSをもっと知りたいという方はいないでしょうか。
そこでWeb全般の基礎的な知識を習得するのに「よくわかるHTML5+CSS3の教科書【第3版】 教科書シリーズ」という本がオススメです。
初学者がいきなりCSSに関する専門書を読み始めると挫折することが多いです。
そこで途中で挫折せずに最後まで読み切れて、CSSの全体像を把握するのに便利な一冊になっています。
この本で全体像を理解してから専門書を読むと取り組みやすいかと思います。
もし、CSSに関する入門的な知識を幅広く知りたいと思った方はこちらの本を是非読んでいただければと思います。
