HTMLとCSSとは?Web制作の第一歩を初心者向けにわかりやすく解説

Webサイトは何でできているのか――答えは意外なほどシンプルで、HTMLとCSS(+JavaScript)というたった3つの言語が世界中のWebページの土台です。

この記事では、Web制作の第一歩として、HTMLとCSSの役割・基本の書き方・今日から始める練習方法を解説します。プログラミング未経験でも大丈夫。この2つは「プログラミング言語」というより「文書の書き方のルール」に近い、入門に最適な題材です。

役割分担:家づくりに例える

HTMLが柱と間取り(構造)、CSSが内装と外壁(見た目)、JavaScriptが電気設備(動き)。まずHTMLとCSSの2つを覚えれば、静的なWebページは自由に作れるようになります。JavaScriptは その次のステップで構いません。

HTMLの基本:タグで意味づけする

HTMLは、文章を<タグ>で囲んで「これは見出し」「これは段落」と意味づけしていく言語です。

• <h1>〜<h6>:見出し(h1が最上位)
• <p>:段落
• <a href="URL">:リンク
• <img src="画像" alt="説明">:画像
• <ul><li>:箇条書き

重要なのは、タグは「見た目」ではなく「意味」を表すということ。見出しをh1にするのは大きく表示するためではなく、「これがこのページの主題だ」と検索エンジンや読み上げソフトに伝えるためです。実はこれがSEOの土台でもあります(SEO基本の記事参照)。

CSSの基本:選んで、飾る

CSSは「どこを(セレクタ)、どう飾るか(プロパティ)」を並べていく言語です。h1 { color: blue; }なら「h1見出しを青色に」という意味。よく使うプロパティはひと握りです。

• color / background-color:文字色・背景色
• font-size / font-weight:文字の大きさ・太さ
• margin / padding:外側・内側の余白
• display: flex:横並びレイアウトの主役

今日から始める練習方法

1. メモ帳でもOK、できればVS Code(無料)を用意(エディタの設定は別記事で解説予定)
2. 「index.html」を作り、図のコードを手打ちする(コピペではなく手打ちが上達の近道)
3. ブラウザにファイルをドラッグして表示→CSSを書き換えて再読み込み→変化を見る、を繰り返す
4. 自己紹介ページを1枚作ってみる:見出し・写真・好きなものリスト・リンク。これだけで主要タグを一通り使えます

学習サイトのブラウザ演習も便利ですが、「自分のファイルをブラウザで開く」体験がWeb制作の実感を作ります。ぜひローカルで試してください。

WordPressとの関係

「WordPressがあるならHTML/CSS不要では?」と思うかもしれません。実際は逆で、HTMLとCSSがわかるとWordPressの自由度が跳ね上がります。装飾の微調整、テーマのカスタマイズ、表示崩れの自力解決――ブログ運営者にとって最も費用対効果の高い基礎教養です。

開発者ツールを開けば、答えは画面の中にある

HTMLとCSSの学習でいちばん効率がいいのは、教材を読むことではなく、実際のサイトの中身を見ることです。ブラウザに標準で入っている開発者ツールで、今見ているページの構造をそのまま読めます。

開き方はF12、または右クリックから「検証」。使うのは3つの機能だけです。

つまずきの9割は「ボックスモデル」で説明できる

「余白が思った通りにならない」「要素が横に並ばない」。初学者の悩みのほとんどは、要素が箱として扱われているという前提を知らないことから来ます。

すべての要素は、内側から順に4つの層でできています。

ここで最初に覚えるべき設定が1つあります。box-sizing: border-box; です。これを指定しないと、「幅300pxにしたのに、paddingを足したら320pxになった」という現象が起きます。指定すれば、paddingとborderを含めて300pxになります。

実務では、CSSの先頭に次の3行を書くのが定番です。これだけで、レイアウトの事故が大幅に減ります。

並べ方は、Flexboxを1つ覚えれば足りる

要素を横に並べる方法は歴史的にいくつもありますが、現在はFlexboxだけ覚えれば、初学者が必要とする配置はほぼ実現できます。floatやtableを使ったレイアウトは、もう学ぶ必要がありません。

この6つで、ヘッダーのロゴとメニューの配置、カードの横並び、ボタンとアイコンの中央揃えといった、実際に必要になる場面の大半が書けます。格子状に並べたくなったときに、初めてGridを学べば十分です。

スマホ対応は、2行から始められる

レスポンシブ対応は難しそうに見えますが、最初にやることは2つだけです。

そのうえで、画面幅によって見た目を変えたい場合にメディアクエリを使います。ただし、Flexboxのflex-wrap: wrap;とgapを使っていれば、メディアクエリなしでもある程度は自然に折り返してくれます。いきなり細かい分岐を書くより、まずは折り返しで対応できる範囲を探すほうが、コードが単純に保てます。

確認は、開発者ツールのデバイス表示切り替え（スマホのアイコン）で行えます。実機がなくても、幅を変えながら崩れを確認できます。

学ぶ順番と、飛ばしていいもの

HTMLとCSSは範囲が広いので、優先順位が重要です。

次に進むなら、動きを付けるJavaScriptか、サイトを公開する側の知識です。学習全体の道筋はプログラミング独学ロードマップに、詰まったときの調べ方はエラーが解決できないときの調べ方にまとめています。

学習を続けるうえでは、先に「何ができたら達成か」を決めておくと迷いません。決め方はプログラミング独学の目標の立て方にまとめています。

CSSで色を指定するとき、HEXとRGBとHSLの相互変換や、文字が読めるかのコントラスト比の確認には色コード変換が使えます。コード例をページに載せる際の変換はHTMLエスケープです。

最初に作ると身につくもの

文法を覚えるより、小さいものを1つ完成させるほうが定着します。

「公開する」まで含めて1周してください。手元で表示できることと、他人が見られる状態にすることの間には、意外と多くの学びがあります。

つまずいたときの調べ方

ブラウザの開発者ツール（F12キー）を早い段階で使えるようにしてください。要素を選ぶと、どのCSSが効いていて、どれが上書きされているかが色分けで見えます。「なぜか反映されない」の原因は、たいていここで分かります。

エラーの調べ方はエラーが解決できないときの調べ方にまとめています。

まとめ

HTMLは構造、CSSは見た目。たった2つのルールを覚えるだけで、Webページは自分の手で作れます。まずは自己紹介ページ1枚から。その小さな1歩が、Web制作・ブログカスタマイズ・プログラミングすべての入口になります。