文書構造とスタイルの適用方法
CSSをWebページに適用する際、まず理解すべきはドキュメントの階層構造とスタイルのバインド手法です。内部スタイルシート、インラインスタイル、外部スタイルの3つの導入方式が存在しますが、保守性と分離の観点から外部ファイルの読み込みが推奨されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レイアウト基礎</title>
<link rel="stylesheet" href="style.css">
<style>
.intro-text {
color: #d9534f;
font-size: 1.25rem;
}
</style>
</head>
<body>
<p class="intro-text">スタイリングの起点</p>
</body>
</html>セレクタ体系と特異性計算
要素を選択するルールは単体と複合の2つに大別できます。単体セレクタでは要素名、クラス、ID、ユニバーサル記号を用います。クラスは複数適用可能で半角スペースで区切り、IDはページ内で一意の識別子として設計されます。
.accent { color: #e74c3c; }
#main-header { font-size: 2rem; }
* { box-sizing: border-box; }複合セレクタは階層関係や状態を基準に選択範囲を絞り込みます。子セレクタ(>)は直下の要素のみ対象とし、後代セレクタはスペース区切りで孫以下も包含します。擬似クラスではユーザー操作やフォーカス状態に応じた動的なスタイリングが実現可能です。
.sidebar > .widget { padding: 10px; }
.card, .banner, .footer { margin-bottom: 1rem; }
a.link:hover { opacity: 0.8; }
input:focus { outline: 2px solid #3498db; }プロパティの競合が発生した場合は特異性（Specificity）とカスケード順序で勝敗が決まります。特異性は行内(1000) > ID(100) > クラス/属性/擬似クラス(10) > タグ/擬似要素(1)の重みで計算され、同値の場合は後勝ちの原則が適用されます。継承されるプロパティの特異性は0とみなされるため、明示的な指定で上書き可能です。
タイポグラフィと背景レイヤ
テキストの視認性とリズムはフォント系プロパティで制御します。フォントファミリはフォールバックを含め指定し、サイズは相対単位やピクセル値で統一します。太さや傾斜は簡易プロパティfontで順序を守って宣言できます。
body {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
text-align: justify;
}
h1 {
font-weight: 700;
text-decoration: none;
text-indent: 0;
}背景は単色だけでなく画像、透過度、固定表示などを組み合わせることで深い階層感を作成します。座標指定はキーワードと数値を混在させ、中央揃えをデフォルトとするのが一般的なパターンです。
.hero-section {
background-color: rgba(0, 0, 0, 0.4);
background-image: url("assets/landscape.jpg");
background-repeat: no-repeat;
background-position: center 20px;
background-attachment: fixed;
}ボックスモデルと表示モード
CSSにおける要素はボックスとして扱われ、コンテンツ領域、パディング、ボーダー、マージンの4つの領域で構成されます。表示モードはブロックレベル、インライン、インラインブロックに分類され、displayプロパティで相互変換が可能です。
span { display: block; }
article { display: inline; }
.grid-item { display: inline-block; vertical-align: top; }パディングは内部スペースを確保しますが、ボックス全体の寸法を拡張します。マージンは外部間隔を制御し、縦方向では親要素へのマージン崩れ（Collapse）が発生する特性があります。初期リセットではリストのマーカーやデフォルト間隔の削除が必須です。
ul { list-style: none; padding: 0; margin: 0; }
.card {
padding: 1.5rem;
margin: 1rem 0;
border: 1px dashed #ccc;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}フローティングとクリアフィックス
標準フローはブロック要素を上下に積み上げる仕組みですが、複数の要素を横並びに配置するにはフローティングを活用します。浮動した要素は文脈から外れるため、親コンテナの高さが0になる現象（レイアウト崩壊）が生じます。
これを解消する標準的な手法は、親要素に疑似要素による clearfix クラスを適用する方法です。ブラウザの互換性も含め、以下の宣言で確実に高さが引き上げられます。
.wrapper::before,
.wrapper::after {
content: "";
display: table;
}
.wrapper::after {
clear: both;
}
.wrapper {
zoom: 1; /* レガシーブラウザ対応 */
}ポジショニングと表示状態の切り替え
要素の配置制御には静的、相対、絶対、固定、スティッキーの5つの位置指定モデルがあります。相対定位は基準位置からのズレを示し、絶対定位は配置可能ブロック（BFC）を基準に自由配置します。固定定位はビューポートに対して固定され、スティッキーはスクロール閾値でモードを切り替えます。
.relative-box { position: relative; top: 10px; }
.absolute-badge { position: absolute; right: 0; top: 0; }
.fixed-nav { position: fixed; width: 100%; }
.sticky-header { position: sticky; top: 0; }表示の切り替えはdisplay: none（ドキュメントフローから除外）とvisibility: hidden（表示非表示だがスペースを確保）で使い分けられます。Overflow制御では、コンテナ外への流出を抑制し、必要に応じてスクロールバーを自動表示させる設計が望ましいです。
.truncate-container {
display: none; /* 非表示状態 */
visibility: visible; /* 表示状態 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}装飾テクニックとUI最適化
リソース効率を高めるため、複数アイコンをまとめるスプライト画像や、ベクターベースのフォントアイコンが広く採用されています。スプライトは背景位置のネガティブ値で描画領域をシフトさせ、フォントアイコンは文字サイズと同様にスケーラブルに装飾できます。
擬似要素を活用した幾何学装飾では、ボーダーの透明化と交差部分の可視化により三角形や矢印を構築します。ユーザインタラクション面ではカーソルの変更、アウトラインの抑制、テキスト領域のドラッグ防止などでUXを微調整します。
.icon-arrow::after {
content: "";
display: block;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #333;
}
textarea {
resize: none;
outline: none;
cursor: text;
}インラインブロック要素の自然なギャップ吸収、行内テキストの改行制御、ページネーションのホバー状態表現などは、実際のプロジェクトで頻出する実装パターンです。プロパティの宣言順序を一貫させ、ベンダープレフィックスやフォールバックを適切に配置することで、堅牢なスタイルシートの構築が可能になります。