2025/4/4 「HTML/CSS基礎⑦」の記録です。
講師：⼤浜 信彦先生
CSS：レイアウト系プロパティ
-
position/top/left/bottom/right プロパティ
positionプロパティで要素の配置方法を指定します。値は、static（デフォルト）、relative（相対配置）、absolute（絶対配置）、fixed（固定配置）、sticky（スクロール時に固定）などがあります。
top、left、bottom、rightで位置を調整します。absoluteやrelativeで使われることが多いです。 -
z-index プロパティ
要素の重なり順序を指定します。z-indexは、要素が重なった時にどちらを前面に表示するかを決定します。数値が大きいほど前面に表示されますが、positionプロパティがrelative、absolute、fixedのいずれかに設定されている必要があります。
CSS：ボーダー系プロパティ
-
border-style プロパティ
ボーダーの種類を指定します。例としては、solid（実線）、dashed（破線）、dotted（点線）、double（二重線）などがあります。 -
border-color プロパティ
ボーダーの色を指定します。色は名前やRGB値、HEXコードなどで設定できます。例：border-color: red;。 -
border-width プロパティ
ボーダーの幅を指定します。thin、medium、thickなどのキーワード、またはピクセル単位（例：2px）で設定できます。 -
border プロパティ
ボーダーのスタイル、色、幅を一括で指定することができます。例：border: 1px solid black;。 -
border-top/-bottom/-left/-right プロパティ
ボーダーを個別に設定できます。例えば、border-topで上部のボーダーだけを指定できます。border-top: 2px dashed blue;など。
CSS：その他のプロパティ
-
border-radius プロパティ
要素の角を丸くするために使用します。単一の値で全ての角を丸くすることも、複数の値を使って個別に調整することも可能です。例：border-radius: 10px;。 -
box-shadow プロパティ
要素に影を追加するために使います。box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);のように、X軸のオフセット、Y軸のオフセット、ぼかしの距離、影の色を指定します。 -
box-sizing プロパティ
要素の幅や高さを計算する方法を指定します。デフォルトではcontent-box（パディングとボーダーを幅や高さに含まない）ですが、border-boxを指定すると、パディングやボーダーも含めたサイズで計算されます。 -
content プロパティ
beforeやafter擬似要素と一緒に使い、要素の前後にコンテンツを追加します。例えば、content: "★";と指定すると、擬似要素に星マークを表示できます。 -
object-fit プロパティ
画像やメディアのトリミング方法を指定します。coverは要素にフィットするように画像を拡大または縮小し、containは画像全体が収まるように調整します。 -
object-position プロパティ
画像の配置位置を調整します。object-position: center;で画像を中央に配置できます。
CSS：擬似クラス系セレクタ
-
link 擬似クラス
未訪問のリンクにスタイルを適用します。例えば、未訪問リンクは青色、訪問済みリンクは紫色などのスタイルがよく使われます。 -
visited 擬似クラス
訪問済みリンクにスタイルを適用します。通常、linkとvisitedで色を変更することが多いです。 -
hover 擬似クラス
ユーザーが要素にカーソルを合わせた時に適用されるスタイルです。リンクやボタンに効果的です。例えば、hoverでボタンの色を変更することがよくあります。 -
active 擬似クラス
要素がアクティブ（例えばクリックされている最中）な時に適用されるスタイルです。button:activeでボタンが押された時にスタイルを変更できます。 -
first-child/last-child 擬似クラス
親要素の最初または最後の子要素にスタイルを適用します。例えば、リストの最初のアイテムだけをスタイル変更することができます。 -
nth-child 擬似クラス
親要素内のn番目の子要素にスタイルを適用します。nth-child(2)で2番目の子要素にスタイルを適用できます。 -
nth-of-type 擬似クラス
同じ種類の要素のn番目にスタイルを適用します。nth-of-type(2)で2番目の同じタグの要素にスタイルを適用できます。 -
not 擬似クラス
特定の要素を除外するスタイルを適用します。例えば、div:not(.special)で、specialクラスを持っていないdivにスタイルを適用できます。
CSS：擬似要素系セレクタ
-
first-letter 擬似要素
要素の最初の文字を対象にスタイルを指定します。例えば、段落の最初の文字だけを大きくすることができます。 -
first-line 擬似要素
要素の最初の行にスタイルを指定します。段落やテキストの最初の行に異なるフォントサイズや色を適用できます。 -
before/after 擬似要素
要素の前後にコンテンツを挿入することができます。例えば、リンクの前にアイコンを追加したり、リストの項目後に記号を追加することができます。
