😊

CSSの基礎を簡潔に整理！スタイルシートを美しく作るための本質

に公開
CSS
Tailwind CSS
zennfes2025ai
zennfes2025free
zennfes2025infra
tech

CSSの基礎を簡潔に整理！スタイルシートを美しく作るための本質

Web開発の実務ではJavaScriptやフレームワークが原因でCSSの理解が消極的になりがちですが、ユーザー体験を向上させるためにはスタイルは最大の武器とも言えます。

この記事では、CSSの基礎を簡潔に整理しながら、デザインを美しく作るためのポイントを紹介します。

1. CSSとは

CSS (Cascading Style Sheets)は、HTMLで構造化されたコンテンツに形を付けるための言語です。

  • 色、サイズ、位置、アニメーション
  • レイアウト設計 (フレックスボックス/グリッド/ポジション)

2. 必要な基礎知識

▶ セレクタ

セレクタは要素を指定する技術。

/* id セレクタ */
#header {
  background-color: #f0f0f0;
}

/* class セレクタ */
.card {
  padding: 16px;
  border-radius: 8px;
}

▶ ボックスモデル

要素をいくつかの型に分ける考え方。

  • block: div, p, h1 など
  • inline: span, a, strong など
  • inline-block: 両者のよいとこ取り

3. 便利なレイアウト技法

▶ Flexbox

要素を並べたり中央揃えしたりするのに最適

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

▶ Grid

美しく整列されたレイアウトを作りたいときに

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

4.Tailwind CSSの活用
Tailwind CSSはユーティリティファーストなフレームワークで、クラス名をすべてのHTML,JavaScriptコンポーネント、およびその他のテンプレートをスキャンしてクラス名を検索し、対応するスタイルを生成して、静的CSSファイルに書き込むことで機能します。
最近流行のCSSフレームワークですが、人によって賛否両論分かれます。なぜならTailwindcssはHTMLに直接書き込むため一文が長くなり可読性が下がるからです。
あなたはどちらですか？

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/src/style.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

4. おわりに

CSSは、複雑なJavaScriptに比べてしばしば後回しにされがちですが、ユーザー体験を握るカギでもあります。 「このUI、使われてるな」と思ってもらえるウェブサイトを目指して、今日からCSSの精密な課題を経験していきましょう！

Discussion