Lesson3-1：ボックス配置の基礎を理解しよう
Lesson3-2：ボックスサイズを変更しよう
Lesson3-3：ボックスを自在に配置しよう
Lesson3-4：画像を自在に配置しよう
Lesson3-5：画像のスタイルを変更しよう
Lesson3-6：背景画像を設定しよう
Lesson3-7：リンクボタンを設置しよう
Lesson3-8：リストとテーブルのスタイルを変更しよう
Lesson3-9：CSS変数を理解しよう
Lesson3-☆1：コピペして使える！カードレイアウト集
Lesson3-☆2：使いやすいHTML+CSSテンプレート6選 ◁今回はココ
Lesson3-☆3：CSSのリセット＆ノーマライズとは？
Web制作の世界では、単にHTMLの構造を作るだけでなく見た目が整ったデザインを実装することが求められます。
しかし「どのようにスタイルを適用すればいいのか」「HTMLとCSSを組み合わせて美しいデザインを作るには？」と悩むことも多いのではないでしょうか？
本記事では、Lesson3（CSS応用編）までの学習を終えた方向けに、すぐにコピペして使える実用的なHTML+CSSテンプレートを厳選してご紹介します。
これらのテンプレートを活用することで、自分のサイトを作る際の基盤として使えたり、コードの書き方の参考にできたりします。
本記事では、以下の6つのテンプレートを紹介します。
- 予約フォーム｜シンプルでおしゃれな予約ページ（無料）
- シンプルなプロフィールページ｜ポートフォリオに最適（会員向け）
- 折り畳みFAQ｜見やすく整理された質問リスト（会員向け）
- 商品カタログページ｜ECサイト風の商品紹介（会員向け）
- ニュース記事のテンプレート｜ブログ記事にも（会員向け）
- お問い合わせフォーム｜デザイン付きフォーム（会員向け）
<<前のページ
HTML/CSSの記事一覧
次のページ>>
予約フォーム（シンプルでおしゃれな予約ページ）
Webサイトで予約機能を提供する場合、見た目が洗練された予約フォームはユーザーの使いやすさに直結します。
フォームが整っていないと、入力しにくかったり、使いにくく感じたりすることがあるため、シンプルで美しいデザインのフォームを用意することが重要です。
ここでは、CSSを適用してデザイン性を高めた予約フォームのテンプレートを紹介します。
良い予約フォームの特徴
- 直感的なデザイン：入力フィールドが分かりやすく整理されている
- 統一感のあるスタイル：背景色やボタンのデザインが統一されており、見た目がすっきり
- 簡単にカスタマイズ可能：色やフォントを変更するだけでサイトのデザインに合わせられる
予約フォームのHTMLコード
以下は、シンプルな予約フォームのHTMLコードです。
フォームには「名前」「日付」「時間」「サービス選択」の項目があり、<form> タグを用いてデータを送信する構造になっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>予約フォーム</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
text-align: center;
}
form {
background: white;
padding: 20px;
width: 50%;
margin: 50px auto;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
input, select {
width: 90%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
input[type="submit"] {
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>予約フォーム</h1>
<form>
<input type="text" placeholder="お名前" required>
<input type="date" required>
<input type="time" required>
<select>
<option value="haircut">ヘアカット</option>
<option value="coloring">カラーリング</option>
<option value="treatment">トリートメント</option>
</select>
<input type="submit" value="予約する">
</form>
</body>
</html>コードの解説
この予約フォームは、以下のような構造になっています。
<form>タグ：フォーム全体を包む要素。action属性を設定すればデータを送信可能。<input>タグ（名前・日付・時間の入力）：ユーザーが入力しやすいよう、適切なtype属性を指定（text、date、time）。<select>タグ（サービス選択）：予約対象のサービスをリストから選択できるように設計。<input type="submit">ボタン：ユーザーが予約内容を送信するためのボタン。
CSSのポイント
- 背景色とフォームのデザイン：
background-colorを利用してフォーム部分を白にし、背景を薄いグレーにすることで視認性を向上。 - フォームの中央配置：
width: 50%で適度な幅を持たせ、margin: 50px autoで中央配置。 - 入力フィールドのスタイリング：
width: 90%でフォーム幅いっぱいに広げ、入力しやすく。paddingやborder-radiusで角を丸くし、柔らかい印象に。
- 送信ボタンのデザイン：
background-color: #007BFF;で目立つボタンを作成。hoverのスタイルを追加し、カーソルを乗せたときに色が変わるように設定。
まとめ
このテンプレートを活用すれば、デザイン性の高い予約フォームを簡単に導入できます。
入力フィールドの追加や色の変更を行うことで、自分のサイトに合ったカスタマイズも可能です。