HTML / CSSとは何ですか？

HTMLはWebページの構造を定義するマークアップ言語、CSSは見た目を装飾するスタイルシート言語。Webの基盤技術。

HTML / CSSのポイントは？

HTML は文書の構造（見出し、段落、リスト、リンク）を定義。CSS は色、レイアウト、フォント、アニメーションを制御。レスポンシブデザイン（PC・スマホ両対応）はCSS Media Queryで実現。HTML5 で動画・音声・描画APIなどが標準化

【えいちてぃーえむえるしーえすえす】

HTML / CSS とは？

💡 HTMLで「骨格」を作り、CSSで「服」を着せる

📌 このページのポイント

HTML は文書の構造（見出し、段落、リスト、リンク）を定義
CSS は色、レイアウト、フォント、アニメーションを制御
レスポンシブデザイン（PC・スマホ両対応）はCSS Media Queryで実現
HTML5 で動画・音声・描画APIなどが標準化

HTML（構造）+ CSS（見た目）でWebページが完成

ひよこ

HTMLって何をするの？

ペンギン先生

Webページの「構造」を定義するよ。<h1>で見出し、<p>で段落、<a>でリンク、<img>で画像を配置する。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ページの見た目が決まるよ

← 用語集にもどる