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

HTML / CSS とは？

最終更新: 2026年10月8日

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

HTMLはWebページの内容と構造を表すマークアップ言語、CSSは色・文字・配置などの表示を指定するスタイルシート言語。見出しや段落をHTMLで示し、CSSで見やすく整える。

📌 このページのポイント

内容は同じでも、CSSで色・余白・文字の大きさなどを変えられます。HTMLは内容の意味に合わせて使います。

ひよこ

HTMLって何をするの？

ペンギン先生

「ここは見出し」「ここは段落」「ここはリンク」と、内容の意味と構造を表すよ。たとえばh1という要素で主な見出し、pで段落を示す。文字を大きくするためだけではなく、文書の役割に合う要素を使うんだ。

ひよこ

CSSがないと何も表示されない？

ペンギン先生

HTMLだけでも表示されるよ。ブラウザには標準のスタイルがあり、見出しやリンクなどを区別してくれる。その表示を、CSSで色・文字の大きさ・余白・配置などに合わせて整えるんだ。

ひよこ

どんなふうに組み合わせるの？

ペンギン先生

HTMLに見出し「お知らせ」と本文を用意し、CSSで見出しを青色にする、カードに余白を付ける、といった形だよ。同じ内容でもCSSを変えれば見た目を変えられる。HTMLの意味とCSSの表示を分けて考えると理解しやすいね。

ひよこ

スマホでも見やすくするには？

ペンギン先生

幅に合わせて縮んだり折り返したりする配置を作るよ。FlexboxやGridの柔軟な配置に加え、メディアクエリーで条件に応じて表示を変えられる。画像や文字の大きさも含め、実際の小さい画面で確認しよう。

ひよこ

ペンギン先生

必須ではないよ。部品やスタイルをそろえる助けになるけれど、サイトに必要な設計やチームの使い方で選ぶんだ。どの道具を使っても、HTMLの意味やCSSの基本を理解すると、見た目が崩れたときにも直しやすいよ。

まとめ：ざっくりこれだけ覚えればOK！

「HTML/CSS」って出てきたら「Webページの内容・構造と見た目を作る二つの言語」と思えばだいたいOK！

📖 おまけ：英語の意味

「HyperText Markup Language / Cascading Style Sheets」＝ハイパーテキストのマークアップ言語 / 段階的に適用されるスタイルシート

💬 HTMLは内容の意味や構造、CSSは表示方法を指定するよ。同じHTMLにも、違うCSSを適用できるんだ。

参考資料