HTML/CSS入門：Webページが表示される仕組みとプログラミングの第一歩

あなたが今見ているこのWebページも、HTML（HyperText Markup Language）とCSS（Cascading Style Sheets）で作られています。HTMLはWebページの「骨格（構造）」を定義し、CSSは「見た目（デザイン）」を整える言語です。この2つはプログラミング言語の中でも最も入門しやすく、「初めてコードを書く」人に最適な出発点です。

HTML/CSSはJavaScriptのような「計算」や「条件分岐」がなく、「何をどこに置くか」「どんな見た目にするか」を記述するシンプルな言語です。文部科学省が2020年に小学校のプログラミング教育を必修化した際も、HTMLを教材として活用している学校が多くあります。

HTML/CSSをマスターすることで、自分のポートフォリオサイト・学習記録ブログ・サークルや団体のWebサイトを自作できるようになります。就活でも「自分でWebサイトを作れる」というのは、理系・文系問わず評価されるスキルです。

HTML入門：タグの書き方とページ構造の基本

HTMLはタグと呼ばれる記号で文書の構造を定義します。基本的な構造を覚えましょう。

【HTMLの基本構造】　<!DOCTYPE html> → <html> → <head>（ページ情報）→ <body>（表示内容）という4層構造がすべてのHTMLページの基本です。

【よく使うタグ一覧】　見出し（<h1>〜<h6>）・段落（<p>）・リンク（<a href="URL">）・画像（<img src="ファイル名">）・リスト（<ul><li>）・テーブル（<table><tr><td>）・区切り（<div>・<section>・<article>）・フォーム（<form><input><button>）が基本セットです。

【セマンティックHTMLの重要性】　<header>・<nav>・<main>・<footer>・<article>・<section> などのセマンティックタグを使うことで、ページの意味構造が明確になります。SEO（検索エンジン最適化）にも有利で、スクリーンリーダー（視覚障害者向けツール）への対応にもなります。

【実践：最初のHTMLファイルを作る】　メモ帳やVS Codeで index.html ファイルを作り、基本構造を書いてブラウザで開くと自分のWebページが表示されます。この感動が学習継続の原動力になります。

CSS入門：デザインを整えるセレクタ・プロパティ・レイアウトの基本

HTMLで構造を作ったら、CSSでデザインを整えましょう。CSSの基本は「何に（セレクタ）」「どんなスタイルを（プロパティ: 値）」適用するかを記述することです。

【基本文法】　h1 { color: blue; font-size: 32px; } のように、セレクタ（h1）に対してプロパティ（color）と値（blue）を {} 内に書きます。クラスセレクタ（.クラス名）・IDセレクタ（#ID名）を使いこなすことで、特定の要素だけにスタイルを適用できます。

【よく使うプロパティ】　文字色（color）・背景色（background-color）・フォントサイズ（font-size）・余白外側（margin）・余白内側（padding）・枠線（border）・横幅（width）・高さ（height）・角丸（border-radius）が頻出のプロパティです。

【Flexboxレイアウト】　現代のWebデザインでは display: flex; を使ったFlexboxレイアウトが標準です。横並び・縦並び・中央揃えなどを直感的に実現できます。justify-content: center; で水平中央揃え、align-items: center; で垂直中央揃えが基本パターンです。

【レスポンシブデザイン】　スマートフォン・タブレット・PC各サイズに対応させるために、@media (max-width: 768px) { } のようなメディアクエリを使います。現代のWebは「モバイルファースト」が原則で、まずスマホ向けのデザインを作ってから大画面に拡張する設計思想が主流です。

HTML/CSS習得後のポートフォリオ制作：就活・副業に使えるサイトを作る

HTML/CSSが書けるようになったら、自分のポートフォリオサイトを作ることをおすすめします。ポートフォリオは「自己PR + スキル証明 + 成果物」を一覧できる自己紹介ページで、就活・フリーランス案件受注の両方で強力な武器になります。

【ポートフォリオサイトに含めるべきコンテンツ】　自己紹介（名前・学部・強み）・スキルセット（使える言語・ツール）・制作実績（Webサイト・アプリのスクリーンショットとURL）・連絡先（メール・GitHubリンク）の4セクションが基本です。

【公開方法】　GitHub PagesやNetlifyを使えば無料でHTMLサイトをインターネット公開できます。独自ドメイン（.com/.jpなど）を取得すれば、より本格的な印象を与えられます。年間1,000〜2,000円程度で取得できます。

【副業Web制作の相場】　HTML/CSS + 少しのJavaScriptが使えるレベルなら、WordPressを使ったWebサイト制作の副業を受注できます。中小企業のホームページ制作なら1案件5〜20万円が相場で、月2〜3件こなせば10〜40万円の副収入になります。クラウドソーシング（クラウドワークス・ランサーズ）で案件を探せます。