スプライト画像（CSS Sprites）の活用
複数の小規模な背景アイコンを個別に読み込むと、HTTPリクエスト数が増加し、ページの初期表示速度が低下します。これを回避するため、複数のアイコンを1枚の合成画像（スプライトシート）にまとめる手法が広く採用されています。
実装の要点は以下の通りです：
- 背景画像として1枚の大きなPNG/JPEGを指定し、
background-imageで読み込みます。 background-positionを使って、表示したいアイコン部分の左上座標（x, y）を負の値で指定します（例：background-position: -48px -24px;）。- 各アイコンのサイズと位置は事前に正確に計測し、CSSで厳密に制御します。
ウェブフォントによるアイコン表現（Icon Fonts）
SVGやラスターアイコンに比べ、フォントベースのアイコンは解像度非依存・色変更・サイズ調整・アニメーションが容易で、パフォーマンスも優れています。
代表的なサービス：
- Font Awesome —— 豊富な無料アイコンと直感的なクラス名体系
- IcoMoon —— カスタムアイコンセット生成に対応（ローカルダウンロード推奨）
- Alibaba Iconfont —— 中国語UI向けに最適化された大規模無料ライブラリ
使用手順はシンプル：①必要なアイコンを選択 → ②Webフォント形式でダウンロード → ③HTMLの<head>内に@font-face定義またはCDNリンクを追加 → ④<i class="icon-home"></i>のように利用。
CSSによる純粋な三角形生成
ゼロ幅・ゼロ高の要素に異なる色のボーダーを適用することで、三角形を描画できます。
.triangle-up {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 16px solid #3498db;
}
.triangle-right {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 12px solid #e74c3c;
}※互換性向上のため、font-size: 0とline-height: 0を併記することを推奨します。
ユーザーインタラクションの微調整
カーソル形状の制御
cursorプロパティでマウスポインタの見た目を変更可能です。
| 値 | 効果 |
|---|---|
default | 標準矢印 |
pointer | クリック可能（手のひら） |
move | ドラッグ操作中 |
text | テキスト選択モード |
not-allowed | 無効状態（禁止マーク） |
フォーム要素の外観整備
- アウトライン除去：
outline: none;またはoutline: 0;でデフォルトの青いハイライトを非表示に。 - リサイズ制限：
<textarea style="resize: vertical;">で縦方向のみ許可、resize: none;で完全に無効化。
vertical-alignによる垂直整列制御
このプロパティはインラインレベル要素（<img>, <input>, <span>など）の基準線に対する相対位置を調整します。
よくある課題と解決策：
- 画像下部の余白（空白隙間）：デフォルトの
baseline配置により文字の降下部と揃うため発生。
→ 対処法：vertical-align: middle;またはdisplay: block; - テキストとアイコンの中央揃え：
vertical-align: middle;を画像/フォーム要素に適用。
テキストの省略表示（エリプシス）
単一行の省略
以下の3つのプロパティを同時に設定します：
.ellipsis-single {
white-space: nowrap; /* 改行禁止 */
overflow: hidden; /* 溢れを非表示 */
text-overflow: ellipsis; /* 省略記号表示 */
}複数行の省略（WebKit系限定）
現代のモバイルブラウザでは以下が有効です：
.ellipsis-multi {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 行数指定 */
overflow: hidden;
text-overflow: ellipsis;
}※IEや旧式FirefoxではJavaScriptベースの代替実装が推奨されます。
実践的なレイアウト最適化手法
- margin負値：隣接要素の境界線をオーバーラップさせ、視覚的に隙間をなくす（例：
margin-right: -1px;）。 - float周辺のテキスト回り込み：画像やアバターの右側に説明文を自然に配置。
- inline-blockの活用：水平並びかつ高さ揃えが可能なグリッド構築に適しています。
- 三角形の応用：ドロップダウン矢印、吹き出しの先端、タブの角飾りなど、装飾的要素に多用されます。