HTML/CSSを学び始めたら、次にやることは実際に手を動かしてページを作ることです。
入門教材を読むだけでも基本は分かりますが、自分で作ってみると、タグの使い方やCSSの指定方法がかなり理解しやすくなります。
この記事では、HTML/CSS初心者が最初に作る練習サイトとしておすすめの内容と、作る順番をまとめます。
最初は難しいサイトを作らなくていい
HTML/CSSを始めたばかりの頃は、いきなりおしゃれな企業サイトや本格的なポートフォリオを作ろうとしなくて大丈夫です。
最初から完成度の高いデザインを目指すと、何から手をつければいいか分かりにくくなります。
まずは、HTMLでページの構造を作り、CSSで見た目を整える流れを理解することが大事です。
そのため、最初に作るサイトはシンプルなもので十分です。
初心者におすすめなのは自己紹介ページ
HTML/CSS初心者が最初に作るなら、自己紹介ページがおすすめです。
自己紹介ページは、必要な要素が分かりやすく、HTML/CSSの基本を練習しやすいからです。
たとえば、見出し、文章、画像、リスト、リンク、ボタンなどを自然に使うことができます。
また、あとから内容を追加すれば、ポートフォリオサイトの土台にもできます。
自己紹介ページに入れる内容
最初の自己紹介ページには、次のような内容を入れると作りやすいです。
- 名前またはニックネーム
- 簡単な自己紹介文
- 学習中の言語
- 好きなことや得意なこと
- 今後作ってみたいもの
- GitHubやSNSへのリンク
最初から全部を入れる必要はありません。
まずは、タイトル、自己紹介文、学習中の言語、リンクの4つくらいから始めても大丈夫です。
HTMLで作る部分
HTMLでは、ページの中身や構造を作ります。
自己紹介ページなら、次のような要素を使います。
- 見出し：h1、h2
- 文章：p
- リスト：ul、li
- リンク：a
- 画像：img
- まとまり：div、section
たとえば、簡単な自己紹介部分は次のように書けます。
<section class="profile">
<h1>自己紹介</h1>
<p>こんにちは。Web制作を学習中です。</p>
<h2>学習中の言語</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>このように、HTMLでは「何を表示するか」を書いていきます。
CSSで整える部分
CSSでは、HTMLで作った内容の見た目を整えます。
最初は、次のような指定ができれば十分です。
- 文字の色
- 文字の大きさ
- 背景色
- 余白
- 横幅
- 中央寄せ
- 枠線
たとえば、自己紹介ページの見た目は次のように整えられます。
body {
font-family: sans-serif;
background-color: #f5f5f5;
color: #333;
}
.profile {
max-width: 700px;
margin: 40px auto;
padding: 24px;
background-color: #fff;
border-radius: 8px;
}
h1 {
color: #1f5f99;
}
li {
margin-bottom: 8px;
}CSSを少し書くだけでも、ページの印象はかなり変わります。
最初に作るページ構成
自己紹介ページを作るなら、最初は次の構成で十分です。
- ヘッダー
- 自己紹介
- 学習中のスキル
- 作ってみたいもの
- リンク
この構成なら、HTML/CSSの基本をかなり練習できます。
慣れてきたら、プロフィール画像、ボタン、カード型のデザインなどを追加すると、さらに練習になります。
練習で意識すること
最初の練習では、デザインの完成度よりも、HTMLとCSSの役割を理解することを意識します。
特に、次の点を確認しながら作ると学びやすいです。
- 見出しと本文を分けられているか
- リストを正しく使えているか
- リンクを設定できているか
- CSSで余白を調整できているか
- 背景色や文字色を変更できているか
- 中央寄せができているか
見た目が少し崩れても問題ありません。
むしろ、崩れた部分を直すことでCSSの理解が深まります。
慣れたら追加したい機能
基本の自己紹介ページが作れたら、少しずつ機能やデザインを追加していきます。
- プロフィール画像を入れる
- ボタン風のリンクを作る
- スキル一覧をカード型にする
- スマホでも見やすいデザインにする
- JavaScriptでメニューを開閉する
最初から全部を入れる必要はありません。
1つ作って、1つ改善する流れで進めると続けやすいです。
ポートフォリオにつなげる方法
自己紹介ページは、あとからポートフォリオサイトに発展させることができます。
ポートフォリオにするなら、次の内容を追加します。
- 作ったサイトの紹介
- 使用した技術
- 制作で工夫した点
- GitHubのリンク
- お問い合わせフォーム
最初に作った自己紹介ページを残しておくと、自分の成長も分かりやすくなります。
完成度が低くても、学習の記録として残しておく価値があります。
HTML/CSSの練習で避けたいこと
HTML/CSSの練習では、最初から細かいデザインにこだわりすぎない方が進めやすいです。
特に、次のような状態になると手が止まりやすくなります。
- 最初から完璧なデザインを作ろうとする
- おしゃれなサイトを丸ごと真似しようとする
- CSSの細かい指定を全部覚えようとする
- 作る前に教材だけを見続ける
最初は、簡単なページを作って、少しずつ直していく方が学びやすいです。
まとめ
HTML/CSS初心者が最初に作る練習サイトとしては、自己紹介ページがおすすめです。
自己紹介ページなら、見出し、文章、リスト、リンク、画像、余白、色など、HTML/CSSの基本を練習できます。
最初から難しいサイトを作る必要はありません。
まずはシンプルな1ページを作り、そこから少しずつデザインや機能を追加していきましょう。
