これまで、Webサイトの「骨組み」を作るHTMLと、「見た目」を整えるCSSについて学んできました。今回は、いよいよこの二つの魔法を組み合わせて、あなただけのWebページを実際に作ってみましょう。
「難しそう…」と感じるかもしれませんが、大丈夫です。今回は、たった一つのファイルを使って、シンプルな自己紹介ページを作成する手順を、ステップバイステップで解説します。
ステップ1：HTMLファイルを作成する
まずは、パソコンにメモ帳やテキストエディタ（※1）を開いてください。そして、以下のHTMLコードをそのままコピー＆ペーストしてください。
※1：Windowsなら「メモ帳」、Macなら「テキストエディット」が最初から入っています。より高機能な「Visual Studio Code（VS Code）」もおすすめです。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私の自己紹介</title>
</head>
<body>
<h1>私の自己紹介ページ</h1>
<img src="https://via.placeholder.com/400" alt="あなたの写真">
<h2>プロフィール</h2>
<p>こんにちは！私の名前は〇〇です。プログラミングの勉強を始めたばかりですが、少しずつできることが増えてきて楽しいです。</p>
<h2>趣味</h2>
<ul>
<li>プログラミング</li>
<li>読書</li>
<li>映画鑑賞</li>
</ul>
</body>
</html>
コードを貼り付けたら、ファイル名を「index.html」として、デスクトップなどに保存してください。
ステップ2：ファイルを開いてみよう
保存した「index.html」ファイルをダブルクリックして開いてみましょう。すると、ブラウザ（ChromeやSafariなど）でWebページとして表示されるはずです。
今はまだ、文字や画像がただ並んでいるだけの、シンプルなページに見えると思います。ここからCSSを使って、おしゃれにしていきます。
ステップ3：CSSで装飾をしよう
次に、スタイルを加えてみましょう。先ほど保存した「index.html」ファイルを、もう一度テキストエディタで開いてください。
そして、<head>タグの中に、以下の<style>タグを追加します。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私の自己紹介</title>
<style>
body {
background-color: #f0f0f0;
font-family: sans-serif;
text-align: center;
}
h1 {
color: #333;
margin-top: 50px;
}
img {
border: 5px solid #fff;
border-radius: 50%;
}
ul {
list-style-type: none;
padding: 0;
}
</style>
</head>
<body>
<h1>私の自己紹介ページ</h1>
<img src="https://via.placeholder.com/400" alt="あなたの写真">
<h2>プロフィール</h2>
<p>こんにちは！私の名前は〇〇です。プログラミングの勉強を始めたばかりですが、少しずつできることが増えてきて楽しいです。</p>
<h2>趣味</h2>
<ul>
<li>プログラミング</li>
<li>読書</li>
<li>映画鑑賞</li>
</ul>
</body>
</html>
コードを修正したら、上書き保存してください。
ステップ4：変化を確認しよう！
ブラウザに戻り、ページを再読み込み（更新ボタンをクリック）してみましょう。
どうですか？さっきとは全然違う、おしゃれなWebページに変わっているはずです。背景に色がつき、文字が中央に寄り、画像が丸くなり、リストの記号が消えましたね。
これが、HTMLとCSSの力を組み合わせた結果です。
まとめ：第一歩を踏み出せたあなたへ
初めてのWebページ作り、お疲れ様でした！今回の体験で、プログラミングは魔法の呪文ではなく、一つひとつの命令を組み立てていく、とても楽しい作業だと感じてもらえたら嬉しいです。
次回からは、Webサイトをさらに便利にするJavaScriptという言語について、解説していきます。お楽しみに！
