用語集 › 🕸️ Web › HTML / CSS
【えいちてぃーえむえる しーえすえす】

HTML / CSS とは？

💡 HTMLで「骨格」を作り、CSSで「服」を着せる
📌 このページのポイント
HTML（構造）+ CSS（見た目）= Webページ HTML（構造） <h1>タイトル</h1> <p>本文...</p> <button>送信</button> 骨組み・内容を定義 家の「設計図」 + CSS（見た目） color: blue; font-size: 16px; margin: 10px; 色・配置・装飾を定義 家の「内装・外装」 = Webページ 送信 完成したページ HTMLは「何を表示するか」、CSSは「どう表示するか」を担当 ※ JavaScriptを加えると「動き」も表現できる
HTML（構造）+ CSS（見た目）でWebページが完成
ひよこ ひよこ

HTMLって何をするの？

ペンギン先生 ペンギン先生

Webページの「構造」を定義するよ。

で見出し、

で段落、でリンク、で画像を配置する。HTMLだけだとテキストが上から並んだだけの見た目になるから、CSSで色やレイアウトを整えるんだ。HTML＝骨格、CSS＝服と化粧、JavaScript＝動きと覚えよう

ひよこ ひよこ

CSSのレイアウトが難しい…

ペンギン先生 ペンギン先生

Flexbox と CSS Grid を覚えれば、ほとんどのレイアウトが実現できるよ。Flexboxは1方向（横並びor縦並び）の配置に強く、Gridは2次元のグリッドレイアウトに強い。floatやpositionで頑張る時代は終わったから、この2つに集中して学ぼう

ひよこ ひよこ

レスポンシブデザインって？

ペンギン先生 ペンギン先生

PCでもスマホでもタブレットでも見やすいように、画面サイズに応じてレイアウトを変える設計だよ。CSS Media Query（@media (max-width: 768px) { ... }）で画面幅に応じたスタイルを適用する。現在はモバイルファースト（小画面から設計して大画面に拡張）が主流だね

ひよこ ひよこ

CSSフレームワークは使うべき？

ペンギン先生 ペンギン先生

Tailwind CSS（ユーティリティクラスベース）が今一番人気だよ。「class="bg-blue-500 text-white p-4 rounded"」のようにHTML内にスタイルを書く。Bootstrap（コンポーネントベース）も根強い人気がある。CSS力に自信がないなら活用すべきだけど、基本のCSS知識は必須だよ

ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「HTML/CSS」って出てきたら「Webページの構造と見た目を作る2つの言語」と思えればだいたいOK！
📖 おまけ：英語の意味
「HyperText Markup Language / Cascading Style Sheets」 ＝ ハイパーテキストマークアップ言語 / カスケーディングスタイルシート
💬 HTMLが「骨格」、CSSが「装飾」。この2つでWebページの見た目が決まるよ
🔗 あわせて読みたい
📝 この用語に関連するコラム
← 用語集にもどる