CSSに関する重要なプロパティ：HTML/CSS基礎⑤【オンライン】

2025/3/31　「HTML/CSS基礎⑤【オンライン】」の記録です。

講師：湊 有加⾥先生

セレクタの得点について

セレクタには優先順位があり点数計算をして高得点のものが採用されます。

同じ得点の場合は後ろに書いてあるものが採用されます。

点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがありますので意図したスタイルにならない時は点数を確認してください。

点数が同じ場合は、下にあるセレクタが優先される。

Chrome検証ツールについて

ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chrome の検証ツールの使用が有効です。

また、スマートフォンやタブレットでの表示型式を確認することもできます。

CSS：バックグランド系プロパティ

• background-color プロパティ（背景色）
• background-attachment プロパティ（背景画像の位置）
• background-image プロパティ（背景画像のファイル）
• background-repeat プロパティ（背景画像の繰り返し）
• background プロパティ（背景の一括指定）
• background-size プロパティ（背景画像のサイズ）
• background-position プロパティ（背景画像の表示開始位置）

CSS：テキスト系プロパティ

• color プロパティ（文字の色）
• opacity プロパティ（透明度）
• text-align プロパティ（文字の配置）
• text-decoration-color プロパティ（文字飾りの色）
• text-decoration-style プロパティ（文字飾りの線種）
• text-decoration-thickness プロパティ（文字飾りの線の太さ）
• text-decoration プロパティ（文字の飾りの一括指定）
• text-shadow プロパティ（文字の影）

CSS：フォント系プロパティ

• font-family プロパティ（フォントの種類）
• font-size プロパティ（フォントのサイズ）
• font-weight プロパティ（フォントの太さ）
• font-style プロパティ（フォントのスタイル）
• line-height プロパティ（行の高さ）
• font プロパティ（フォント一括指定）
• white-space プロパティ（空白・改行の表示方法）
• word-wrap プロパティ（単語の途中での改行方法）
• word-break プロパティ（テキストや単語の改行方法）
• tab-size プロパティ（タブ文字の表示幅指定）

CSS：リスト系プロパティ

• list-style-type プロパティ（リストマーカーの種類）
• list-style-image プロパティ（リストマーカーの画像）
• list-style-position プロパティ（リストマーカーの位置）
• list-style プロパティ（リストマーカーの一括指定）

CSS：レイアウト系プロパティ

• width プロパティ（内容の幅）
• max-width プロパティ（幅の最大値）
• min-width プロパティ（幅の最小値）
• height プロパティ（内容の高さ）
• max-height プロパティ（高さの最大値）
• min-height プロパティ（高さの最小値）
• float プロパティ（回り込み）
• clear プロパティ（回り込みを解除）
• display プロパティ（要素の表示方法）
• overflow プロパティ（ボックスからあふれた内容の処理方法）

CSS：パディング系プロパティ

• padding-top/-bottom/-left/-right プロパティ（パディング上下左右）
• padding プロパティ（パディング一括指定

CSS：マージン系プロパティ

• margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
• margin プロパティ（マージン一括設定）

マージンの相殺

マージンが相殺される場合があります。上と下のマージンが相殺される現象に注意しましょう。

マイナスマージン

マイナスマージンを使用すると、要素の位置を逆に移動させることができます。

ボックスの中央配置

ボックスの中央配置を行う際に、`margin: 0 auto;`を使うことが多いです。

ボックスの右端配置

ボックスを右端に配置するためには、`float: right;`や`text-align: right;`を使用します。

CSSの詳細度（Specificity）とは

複数のCSSルールが同じ要素に適用されるとき、どのスタイルが優先されるかを決める仕組み。

具体的には、セレクターの種類ごとにポイントが割り振られ、それを合計した値（得点）が高い方が優先される。

CSS 詳細度の例

ボックスサイジング（box-sizing）とは

ボックスサイジングは、CSSのプロパティで、要素の幅や高さがどの部分に含まれるかを決めるものです。これを設定することで、要素のサイズの計算方法を変えることができます。

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

デフォルトでは、`box-sizing`は`content-box`です。この設定では、幅や高さはコンテンツ部分のみのサイズとして計算されます。パディングやボーダーは含まれません。

例:

この場合、幅は200pxにパディング（20px）とボーダー（5px）を足して、実際には245pxになります。

2. `border-box`

`border-box`を使うと、幅や高さにパディングやボーダーも含まれます。指定したサイズの中に、コンテンツ、パディング、ボーダーが全て収まります。

例:

この場合、幅は200pxのままで、コンテンツ部分の幅は150pxになります。

パディング（padding）とは

パディングとは、HTML要素のコンテンツとその要素の境界（ボーダー）との間にある内側の余白のことです。簡単に言うと、要素の内容（文字や画像など）とその枠線の間に入れるスペースです。

パディングの使い方

パディングを使うことで、要素内のコンテンツがボーダーにくっつかないようにスペースを作ることができます。これにより、見た目がスッキリしたり、コンテンツの可読性が向上します。

パディングの基本的な設定方法

以下のCSSで、パディングを設定できます。指定した数値分だけ、コンテンツとボーダーの間に余白が作られます。

div {
  padding: 20px; /* 上下左右すべてに20pxの余白を設定 */
}

個別にパディングを設定する方法

個別に上下左右のパディングを設定することもできます。例えば：

div {
  padding-top: 10px;    /* 上に10pxの余白 */
  padding-right: 20px;  /* 右に20pxの余白 */
  padding-bottom: 30px; /* 下に30pxの余白 */
  padding-left: 40px;   /* 左に40pxの余白 */
}

パディングとマージンの違い

パディングとよく混同されるのが「マージン」です。パディングは要素の内側の余白、マージンは要素の外側の余白です。

• パディング: 要素内のコンテンツとボーダーとの間にスペースを作ります。
• マージン: 他の要素との間にスペースを作ります。

パディングを使った例

以下のコードは、パディングを設定した実際の例です：

この場合、`div`の中のコンテンツとボーダーとの間に20pxの余白が作られます。

マージン（margin）とは

マージンとは、HTML要素のコンテンツとその要素の外側にある他の要素との間にできる外側の余白のことです。これを使うことで、要素同士の間隔を調整することができます。

マージンの使い方

マージンを使うことで、要素同士の距離を調整したり、レイアウトを整えることができます。パディングとは異なり、マージンは要素の外側の余白です。

マージンの基本的な設定方法

以下のCSSで、マージンを設定できます。指定した数値分だけ、要素同士の間に余白が作られます。

div {
  margin: 20px; /* 上下左右すべてに20pxの余白を設定 */
}

個別にマージンを設定する方法

個別に上下左右のマージンを設定することもできます。例えば：

div {
  margin-top: 10px;    /* 上に10pxの余白 */
  margin-right: 20px;  /* 右に20pxの余白 */
  margin-bottom: 30px; /* 下に30pxの余白 */
  margin-left: 40px;   /* 左に40pxの余白 */
}

マージンを使った例

以下のコードは、マージンを設定した実際の例です：

この場合、`div`の外側に20pxの余白が作られます。他の要素とこのボックスの間にスペースができることになります。