CSS について

　CSS について学ぶサイトです。手っ取り早く学びたい場合は「CSS の基本構造」から進んでください。

CSS って何？

CSS の歴史

CSS って何？

　CSSは Cascading Style Sheets の略です。
　「cascade（カスケード）」の意味は「連なった小さな滝」とか「段階的に連なっているもの」という意味です。CSS は数珠つなぎのように HTML のスタイルを定めることができるので、このような名前となっています。
　HTML はマークアップ言語であり、原則として文書構造を表すことにのみ使うことになっています。CSS はスタイルシート言語として、この HTML の見た目（表示や表現）を記述するために使われます。
　スタイルシート言語は他にもありましたが、現在では CSS しか選択肢がない状態となっており、それを拡張した Less や SCSS 、Sass などがあります。
　CSS は HTML で表現可能なデザインを実現できる要素を取り入れつつ、新たなデザイン機能を備えており、以下の点を特徴としています。

ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変化させることができる。
Web ブラウザ、Web サイト制作者、ユーザーがそれぞれ定義した CSS のもたらす効果を重ね合わせる（カスケードする）ことができる。

CSS の歴史

　CSS は 1994年にCERN（欧州原子核研究機構）に勤務するホーコン・ウィウム・リーにより提唱されました。CSS は、バージョンではなく、レベルという段階で使用を定義しています。現在は、CSS 全体ではなくモジュールと呼ばれる単位でレベルを定めているため、（全体的に）最新のレベルというものは存在しません。詳細は、「CSSの歴史。誕生の背景やLevel別の特長を学ぼう。」に詳しく書かれています。

1994年：CSS 提唱
1996年12月：CSS Level 1 が W3C により勧告される。
1998年5月：CSS Level 2 が W3C により勧告される。
2011年6月：Level 2 ではブラウザ間の差異が生まれたため、それを解消するために、CSS Level 2.1 が W3C により勧告される。
2017年頃から、全体的には CSS Level 2.1 に準拠しつつ、モジュール単位で Level 3 になったものが W3C により勧告されるようになる。

CSS で使われる主な単位

　CSS では、レイアウトを様々に変更することができますが、そのためにはそれぞれの設定を行う必要があります。その設定には単位が必要となりますが、CSS では多くの種類の単位を扱うことができます。主な単位は px, pt, em, rem, % です。
　px や pt はインチ（in）に対しての絶対的な値になります。 72pt = 1in、96px = 1in になります。絶対的な値とは名前の通り絶対変化しない値のことです。文字サイズや要素の幅を px や ptで指定すると、親要素や画面サイズなどほかの要因に変化があっても影響されません。
　em や rem、% は、ある要素に対しての相対的な値になります。em や % はその親要素に対して、rem は html（ルート）要素に対して、大きさが変化します。em は、かつて組版の際に、形が正方形に近い「M」を基準にしていたことから生まれた単位になります。em や rem、% の違いを確認したい場合は HTML+CSS Learner を見てください。
　絶対的な値と相対的な値、どちらが良いかは考えた方によりますが、画像や要素の幅を扱う場合は px、文字を扱う場合は em や rem 、表や要素の幅を扱う場合は % がよく使われます。
　他にも CSS で使われる単位はたくさんあります。詳細は「CSS の値と単位」をご覧ください。

CSS の基本構文

CSS を HTML に適用するために、セレクターと呼ばれる識別子を用います。以下が書式です。


セレクター {
　プロパティ１ : 値１;
　プロパティ２ : 値２;
}

CSS の記述例は以下のようになります。入力はすべて半角英数字の必要があります。


p {
　color : red;
　font-size: 2rem;
}

HTML と CSS の動きを確かめるために HTML+CSS Learner を用意しました。

セレクターの種類

　CSS を HTML に適用するために、セレクターと呼ばれる識別子を用います。セレクターには、要素型セレクター、クラスセレクター、IDセレクター、属性セレクターがあります。また、セレクター以外に結合子や疑似表記というものもありますが、ここでは説明しません。

要素型セレクター

要素型セレクターは HTML の指定した要素（タブ）に適用されます。例えば、


　p {
　　color: red;
　　font-size: 2rem;
　}

は、p タグの要素内すべての色を赤に、フォントサイズを親の要素の２倍にします。

クラスセレクター

クラスセレクターは HTML の指定したクラス属性に適用されます。例えば、


　.classname {
　　color: red;
　　font-size: 2rem;
　}

は、あるタグのクラス属性すべての色を赤に、フォントサイズを親の要素の２倍にします。classname の左にあるピリオド（.）を忘れないようにしましょう。
HTML 上のクラス属性は <p class="classname"> のように指定します。HTML 内に同じクラス属性を複数使うことができます。

IDセレクター

IDセレクターは HTML の指定したID属性に適用されます。例えば、


　#idname {
　　color: red;
　　font-size: 2rem;
　}

は、あるタグのID属性すべての色を赤に、フォントサイズを親の要素の２倍にします。idname の左にあるシャープ（#）を忘れないようにしましょう。
HTML 上のID属性は <p id="idname"> のように指定します。HTML 内に同じID属性は必ず１つです、同じID属性を複数使うことはできません。

属性セレクター

属性セレクターは HTML の指定した属性に適用されます。例えば、


　p[class="classname"] {
　　color: red;
　　font-size: 2rem;
　}

は、クラスセレクターと同じ働きを示します。他にも


　a[href*="https:"] {
　　color: pink;
　}

は、a タグの href 属性内を検索して "https:" と一致する場合、その要素全体がピンクになります。
これらの動きを確かめるために HTML+CSS Learner を用意しました。