CSSとは？おさらいです

ウェブページのスタイルを指定するための言語です。
構造は下記の通りです。

例）セレクタ{プロパティ:値;}
p{
color:red;
}

p要素のテキストの色は赤、という意味になります。

CSS3はCSS2と何が違うのか

基本はCSS2と同じです。
従来のCSSと互換性があります。
これまでのCSS便利な仕様が追加されています。

CSS3に対応していないブラウザ

CSS3部分の記述が無視されるだけで、それ以外は正しく表示されます。
ではどんな仕様が追加されたのでしょうか。
見ていきましょう。
今回はよく使いそうなセレクタやプロパティを例一つずつあげてみます。

CSS3で追加されたセレクタ

前から数えて、n番目の子となる要素にスタイルを適用するセレクタです。

例）要素:nth-child(n)
li:nth-child(3) {
color:red;
}

リストの3番目のみ赤になります。
要素:nth-last-child(n)と記述すれば後ろから数えてn番目に適用になります。

CSS3で追加されたプロパティ

CSS3ではhtmlの記述順に関係なく柔軟に配置できる「フレキシブルボックス」という新しいボックス様式が導入されています。

（例）.display{
display:flex;
flex-direction:row;
}

display:flexでフレキシブルボックス化し、flex-direction:rowで配置順（rowは左から右）を決めています。
flexboxはレスポンシブデザインのWEBサイトを作るのにはとても便利ですね。

まとめ

今回はざっくりと解説しました。
その他にも追加された仕様はまだまだあります。
全て覚える必要はありませんが、必要に応じて使えるように目を通しておきたいですね！
また続編として、少しずつ詳しく解説していきたいと思います！

投稿者プロフィール

kinukawahiroyasu
投稿タグ
,