2021/2/18 「HTML&CSS辞典」をオープンしました! 是非、ご覧になってください!

[Web用語] CSS3とは? 分かりやすく解説します!

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に関する入門的な知識を幅広く知りたいと思った方はこちらの本を是非読んでいただければと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です