【CSS】レッスン3-S2：見た目が良くて使いやすいHTML+CSSテンプレート6選
Lesson１：HTML入門編
Lesson２：CSS入門編
Lesson３：CSS応用編
・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テンプレート６選 ◁今回はココ
・Lesson3-☆3：CSSのリセット＆ノーマライズとは？
Web制作の世界では、単にHTMLの構造を作るだけでなく見た目が整ったデザインを実装することが求められます。
しかし「どのようにスタイルを適用すればいいのか」「HTMLとCSSを組み合わせて美しいデザインを作るには？」と悩むことも多いのではないでしょうか？
本記事では、Lesson3（CSS応用編）までの学習を終えた方向けに、すぐにコピペして使える実用的なHTML+CSSテンプレートを厳選してご紹介します。
これらのテンプレートを活用することで、自分のサイトを作る際の基盤として使えたり、コードの書き方の参考にできたりします。
HTML/CSSの用語集 も活用しながら、学習を進めましょう。
<<前のページ
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のスタイルを追加し、カーソルを乗せたときに色が変わるように設定。
まとめ
このテンプレートを活用すれば、デザイン性の高い予約フォームを簡単に導入できます。
入力フィールドの追加や色の変更を行うことで、自分のサイトに合ったカスタマイズも可能です。
シンプルなプロフィールページ
Webサイトにおいてプロフィールページは訪問者に自己紹介をする重要な要素です。
ポートフォリオサイトやブログ、ビジネスサイトなどで簡潔に自分の情報を伝えることができます。
ここではHTMLとCSSを使ってシンプルで見やすいプロフィールページのテンプレートを紹介します。シンプルなデザインながら、背景色やレイアウトを工夫し、整った印象を与える構成になっています。
良いプロフィールページの特徴
- 余白とボックスデザインを使い、情報が読みやすいレイアウト
- 視認性の高い背景色と、適切なフォントサイズを採用
- 画像や詳細情報を追加することで、自由にカスタマイズ可能
プロフィールページのHTMLコード
以下のコードを使用することで、画像付きのプロフィールページを作成できます。
<!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: #f4f4f4;
text-align: center;
}
.container {
width: 60%;
background: white;
margin: 50px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
.profile-img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #ddd;
}
h1 {
color: #333;
margin-top: 10px;
}
p {
color: #555;
}
</style>
</head>
<body>
<div class="container">
<img src="profile.jpg" alt="プロフィール画像" class="profile-img">
<h1>山田 太郎</h1>
<p>Web開発者 / デザイナー / フリーランス</p>
<p>HTMLとCSSを活用し、シンプルで使いやすいデザインを作成しています。</p>
</div>
</body>
</html>コードの解説
このページは基本的なHTMLの構造に加えて、CSSで背景や余白を調整し、シンプルながらも整ったデザインに仕上げています。
<div class="container">の中に、名前や自己紹介を配置し、視認性を向上width: 60%でコンテンツの幅を適度に設定し、中央配置background: whiteで背景色を明るくし、コンテンツを強調box-shadowを使って、軽い立体感を加え、ページをより洗練された印象に- フォントと色を調整し、シンプルながらも読みやすいデザインに
デザインのポイント
- 円形のプロフィール画像：
border-radius: 50%を適用し、きれいな円形に加工 - 適度な余白と影：
margin-top: 10pxで余白を追加し、テキストとのバランスを調整 - シンプルで直感的なレイアウト：
background-colorを明るく設定し、清潔感のあるデザインに
カスタマイズのヒント
このテンプレートを使えば簡単にプロフィールページを作成できます。
さらにカスタマイズする場合は、次のような変更を加えることができます。
- 画像サイズの調整：
widthとheightを変更し、大きめのプロフィール画像にする - 色の変更：
borderの色を変更し、デザインのアクセントに - SNSリンクの追加：
<a>タグを使用し、TwitterやGitHubのリンクを追加
まとめ
このプロフィールページテンプレートは画像付きで見やすいデザインになっており、自己紹介ページやポートフォリオサイトでそのまま利用できます。
画像を変更するだけで、誰でも簡単にオリジナルのプロフィールページを作ることが可能です。
FAQ（折りたたみ可能な質問リスト）
Webサイトでは、訪問者がよく持つ疑問に対して、わかりやすく回答を掲載することが重要です。
そのため多くのサイトには「よくある質問（FAQ）」のセクションが設けられています。
このテンプレートでは、クリックすると展開される折りたたみ式のFAQリストを作成します。
HTMLの <details> タグを活用し、CSSでスタイリングすることでシンプルで使いやすいFAQセクションを実現します。
良いFAQリストの特徴
- クリックで開閉できる折りたたみ機能を実装（JavaScript不要）
- スッキリとしたデザインで、質問と回答の一覧をわかりやすく表示
- カスタマイズしやすい構造で、簡単に質問を追加・編集可能
FAQリストのHTMLコード
以下のコードを使用すると、クリックで展開できるFAQセクションを作成できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
text-align: center;
}
.faq-container {
width: 60%;
margin: 50px auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
details {
background: #f1f1f1;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
summary {
font-weight: bold;
}
p {
margin-top: 10px;
color: #555;
}
</style>
</head>
<body>
<div class="faq-container">
<h1>よくある質問（FAQ）</h1>
<details>
<summary>返品は可能ですか？</summary>
<p>商品到着後7日以内であれば可能です。ただし、未使用の状態である必要があります。</p>
</details>
<details>
<summary>配送にはどれくらい時間がかかりますか？</summary>
<p>通常、注文から3〜5営業日以内にお届けします。ただし、地域によっては多少遅れることがあります。</p>
</details>
<details>
<summary>支払い方法は何がありますか？</summary>
<p>クレジットカード、銀行振込、代引きがご利用いただけます。</p>
</details>
</div>
</body>
</html>コードの解説
このFAQリストは<details> タグを活用することで、クリックすると展開・折りたたみができるようになっています。
JavaScriptを使わずに実装できるため、シンプルで扱いやすい構造になっています。
<details>タグ- クリックすると展開・折りたたみができる要素。
- 最初は閉じた状態で表示され、クリックすると詳細が表示される。
<summary>タグ<details>のタイトル部分にあたる。- ここをクリックすると、その中の
<p>タグの内容が展開される。
- CSSによるスタイリング
.faq-containerでFAQ全体のデザインを調整。background: #f1f1f1;で質問部分をグレーの背景にして、クリック可能であることを視覚的に示す。border-radius: 5px;で角を丸くし、柔らかいデザインに。cursor: pointer;を指定し、マウスカーソルを手のアイコンに変更することで、クリックできることを強調。
デザインのポイント
- クリックで簡単に開閉できる
<details>を活用することで、ユーザーが必要な情報のみを表示できる。 - 質問部分を目立たせる
background: #f1f1f1;により、質問と回答の区別がつきやすくなっている。 - シンプルなデザイン 最小限のCSSでデザインされているため、他のWebページにも簡単に組み込みやすい。
カスタマイズのヒント
このFAQリストは、簡単にカスタマイズが可能です。
- 質問を増やす：
<details>タグを増やせば、FAQの項目を簡単に追加できる。 - 色を変更する：
backgroundやcolorを調整して、サイトのデザインに合わせる。 - 開いた状態をデフォルトにする：
<details open>とすると、最初から展開された状態で表示される。
まとめ
このテンプレートを使えば、FAQページを簡単に作成できます。
JavaScriptを使わずにクリックで開閉できるリストを実装できるため、情報を整理しやすく、スッキリしたデザインになります。
商品カタログページ
ECサイトや商品紹介ページでは、ユーザーが視覚的に情報を把握しやすいレイアウトが求められます。
商品を一覧で表示し、それぞれの画像・名前・価格を明確に伝えることで、購入の意思決定をスムーズに進めることができます。
このテンプレートではカード型のデザインを採用し、商品が見やすいレイアウトを作成します。
シンプルなCSSを適用し、均等に並ぶ商品一覧を作成することで、どのデバイスでも使いやすいデザインを実現します。
良い商品カタログの特徴
- カード型のレイアウトで商品を整理し、見やすく配置
- 画像・商品名・価格の組み合わせで、情報を明確に伝える
- シンプルなデザインで、ECサイトやランディングページにも応用可能
商品カタログのHTMLコード
以下のコードを使用すると、シンプルで見やすい商品一覧を作成できます。
<!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;
}
.catalog {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.product {
width: 250px;
background: white;
padding: 15px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
text-align: center;
}
.product img {
width: 100%;
border-radius: 5px;
}
.product h2 {
font-size: 18px;
margin: 10px 0;
}
.product p {
font-size: 16px;
color: #555;
}
.price {
font-weight: bold;
color: #e44d26;
}
</style>
</head>
<body>
<h1>商品一覧</h1>
<div class="catalog">
<div class="product">
<img src="laptop.jpg" alt="ノートパソコン">
<h2>ノートパソコン</h2>
<p class="price">120,000円</p>
</div>
<div class="product">
<img src="smartphone.jpg" alt="スマートフォン">
<h2>スマートフォン</h2>
<p class="price">80,000円</p>
</div>
<div class="product">
<img src="tablet.jpg" alt="タブレット">
<h2>タブレット</h2>
<p class="price">50,000円</p>
</div>
</div>
</body>
</html>コードの解説
この商品カタログでは、商品をカード型に並べることで、スッキリとしたレイアウトを実現しています。
<div class="catalog">で商品リスト全体を囲むdisplay: flex;にすることで、横並びに整列。gap: 20px;を使い、カード間に適度なスペースを確保。flex-wrap: wrap;を設定し、画面が狭い場合は折り返して表示。
<div class="product">で各商品をカードとしてデザインwidth: 250px;で適度なサイズに統一。border-radius: 10px;で角を丸くし、優しい印象に。box-shadowを追加し、立体的なデザインに。
- 商品画像のデザイン
width: 100%;でカードの幅いっぱいに画像を表示。border-radius: 5px;で角を軽く丸め、見た目を整える。
- 商品名と価格のフォント設定
font-size: 18px;で商品名を強調。color: #e44d26;（オレンジ系）を使い、価格を目立たせる。
デザインのポイント
- シンプルなカードデザイン：余白を適度に取り、視認性の高いレイアウトに調整。
- 価格の強調：赤系の色を使い、価格部分が目立つようにデザイン。
- レスポンシブ対応（Flexboxの活用）：画面幅が狭くなると、カードが自動的に折り返す仕組み。（FrexBoxについてはLesson4で詳しく学習します）
カスタマイズのヒント
このテンプレートは、簡単にカスタマイズが可能です。
- 商品数を増やす：
<div class="product">を追加するだけで、商品を増やせる。 - ボタンを追加する：「カートに入れる」「詳細を見る」などのボタンを加えると、ECサイト向けに強化できる。
- フォントやカラーの変更：サイトのデザインに合わせて、フォントサイズやカラーを調整する。
まとめ
この商品カタログテンプレートを活用すれば、シンプルでわかりやすい商品一覧を作成できます。
適度な余白とカードデザインにより、直感的に商品情報を伝えられるため、ECサイトや商品紹介ページに最適です。
ニュース記事のテンプレート
ニュースサイトやブログ記事では、見出し・本文・画像のレイアウトが整理されていることが重要です。
読者が情報を素早く把握できるよう、記事ごとに適切な余白や文字の大きさを設定することで、読みやすいデザインを実現できます。
このテンプレートでは、シンプルで視認性の高いニュース記事ページを作成します。見出し・画像・記事本文を整理し、CSSを適用してすっきりとしたデザインにします。
良いニュース記事ページの特徴
- 視線を誘導しやすいレイアウトで、見出し・画像・本文を配置
- 余白とフォントサイズを適切に調整し、読みやすさを向上
- カスタマイズが容易な構造で、ブログやニュース記事ページとして活用可能
ニュース記事のHTMLコード
以下のコードを使用すると、シンプルで見やすいニュース記事ページを作成できます。
<!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;
}
.article-container {
width: 60%;
margin: 50px auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
text-align: left;
}
.article-title {
font-size: 24px;
color: #333;
}
.article-meta {
font-size: 14px;
color: #777;
margin-bottom: 10px;
}
.article-img {
width: 100%;
border-radius: 5px;
margin-bottom: 15px;
}
.article-content {
font-size: 16px;
color: #555;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="article-container">
<h1 class="article-title">新しいWeb技術が登場</h1>
<p class="article-meta">2024年2月10日 | 記者: 山田 太郎</p>
<img src="news.jpg" alt="ニュース画像" class="article-img">
<p class="article-content">
新しいWeb技術が登場し、開発者の間で注目を集めています。HTMLとCSSの進化により、より美しいデザインと効率的なコードが可能になっています。
今回の技術革新により、開発速度が向上し、ユーザー体験も大きく改善されると予想されています。
</p>
</div>
</body>
</html>コードの解説
このニュース記事のレイアウトは、見出し・メタ情報・画像・本文の順に配置されており、CSSを使って視認性を向上させています。
.article-containerで記事全体を囲むwidth: 60%;で適度な幅に設定し、中央に配置。box-shadowを適用し、軽い立体感を持たせる。
- 見出しとメタ情報
.article-titleにfont-size: 24px;を設定し、目を引く大きさに調整。.article-metaで日付や記者名を小さめのフォント (font-size: 14px;) にして補足情報として表示。
- 画像のデザイン
width: 100%;に設定し、カード内にきれいに収まるよう調整。border-radius: 5px;で角を丸め、やわらかい印象に。
- 本文のスタイル
.article-contentのline-height: 1.6;で行間を適度に広げ、読みやすく。color: #555;にすることで、真っ黒ではなく少し柔らかい印象に。
デザインのポイント
- 記事の情報が一目で伝わる 見出し・メタ情報・本文の順番を整理し、直感的に情報を理解しやすいレイアウトに。
- 画像を大きく配置
width: 100%にすることで画面幅にフィットし、視覚的にインパクトを持たせる。 - 背景色とフォントカラーのバランス
background: white;とcolor: #555;を組み合わせ、長文でも読みやすく。
カスタマイズのヒント
このテンプレートは以下のような変更を加えることで、より多様な用途に活用できます。
- 複数の記事を一覧表示 複数の
.article-containerを並べることで、ニュース一覧ページを作成可能。 - SNS共有ボタンを追加
<a>タグを使い、TwitterやFacebookの共有リンクを設置。 - 記事のカテゴリを追加
.article-metaに「カテゴリ（テクノロジー・エンタメなど）」を追加し、整理しやすくする。
まとめ
このテンプレートを活用すれば、シンプルで視認性の高いニュース記事ページを作成できます。
見出し・画像・本文の配置が整理されており、カスタマイズ次第でブログ記事や企業ニュースにも応用できます。
お問い合わせフォーム（デザイン付き）
Webサイトには訪問者が問い合わせやリクエストを送信できるフォームが欠かせません。
特に、シンプルで見やすく、入力しやすいデザインのフォームは、ユーザーの利便性を高める重要な要素です。
このテンプレートでは美しいお問い合わせフォームを作成し、入力フィールドのデザインを統一することで、使いやすく洗練された見た目に仕上げます。
良いお問い合わせフォームの特徴
- 視認性の高いレイアウトで、フォームの項目がわかりやすい
- 入力フィールドとボタンのデザインを統一し、まとまりのあるスタイルに
- シンプルなスタイルで、どのWebサイトにも適用しやすい
お問い合わせフォームのHTMLコード
以下のコードを使用すると、デザイン性の高いお問い合わせフォームを作成できます。
<!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-container {
background: white;
padding: 20px;
width: 50%;
margin: 50px auto;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
input, textarea {
width: 90%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
textarea {
height: 100px;
}
input[type="submit"] {
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
padding: 12px;
width: 95%;
}
input[type="submit"]:hover {
background-color: #218838;
}
</style>
</head>
<body>
<h1>お問い合わせ</h1>
<div class="form-container">
<form>
<input type="text" placeholder="お名前" required>
<input type="email" placeholder="メールアドレス" required>
<textarea placeholder="お問い合わせ内容" required></textarea>
<input type="submit" value="送信">
</form>
</div>
</body>
</html>コードの解説
このお問い合わせフォームは使いやすさを重視し、視認性の高いデザインになっています。
- フォーム全体のレイアウト
<div class="form-container">でフォーム全体を囲み、中央配置と適切な余白を確保。box-shadowを適用し、背景とコントラストをつけて、視認性を向上。
- 入力フィールド
width: 90%;を指定し、フォーム幅いっぱいに広げて入力しやすく。padding: 10px;で余白をつけ、入力内容が見やすくなるよう調整。border-radius: 5px;で角を丸め、デザインに柔らかさを加える。
- 送信ボタン
background-color: #28a745;（緑色）で、送信ボタンが明確に認識できるように。cursor: pointer;を指定し、ボタンがクリック可能であることを示す。hoverの設定で、カーソルを乗せると色が濃くなり、視覚的なフィードバックを追加。
デザインのポイント
- 統一感のあるフォームデザイン：全体の余白やボックスデザインを調整し、洗練された見た目に。
- シンプルなスタイルでどのサイトにも適用可能：色やフォントを変更するだけで、自分のサイトに合うデザインに調整できる。
- ボタンの視認性を向上：色のコントラストを利用し、送信ボタンが明確に認識できるようにデザイン。
カスタマイズのヒント
このテンプレートは、以下のように変更することで、さらに使いやすくなります。
- 入力項目を増やす：会社名や電話番号の入力欄を追加すると、ビジネス向けのフォームにも対応可能。
- 色を変更する：
background-colorの値を変更し、サイトのテーマカラーに合わせる。 - 確認画面を追加する：JavaScriptを使って、フォーム送信前に入力内容を確認できる機能を加える。
まとめ
このお問い合わせフォームのテンプレートを使えば、シンプルで見やすいデザインのフォームを簡単に作成できます。
余白やボタンのスタイルを工夫し、入力しやすさとデザイン性を両立したフォームになっています。
まとめ
本記事ではWeb制作に役立つ実用的なHTML+CSSテンプレートを6つ紹介しました。
これらのテンプレートは実際のWebサイト制作にそのまま活用できるだけでなく、HTMLとCSSの使い方を学ぶ上でも役立ちます。
今後の学習を通じてさらに実用的なデザインやレイアウトを学び、オリジナルのWebサイトを作れるようになりましょう。
<<前のページ
HTML/CSSの記事一覧
次のページ>>
初めてのWebサイトを作ろう3-☆2
このサイトの Lesson1-1（HTML学習の入り口） かLesson2-1（CSS学習の入り口）から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。
サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」
この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。
- Webサイト制作に挑戦する人はここをクリック！
-
自分だけのWebサイト制作にはベースとなる基本セットが必要になります。
まだ入手していない人はLesson1-1かLesson2-1のページ下部からダウンロードして下さい。
Lesson3-☆2のまとめノートを追加しよう
下記のHTMLコードは、このLesson3-2で紹介した内容を端的にまとめてブラウザ表示するためのコードです。
これをコピーして「MyWebsite3-2.html」という名前で保存し、「lesson3（学習フォルダ）」の中に保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lesson3-☆2</title> <link rel="stylesheet" href="style/styles-lesson3.css"> </head> <body> <header> <h1>Lesson3-☆2：使いやすいHTML/CSSテンプレート６選</h1> </header> <div class="container"> <section> <h2>目的・要点</h2> <p>Lesson3を修了した学習者は、<strong>HTMLとCSSを組み合わせて実用的なデザインを作成する力</strong>を身につけました。しかし、実際のWeb制作では、「どのようにスタイルを適用すればいいのか」「美しいデザインを作るにはどうすればいいのか」といった課題に直面することが多いです。</p> <p>本レッスンでは、Lesson3で学んだCSSの知識を活用し、すぐにコピペして使える<strong>実用的なHTML+CSSテンプレート</strong>を紹介しました。これにより、学習者は自身のWebサイト制作に活用できる具体的な基盤を得ることができます。</p> </section> <section> <h2>このレッスンで学習した内容</h2> <h3>予約フォーム</h3> <ul> <li>シンプルで洗練されたデザインのフォームを作成。</li> <li>入力フィールドやボタンのデザインを統一し、使いやすさを向上。</li> <li><code>form</code> タグや <code>input</code> タグの適切な使い方。</li> </ul> <h3>シンプルなプロフィールページ</h3> <ul> <li>視認性の高いプロフィールページを作成。</li> <li><code>div</code> を活用し、情報を整理して見やすくする。</li> <li>画像やテキストのデザインを統一し、整ったレイアウトを実現。</li> </ul> <h3>折り畳みFAQ</h3> <ul> <li><code>details</code> タグを使って、クリックで開閉できるFAQを作成。</li> <li><code>summary</code> タグで質問を表示し、クリックで回答を展開。</li> <li>CSSでデザインを整え、ユーザーにとって使いやすいUIを実現。</li> </ul> <h3>商品カタログページ</h3> <ul> <li><code>flexbox</code> を使ってカード型のレイアウトを作成。</li> <li>画像、商品名、価格を見やすく配置し、ECサイト風のデザインに。</li> <li><code>box-shadow</code> などのCSS効果を活用し、立体感のあるデザインを実現。</li> </ul> <h3>ニュース記事のテンプレート</h3> <ul> <li>記事タイトル、メタ情報、本文、画像のバランスを整えたレイアウトを作成。</li> <li><code>box-shadow</code> を使い、記事部分を目立たせる。</li> <li><code>font-size</code> や <code>line-height</code> を調整し、可読性を向上。</li> </ul> <h3>お問い合わせフォーム</h3> <ul> <li>シンプルでわかりやすいフォームを作成。</li> <li><code>input</code> や <code>textarea</code> のデザインを統一し、視認性を向上。</li> <li><code>hover</code> 効果を追加し、送信ボタンの操作性を向上。</li> </ul> </section> <section> <h2>トピック・豆知識</h2> <ul> <li><strong><code>box-shadow</code> の活用：</strong>影をつけることで、デザインの立体感を向上させる。</li> <li><code>box-shadow: 0px 0px 10px rgba(0,0,0,0.2);</code> のように使う。</li> <li><strong><code>details</code> タグを使ったFAQ：</strong>JavaScript不要で折り畳み機能を実装できる便利なHTML要素。</li> <li><code>details open</code> を指定すると、デフォルトで開いた状態にできる。</li> <li><strong>Flexboxでのレイアウト調整：</strong><code>display: flex;</code> を使い、簡単に横並び配置を実現。</li> <li><code>gap: 20px;</code> で適度な間隔を設定し、整ったデザインに。</li> </ul> </section> <section> <h2>まとめ</h2> <p>このレッスンでは、実際のWeb制作に活用できる<strong>実用的なHTML+CSSテンプレート</strong>を紹介しました。これらのテンプレートを活用することで、学習者はWebデザインの基盤を構築し、より高度なサイト作成に挑戦できるようになります。</p> </section> <p><a href="../MyWebsite.html">トップページへ戻る</a></p> </div> <footer> <p>© 初心者のためのプログラミングテキスト＆問題集</p> </footer> </body> </html>これでLesson3-☆2の作業は完了です。
継続は力なり。次のLessonも、引き続き頑張ってください^^