CSSの適用方法

CSSの適用方法には主に3つの方法があります。

インライン型

タグの中に直接CSSの命令を書く方法です。（古い記述方法になるため、現在は非推奨です）

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

埋め込み型

HTMLのheadタグ内に<style>タグを設置しCSSの命令を記述する方法です（非推奨ではありませんが、HTMLとCSSの記述が長くなるデメリットがあります）

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

外部型

HTMLとは別にCSSファイルを用意し、HTMLにCSSのリンクを記述することで適用させる方法です（最も多く採用されているCSSの適用方法です）

HTMLのheadタグ内に<link rel=”stylesheet” href=””>と記述し、href=””の中に適用させたいCSSのパスを記述します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

CSSのファイル名のルール

基本的にはHTMLと変わりはありません。

• ・名前に使えるのは半角英数字、記号は-（ハイフン）or_（アンダーバー）のみ
• ・スペースは不可
• ・ファイル名はHTMLでいうindex.htmlのような決まりはなく、任意の名前でOK
  （メインとなるCSSには通常style.cssという名前がつけられることが多いです）

CSSの基本文法

文書のデザイン、レイアウトなどを作成するためのCSSの基本文法です。
CSSの命令は、セレクタ・プロパティ・値　で構成されます。
例えば、HTMLで作成した<h1>の文字を赤くしたい、という場合、このような命令になります。

