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:横並びレイアウトの主役
今日から始める練習方法
- メモ帳でもOK、できればVS Code(無料)を用意(エディタの設定は別記事で解説予定)
- 「index.html」を作り、図のコードを手打ちする(コピペではなく手打ちが上達の近道)
- ブラウザにファイルをドラッグして表示→CSSを書き換えて再読み込み→変化を見る、を繰り返す
- 自己紹介ページを1枚作ってみる:見出し・写真・好きなものリスト・リンク。これだけで主要タグを一通り使えます
学習サイトのブラウザ演習も便利ですが、「自分のファイルをブラウザで開く」体験がWeb制作の実感を作ります。ぜひローカルで試してください。
WordPressとの関係
「WordPressがあるならHTML/CSS不要では?」と思うかもしれません。実際は逆で、HTMLとCSSがわかるとWordPressの自由度が跳ね上がります。装飾の微調整、テーマのカスタマイズ、表示崩れの自力解決――ブログ運営者にとって最も費用対効果の高い基礎教養です。
よくある質問
Q. HTMLとCSSはプログラミング言語ですか?
A. 厳密には「マークアップ言語」と「スタイルシート言語」で、条件分岐や計算は行いません。だからこそ挫折しにくく、Web系プログラミング(JavaScript)への最高の助走になります。
Q. どのくらいで身につきますか?
A. 基本タグとCSSの主要プロパティは、毎日30分の練習で2〜4週間もあれば「簡単なページを自作できる」レベルに到達します。完璧な暗記は不要で、調べながら書くのが実務でも普通です。
Q. 次は何を学べばいいですか?
A. ①CSSレイアウト(flex/grid)を深める→②JavaScriptで動きをつける→③WordPressテーマの構造を覗く、が定番ルートです。全体像はプログラミング独学ロードマップをご覧ください。
まとめ
HTMLは構造、CSSは見た目。たった2つのルールを覚えるだけで、Webページは自分の手で作れます。まずは自己紹介ページ1枚から。その小さな1歩が、Web制作・ブログカスタマイズ・プログラミングすべての入口になります。