「仕様」と戦う時代は終わりました。
今は、「デザイン」と向き合う時代です。

1. 構造と装飾の分離

昔は <font> タグや align 属性でデザインしていました。 しかし今は、HTMLは純粋なドキュメント構造のみを保ち、見た目は全てCSSで制御します。

2. ボックスモデル

全ての要素は「四角い箱」です。<td> 以外を知らない人のために、ブロックレベル要素とインライン要素の違いを可視化します。

※ 赤色のボーダーは要素の境界線を示しています。

3. CSSの単位

px だけではありません。画面幅に応じた相対単位 (%, vw) や、文字サイズ基準の rem を使いこなしましょう。

4. Flexboxの威力

かつての float や table レイアウトの苦しみから解放されましょう。Flexboxなら、要素の配置が自由自在です。

.container {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}

5. Gridシステム

2次元レイアウトのための最強ツール。行と列を定義するだけで、複雑な「聖杯レイアウト」も一瞬で完成します。

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

6. 究極の中央寄せ

「上下中央寄せ」は、かつてCSS最大の難関でした。しかし現代では、たった2行のコードで解決します。

7. 疑似要素の魔法

::before と ::after は、HTMLを汚さずに装飾を追加する「魔法」です。
かつては空の <td> や <img> を使っていた装飾が、今はCSSだけで実現できます。

.ribbon::before, .ribbon::after {
  content: '';
  position: absolute;
  bottom: -10px;
  border: 10px solid transparent;
}

.quote::before {
  content: '"';
  font-size: 4rem;
  opacity: 0.3;
}

.step::before {
  content: counter(step);
  counter-increment: step;
}

.check::after {
  content: '';
  border: solid white;
  transform: rotate(45deg);
}

ボーナス: ツールチップ

data-* 属性と attr() を組み合わせれば、JavaScriptなしでツールチップも作れます。

<!-- HTML -->
<span data-tooltip="ツールチップの内容">ホバーしてみて</span>

/* CSS */
.tooltip::after {
  content: attr(data-tooltip);  /* ← ここがポイント！ */
  position: absolute;
  bottom: 100%;
  opacity: 0;
  transition: opacity 0.2s;
}
.tooltip:hover::after {
  opacity: 1;
}

8. レスポンシブデザイン

メディアクエリを使えば、画面幅に応じてスタイルを切り替えられます。ウィンドウ幅を変えて色の変化を見てみてください。

/* モバイルファースト: 小さい画面から設計 */
.box { background: red; }  /* モバイル */

@media (min-width: 768px) {
  .box { background: green; }  /* タブレット */
}
@media (min-width: 1024px) {
  .box { background: blue; }  /* デスクトップ */
}

9. position プロパティ

要素の配置方法を制御します。relativeは元の位置からの相対位置、absoluteは親要素からの絶対位置です。

.absolute-child {
  position: absolute;
  top: 20px;
  right: 20px;
}  /* 親要素に position: relative が必要 */

10. CSS変数

--custom-property で変数を定義し、var() で使用します。テーマカラーの一括変更に便利です。

:root {
  --primary-color: #38bdf8;
}
.box {
  background: var(--primary-color);
}

11. トランジションとアニメーション

transition はホバー時のスムーズな変化、@keyframes は繰り返しアニメーションに使います。

12. overflow と z-index

overflow ははみ出したコンテンツの制御、z-index は要素の重なり順序を制御します。

overflow の比較

z-index の重なり

13. バッドプラクティス集

やってしまいがちな悪い習慣。これらを避けるだけで、コードの品質が大きく向上します。

14. デバッグ手法

ブラウザのDevToolsを使いこなせば、CSSの問題解決が勇気急上。