2021-06-27 · 3분

CSS とは？

cssweb

この記事は公開から2年以上経過しています。

CSS とは？

CSS とは Cascading Style Sheets の略で、文書のスタイルを飾るときに使うスタイルシート言語です。

フォント、背景色、幅と高さ、位置などを指定できます。

HTML に CSS を適用する方法

インラインスタイルシート：HTML タグに直接 CSS コードを書く
内部スタイルシート：<style> タグの中に CSS コードを書く
外部スタイルシート：別途の CSS ファイルの中に CSS コードを書く

優先順位

1 つの要素に、同じ属性で異なる値の CSS 値が適用されたなら、優先順位は インライン > 内部 > 外部 の順で適用されます。

セレクタ

セレクタを使って特定の要素にスタイルを適用できます。

**全体セレクタ          タグセレクタ**

**アイディセレクタ       クラスセレクタ**

**子・子孫セレクタ   擬似クラスセレクタ**

全体セレクタ：すべての要素を選択するセレクタ、*{ 属性 : 属性値; }

タグセレクタ：HTML タグを選択するセレクタ、タグ名 { 属性 : 属性値; }

アイディセレクタ：特定の id を選択するセレクタ、#id 名 { 属性 : 属性値; }

クラスセレクタ：特定のクラスを選択するセレクタ、.クラス名 { 属性 : 属性値; }

子セレクタ：子要素を選択するセレクタ、親タグ > 子タグ { 属性 : 属性値; }

子孫セレクタ：子孫要素を選択するセレクタ、親タグ子孫タグ { 属性 : 属性値; }

擬似クラスセレクタ：仮想に存在する要素を選択するセレクタ、要素:擬似クラス { 属性 : 属性値; }

アイディセレクタ vs クラスセレクタ

ページ内で何度も繰り返されるスタイル = クラスセレクタを使用

一度だけ唯一に適用されるスタイル = アイディセレクタを使用

クラス属性は重複が可能ですが、id 属性は重複が不可能なためです。

効率的に CSS を勉強する方法

https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/

膨大な CSS の中で効率的に勉強するには、こうした指標を通じてよく使われるコードから学ぶことをおすすめします。

例

下のコードは、ドラッグすると text に影と色・背景色を変えてくれるコードです。擬似セレクタである ::selection を使って作りました。このコードが、現在このサイトで文字をドラッグすると紫色で出るコードです。また下のボタンは擬似セレクタ :hover を使って、マウスを乗せると box-shadow が生じるようにしました。

See the Pen by nabomhalang (@nabomhalang) on CodePen.

上のように擬似セレクタをうまく使えば、とても綺麗に飾れます。綺麗な css をもう一つ例として見せると、

See the Pen CSS 3D Blend Mode Buttons by Lisi (@lisilinhart) on CodePen.

See the Pen wallet - icon animation by Mike Aparicio (@peruvianidol) on CodePen.

上のようなコードを JS なしで作れます。

もっと綺麗なボタンを見たい方は https://freefrontend.com/css-buttons/ にアクセスしてみてください。

私たちがウェブサイトで最も目を引くのはデザイン（css）なので、css は非常に重要だと思います。ぜひよく身につけてください。