h1 { color: #f00; }　→h1の文字の色を赤くする

それぞれの名称を下記のように呼びます

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

わかりやすい言葉に置き換えるとこんな感じです

どこの { 何を: どうする; }

基本的にこの考え方が理解できれば、CSSで命令を出すことができます。あとは、プロパティと値の種類、その効果を覚えていくことでさまざまな表現ができるようになります。

セレクタの種類

セレクタの種類にはさまざまなものがあり、使いこなすことで指示を出したい場所を明確に指定することができます。

要素名セレクタ

h1やpなど、そのまま要素名がセレクタになる場合です。一番基本のセレクタになります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

ユニバーサルセレクタ

全ての要素を指定するセレクタです。*（アスタリスク）をセレクタとします

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

子孫セレクタ

ある特定の親要素の中にある子要素を指定するセレクタです。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

idセレクタ

html内の要素内でidが記述されている箇所に命令を出せるセレクタです。
id名は1つのHTML内で複数同じものを使うことはできません。
id名は半角・全角（日本語も可だがほぼ使わない）で指定でき、記号は-（ハイフン）or_（アンダーバー）のみ使用できます。スペースは不可です。
CSSで指定する際は、#id名　の形で記述します。

idセレクタを使って「ページ内リンク」を作ることができます。
ページ内リンクとは、リンクを押すと同じページ内の指定の場所にリンクできることです。
飛ばしたい箇所にidセレクタを設定し、リンク箇所に<a href=”#id名”>という形で記述します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

classセレクタ

html内の要素内でclassが記述されている箇所に命令を出せるセレクタです。
id名と違い、classは1つのHTML内で複数同じものを使うことができます。
classの命名ルールはidと同じです。CSSで指定する際は、.class名　の形で記述します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

リンク擬似クラス

リンクを設置している要素に対して「通常時」「既読時」「マウスが乗ったとき」「クリック時」にCSSの指定ができるセレクタです。
記述は必ず「link」「visited」「hover」「active」の順番に書きます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

セレクタと獲得ポイント

CSSでセレクタを指定するときに、指定したセレクタに「獲得ポイント」というものがつきます。CSSの命令を効かせる優先順位をつけるためのものです。
ポイントが一番多いものに対して命令を優先的に効かせるようになります。

• ユニバーサルセレクタ：　0ポイント
• 要素名セレクタ：　　　　1ポイント
• class名セレクタ：　　　  10ポイント
• id名セレクタ：　　　　　100ポイント

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

上記の例では同じ要素に対して異なるセレクタで命令を出していますが、
結果id名で命令を出した方がポイントが高いので結果は#f00となります。

プロパティと値の種類

セレクタにさまざまな命令を出すためのプロパティと値の種類を紹介します。

横幅と高さを指定する

width

要素の横幅を指定するプロパティです。数値の後ろに単位（px、%など）をつけて指定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

height

要素の高さを指定するプロパティです。widthと同じく数値の後ろに単位（px、%など）をつけて指定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

※注意
widthとheightはともにブロックレベル要素にのみ適用できます。
インライン要素は文章と同じ扱いになるため、要素の高さ、幅はテキストの数となり、width・heightの命令が効きません。
インライン要素にwidthやheightを効かせる方法はlesson5にて解説します。

文字を揃える

text-align

文字の水平方向の揃え位置を設定するプロパティです。
left（左揃え）・center（中央揃え）・right（右揃え）の設定ができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

line-height

テキストの行送り（＝1行分の高さ）を指定するプロパティです。
文と文の間（行間）の設定ではないので注意しましょう。大きさの単位は「px」「%」などがあります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

またテキストが1行の場合、line-heightとheightの高さを同じ数値にすると、要素の高さの中でテキストが真ん中に配置されます。
2行分中央に揃える方法はlesson5のdisplayプロパティの説明部分で解説します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

余白を空ける

margin

要素の外側に余白を空けるためのプロパティです。
要素の上下左右にどのくらい余白を空けるのかを指定します。

【それぞれの方向の余白を個別に指定する】

• margin-top　　　　→要素の上に余白を空ける
• margin-bottom　　→要素の下に余白を空ける
• margin-left　　　　→要素の左に余白を空ける
• margin-right　　　→要素の右に余白を空ける

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

【それぞれの方向の余白をまとめて指定する】

それぞれの値と値の間は必ず半角スペースで区切りましょう。

• margin: 10px;　　→上下左右に10pxずつ余白を空ける
• margin: 10px 50px;　　→上下は10pxずつ、左右は50pxずつ余白を空ける
• margin: 10px 50px 100px;　　→上は10px、左右は50pxずつ、下は100px余白を空ける
• margin: 10px 50px 100px 200px;　　→上は10px、右は50px、下は100px、左は200px余白を空ける（時計回り）

※margin: 0 auto; という値を設定することで、上下は余白0、左右に均等に余白をつけることができ、要素の中央に配置することができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

padding

要素の内側に余白を空けるためのプロパティです。要素の上下左右にどのくらい余白を空けるのかを指定します。
余白を個別に指定する方法、まとめて指定する方法の考え方はmarginと同じです。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

※注意
要素にwidthやheightを指定した状態でpaddingを設定すると、要素のサイズが変わってしまいます。
要素のサイズ内に余白を含める命令として、box-sizing: border-box;という命令があります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

背景を指定する

background-color

背景の色を指定するためのプロパティです。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

background-image

背景画像を指定するためのプロパティです。
background-image:url();　と記述し、urlのなかに画像のパスを指定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

background-repeat

背景画像を指定したとき、画像を繰り返し表示させるかどうかを指定します。下記の値を設定できます。

• : no-repeat　→繰り返さない
• : repeat　　→繰り返す
• : repeat-x　→x方向に繰り返す
• : repeat-y　→y方向に繰り返す

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

background-size

指定した背景画像のサイズを指定します。下記の値を設定できます。

• : cover　→要素全体を覆う
• : contain　→縦横比を維持して画像全体を表示する
• : 数値　→具体的な数値で指定する

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

background

上記のbackground〜の命令を一括で出すことができます。
例：　h1 { background: #0ff url(sea.jpg) no-repeat ;}

色の作り方（#RRGGBB方式）

#000など、#から始まる3桁もしくは6桁の数値で色を表す方法です。
#RRGGBB方式といって、光の3原色の出力値をそれぞれ2桁で表します。
それぞれR=RED（赤） G=GREEN（緑）　B=BLUE（青）です。

RGBそれぞれには0・1・2・3・4・5・6・7・8・9・a・b・c・d・e・fまでの16進数の数値が入ります。
0に近いほど小さく、fに近いほど大きいです。

#RR GG BB
#ff 00 00

例えば上の#ff0000　なら、赤の出力値が一番大きいff、緑と青は0なので「赤色」を表します。
この数値の組み合わせでたくさんの色数を表現することができます。

• #000000　→黒
• #ff0000　→赤
• #00ff00　→緑
• #0000ff　→青
• #ffffff　　→白

RGBそれぞれの1桁目と2桁目が同じ数値なら、6桁→3桁に省略することができます。
省略できる：#000000　→　#000　
省略できない：#010110・#b3b3b3

参考リンク

・【2023年版】おすすめのリセットCSSまとめ！基本知識と使い方を解説
https://webdesign-trends.net/entry/8137

・色の名前とカラーコードが一目でわかるWEB色見本
https://www.colordic.org/

・【初学者必見】HTMLにつけるclass名(クラス名)の命名規則の考え方を徹底解説！