cssの基本①

目次

1. 基本的な記述方法
2. セレクタの指定方法
3. css適応の優先順位
4. box-sizingとは

基本的な記述方法

基本は以下のような構成となります。

css

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

セレクタ指定方法

1. 要素セレクタ（タグセレクタ）

例

h1 {
    color: red;
}

2. クラスセレクタ

「.クラス名」で指定します

例

.text-container {
    display: flex;
}

3. IDセレクタ

「#id名」で指定します

例

#header {
    height: 80px;
}

4. 子孫セレクタ（ネスト）

半角スペースで子要素にアクセス
連続させることもできる

例

.container p {
    color: blue;
}

この場合、containerクラス内の全てのpタグにcssが適応される。

イメージ

<div class="container">
    <p>対象内</p>
    <div>
        <p>対象内</p>
    </div>
</div>


<p>containerクラス外のため対象外</p>

クラス同士でも可。

例

.container .content {
    color: blue;
}

5. 子セレクタ（直下の子要素のみ）

例

.container > p {
    color: blue;
}

直下の子要素にのみ適応されます。

イメージ

<div class="container">
    <p>適応される</p>
    <div>
        <p>適応外</p>
    </div>
</div>

6. 複数指定

同じスタイルを複数要素に一括指定

例

h1, h2, h3 {
    color: blue;
}

7. 複数クラスセレクタ

例

.button.primary {
    color: white;
}

buttonとprimaryの両方のクラスを持つ要素にのみ適応される

イメージ

<a class="button primary">適応</a>
<a class="button">適応されない</a>

8. 要素+クラスセレクタ

ある要素の中でも、特定のクラスを持つものだけに適応される。
「要素名.クラス名」と、スペースを入れずに記述。
部品単位（コンポーネント）でのcssでよく使われ、クラス単体よりも優先度があがる。

例

button.primary {
    background-color: red;
}

この場合、class="primary"を持つbuttonにのみ適応される。

イメージ

<!-- ‐適応される -->
<button class="primary">送信</button>

<!-- ‐適応されない -->
<button>キャンセル</button>

9.属性セレクタ

HTMLの属性を条件に指定するセレクタ。
指定方法は3つ。
①要素名[属性名="値"]　・　②[属性名="値"]　・　③[属性名]

type属性値"text"をもつinputタグにのみ適応

①

input[type="text"] {
    color: blue;
}

属性名="値"の例

②

[type="text"] {
    color: blue;
}

この場合、type="text"を持つすべての要素が対象。要素名は問わない。
※あまり使わない

結果

<!-- input・select要素どちらにも適応-->
<input type="text">
<select type="text"></select>

属性名のみの例

③

[disabled]{
    opacity: 0.5;
}

意味：属性[disabled]を持つ要素すべてに適応される。

10.その他

• 擬似クラス（:hover, :has(), :not()等）
• 擬似要素（::before, ::after）等）
  については、別の記事で解説する。

css適応の優先順位

1. !important（最強）

他のcssを全て無視して適応される。

css

.box {
    color: red !important;
}

2. インラインスタイル

htmlファイルのタグ内に直接書くCSSのこと。
!importantには負けるが、cssファイルよりは強い。

見本

<div style="color: red; font-size: 16px;">
text
</div>

3. セレクタの詳細度

詳細度の高い方が優先される。
詳細度の計算方法にも軽く触れるが、
今は「詳細度の高さ=優先度の高さ」と覚えておけばいい。

css

.box {
    color: red !important;
}

詳細度の計算

詳細度は4桁のスコアを左から比較し、
先に大きかった方が採用される。

詳細度　(a, b, c, d)

桁	内容	例
a	インラインスタイル	style=""
b	IDセレクタ	#main
c	クラス/属性/擬似クラス	.box／[type=text]／:hover
d	要素/擬似要素	div／::before

4. 記述順（後勝ち）

詳細度が等しい場合は、後に記述したものが採用される。

css

.box {
    color: red;
}

こっちが採用される
.box {
    color: blue;
}

5. ブラウザのUA（User Agent）

ブラウザのデフォルトCSSのこと。
bodyに謎の余白があるのはこいつのせい。
優先度は一番低く、自分のCSSを指定した時点で上書きされる。

まとめ

優先度は
!important > インライン > 詳細度 > 記述順 > UA
となる。

box-sizingとは

要素は以下のようなってな構造になっている。（ボックスモデル）

box-sizingは、width / height が「どこまで」を指すのかを定義するプロパティです。

主要な値

1. content-box（デフォルトの値）

css

box-sizing: content-box;

・width / height はcontentだけ
・paddingとborderは外側に足される

css

.box {
    width: 200px;
    padding: 20px;
    border: 10px solid;
}

実際の表示サイズ
200+40+20= 260px

1. border-box（現代の主流）

css

box-sizing: border-box;

・width = content + padding + border
・中身が自動的に縮む

css

.box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 10px solid;
}

実際の表示サイズ
→常に200px
→paddingやborderを指定しても要素がはみ出さない

実務での定番設定

css

*,
*::before,
*::after {
    box-sizing: border-box;
}

これで全要素・全擬似要素が全てborder-boxになる。

終わり

以上でした。