初心者でも簡単に使える、HTML＆CSSのサンプルコードを探していますか？プログラミングの学習を始めたばかりの方にとって、実際のコード例を見ながら学習を進めることは非常に効果的です。
この記事では、Webサイト作成に役立つ、コピペで簡単に使えるHTML＆CSSのサンプルコード30選を厳選して紹介します。これらのコードを使用することで、初心者でもプロのようなデザインのサイトを作成する第一歩を踏み出すことができます。
SEOの観点からも、適切なHTMLとCSSの実装はサイトのパフォーマンスやユーザビリティに大きく影響します。そのため、ここで紹介するサンプルコードは、SEOフレンドリーなサイト作成の基盤としても活用できます。
それでは、初心者でも簡単に理解できるよう、各サンプルコードの解説とともに、あなたのWeb制作学習をサポートしていきましょう！
- 1. 基本的なテキストスタイル
- 2. ホバーエフェクト付きのボタン
- 3. シンプルなカードデザイン
- 4. アコーディオンメニュー
- 5. ドロップダウンメニュー
- 6. カードデザイン
- 7. モーダルウィンドウ
- 8. ツールチップ
- 9. タブメニュー
- 10. パララックススクローリング
- 11. フィックスされたサイドバー
- 12. サイドバー付きのレスポンシブメニュー
- 13. レスポンシブなグリッドレイアウト
- 14. スライダー・カルーセル
- 15. プログレスバー
- 16. ブレッドクラム
- 17. フッターの社交メディアアイコン
- 18. ページトップへ戻るボタン
- 19. サイドバーのナビゲーションメニュー
- 20. レスポンシブデザインのためのメディアクエリ
- まとめ
1. 基本的なテキストスタイル
説明:
シンプルながらも読みやすいテキストデザインは、サイトの可読性を高める要素の一つです。以下は、基本的なテキストスタイルを適用するためのサンプルコードとなります。
HTMLコード:
<p class="styled-text">これはスタイルを適用したテキストです。</p>
CSSコード:
.styled-text {
color: #333;
font-size: 16px;
line-height: 1.5;
}
CSSコードの説明:
このCSSコードには、以下の3つのプロパティが含まれています。
color: #333; – テキストの色をダークグレーに設定します。
font-size: 16px; – テキストのフォントサイズを16ピクセルに設定します。
line-height: 1.5; – テキストの行の高さを1.5倍に設定します。これにより、テキスト間のスペースが適切に確保され、読みやすさが向上します。
注意点:
CSSを適用する際、特定のテキストだけにスタイルを当てたい場合は、そのテキストを特定のクラス名で囲み、そのクラス名に対してスタイルを定義するようにしてください。この例では、”styled-text”というクラス名を使用していますが、必要に応じて変更しても問題ありません。
2. ホバーエフェクト付きのボタン
説明:
ユーザーの注目を引くボタンは、ウェブサイトにおいて重要な要素の一つです。以下は、マウスオーバー時のホバーエフェクト付きのボタンデザインを示すサンプルコードです。
HTMLコード:
<button class="hover-button">Click Me</button>
CSSコード:
.hover-button {
background-color: #007BFF;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.hover-button:hover {
background-color: #0056b3;
}
CSSコードの説明:
1. background-color: #007BFF; – ボタンの背景色を設定。
2. color: white; – ボタンのテキストカラーを白に設定。
3. border: none; – ボタンの境界線を非表示に。
4. border-radius: 5px; – ボタンの角を丸める。
5. transition: background-color 0.3s; – 背景色の遷移効果を0.3秒で適用。
6. .hover-button:hover – ボタンにマウスオーバーした際のスタイル。
注意点:
ボタンのデザインはサイトの全体的なテーマやデザインと整合性を持たせることが重要です。また、ホバーエフェクトを追加する際は、過度に派手にするのではなく、ユーザーの操作を補助する形での利用を心がけましょう。
3. シンプルなカードデザイン
説明:
カード型のデザインは、ウェブサイトやアプリの中で頻繁に使用される要素の一つです。以下は、基本的なカードデザインのサンプルコードです。
HTMLコード:
<div class="card">
<img src="path-to-image.jpg" alt="Image description" class="card-image">
<h3>Card Title</h3>
<p>Card description.</p>
</div>
CSSコード:
.card {
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
width: 200px;
}
.card-image {
width: 100%;
height: auto;
}
CSSコードの説明:
1. border: 1px solid #ddd; – カードの境界線を設定。
2. border-radius: 5px; – カードの角を丸める。
3. .card-image – カード内の画像に適用するスタイル。画像をカードの幅に合わせてリサイズ。
注意点:
カードの画像は適切なalt属性を追加して、アクセシビリティを向上させることが望ましいです。また、カードの幅やパディングはコンテンツやレイアウトに応じて調整することができます。
4. アコーディオンメニュー
説明:
アコーディオンメニューは、情報をコンパクトに表示し、必要な項目だけを展開して閲覧するためのデザインパターンです。以下は、シンプルなアコーディオンメニューのサンプルコードです。
HTMLコード:
<button class="accordion">Section 1</button>
<div class="panel">
<p>Section 1 content.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Section 2 content.</p>
</div>
CSSコード:
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
CSSコードの説明:
1. `.accordion` – メニューボタンのスタイル。ベースの背景色やテキスト色、パディングを設定。
2. `.panel` – 非表示状態のコンテンツ部分のスタイル。必要に応じてJavaScriptやjQueryを使用して表示・非表示を切り替える。
注意点:
アコーディオンの動作には、JavaScriptやjQueryのスクリプトが必要となります。サンプルではスタイルのみの提供となっているので、動作させる場合は追加のスクリプトの導入を検討してください。
5. ドロップダウンメニュー
説明:
ドロップダウンメニューは、親要素をクリックまたはホバーすることで、関連する子要素を表示するUIデザインです。以下は、基本的なドロップダウンメニューのサンプルコードです。
HTMLコード:
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>
</div>
</div>
CSSコード:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropbtn:hover .dropdown-content {display: block;}
CSSコードの説明:
1. `.dropdown` – 親要素。リンクやボタンなど、メニューのトリガーとなる要素を含む。
2. `.dropdown-content` – 子要素。デフォルトでは非表示で、親要素のホバー時に表示される。
注意点:
ドロップダウンメニューは、小さな画面やモバイルデバイスでの操作を考慮し、レスポンシブデザインの適用が必要となる場合があります。
6. カードデザイン
説明:
カードデザインは、情報を整理しやすく、ユーザーにとって読みやすい形式で表示するためのデザインパターンです。以下は、シンプルなカードデザインのサンプルコードです。
HTMLコード:
<div class="card">
<img src="image.jpg" alt="Sample Image" class="card-img">
<h3>Card Title</h3>
<p>Card description and details.</p>
</div>
CSSコード:
.card {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 16px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card-img {
width: 100%;
border-radius: 8px 8px 0 0;
}
CSSコードの説明:
1. `.card` – カードの基本的なスタイル。ボーダーやシャドウを付けて浮き出た感じを出しています。
2. `.card-img` – カード内の画像。上部に配置し、角を丸くするスタイルを適用。
注意点:
使用する画像のサイズやアスペクト比に注意し、サイトのレイアウトやデザインに適したサイズ・形式の画像を使用することを推奨します。
7. モーダルウィンドウ
説明:
モーダルウィンドウは、ユーザーの操作を一時的に中断して、重要な情報や選択を求めるためのポップアップウィンドウです。以下は、ベーシックなモーダルウィンドウのサンプルコードです。
HTMLコード:
<button id="modalBtn">Open Modal</button>
<div class="modal" id="myModal">
<div class="modal-content">
<span class="close-btn">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
CSSコード:
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.close-btn {
color: #aaa;
float: right;
font-size: 28px;
cursor: pointer;
}
CSSコードの説明:
1. `.modal` – モーダルウィンドウの背景。初めは非表示にしています。
2. `.modal-content` – モーダルウィンドウのコンテンツ部分。中央に配置するスタイルを適用。
3. `.close-btn` – モーダルを閉じるためのボタン。右上に配置。
注意点:
モーダルの表示・非表示の切り替えは、JavaScriptやjQueryを用いて制御します。このサンプルではCSSとHTMLのみの説明となっていますので、動作させるためには追加のスクリプトが必要です。
8. ツールチップ
説明:
ツールチップは、要素の上にマウスカーソルを置くと小さな情報ボックスが表示されるUIパターンです。ユーザーに追加の情報を提供するために使用されます。
HTMLコード:
<a href="#" class="tooltip">Hover me<span class="tooltiptext">Tooltip text</span></a>
CSSコード:
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltiptext {
visibility: hidden;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 10px;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 125%; /* Position above the tooltip element */
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
CSSコードの説明:
1. `.tooltip` – ツールチップのトリガー要素。
2. `.tooltiptext` – ツールチップのテキスト部分。デフォルトでは非表示。
注意点:
ツールチップのテキストが長い場合や、ページ内での位置によっては、表示位置の調整が必要となることがあります。適切な位置に表示されるよう調整を行うことを推奨します。
9. タブメニュー
説明:
タブメニューは、複数のコンテンツを一つの領域内で表示切替するためのデザインパターンです。タブの切り替えによって関連するコンテンツが表示されるように設計されます。
HTMLコード:
<div class="tab-menu">
<button class="tab-btn active" onclick="showTab('tab1')">Tab 1</button>
<button class="tab-btn" onclick="showTab('tab2')">Tab 2</button>
<div id="tab1" class="tab-content">Content for Tab 1</div>
<div id="tab2" class="tab-content">Content for Tab 2</div>
</div>
CSSコード:
.tab-menu {
display: flex;
flex-direction: column;
}
.tab-btn {
padding: 10px 15px;
cursor: pointer;
border: none;
background-color: #ddd;
}
.tab-btn.active {
background-color: #f5f5f5;
}
.tab-content {
display: none;
padding: 20px;
border-top: 1px solid #ccc;
}
.tab-content:first-child {
display: block;
}
CSSコードの説明:
1. `.tab-menu` – タブ全体のコンテナ。
2. `.tab-btn` – タブのボタン部分。
3. `.tab-content` – タブのコンテンツ部分。デフォルトで最初のコンテンツのみ表示。
注意点:
タブの切り替え機能にはJavaScriptを使用します。このサンプルではHTMLとCSSのみの説明となっているので、実際に動作させるためにはJavaScriptの関数を追加する必要があります。
10. パララックススクローリング
説明: パララックススクローリングは、背景と前景が異なる速度でスクロールすることによって、奥行きやアニメーションのような効果を持つデザイン手法です。特にランディングページやプロモーションページでよく使用されます。
<div class="parallax-container">
<div class="parallax-content">コンテンツ</div>
</div>
.parallax-container {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax-content {
transform: translateY(50vh) translateZ(-1px) scale(2);
}
注意点:
– `perspective` プロパティは、要素の子要素がどのように見えるかを決定します。この例では、1ピクセルの透視投影が適用されます。
– 実際のプロジェクトに適用する際には、パララックス効果の要素のサイズや位置を調整することが必要です。
11. フィックスされたサイドバー
説明: フィックスされたサイドバーは、ページをスクロールしても位置が変わらないサイドバーのことを指します。多くのウェブサイトでナビゲーションや関連情報の表示に使用されます。
<aside class="fixed-sidebar">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<!-- ... -->
</ul>
</aside>
.fixed-sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 200px;
background-color: #f5f5f5;
}
注意点:
– フィックスされたサイドバーは画面の特定の位置に固定されますが、他のコンテンツとの重なりに注意が必要です。
– `z-index` プロパティを使用して、必要に応じてサイドバーの重ね順序を調整することができます。
12. サイドバー付きのレスポンシブメニュー
説明: レスポンシブデザインに対応したサイドバー付きのメニューは、小さい画面サイズでの閲覧時に特に役立ちます。ハンバーガーアイコンをタップすると、サイドからメニューがスライドして表示されることが一般的です。
<nav class="responsive-menu">
<button class="menu-toggle">☰</button>
<ul class="menu-list">
<li>メニュー1</li>
<li>メニュー2</li>
<!-- ... -->
</ul>
</nav>
.responsive-menu .menu-toggle {
display: none;
}
@media (max-width: 768px) {
.responsive-menu .menu-toggle {
display: block;
}
.responsive-menu .menu-list {
display: none;
position: absolute;
top: 0;
left: -200px;
width: 200px;
transition: left 0.3s;
}
.responsive-menu .menu-toggle:checked + .menu-list {
left: 0;
}
}
注意点:
– メディアクエリを使用して、画面サイズに応じてメニューの表示を切り替えます。
– `transition` プロパティを使用して、メニューのスライド動作にアニメーションを追加します。
13. レスポンシブなグリッドレイアウト
説明: レスポンシブなグリッドレイアウトは、異なるデバイスサイズに応じてコンテンツの配置を自動的に調整するデザイン手法です。特に、多くの情報を整理して表示するページや、ポートフォリオサイトなどでよく使用されます。
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<!-- ... -->
</div>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.grid-item {
border: 1px solid #ccc;
padding: 1rem;
}
注意点:
– `grid-template-columns` を使用して、グリッドの列の大きさを指定します。
– `repeat` と `minmax` を組み合わせることで、フレキシブルなグリッドレイアウトを実現できます。
14. スライダー・カルーセル
説明: スライダーやカルーセルは、連続的にコンテンツを横スクロールで表示するコンポーネントです。プロモーションや商品紹介のセクションでよく使用されます。
<div class="slider">
<div class="slide">スライド1</div>
<div class="slide">スライド2</div>
<!-- ... -->
</div>
.slider {
overflow: hidden;
white-space: nowrap;
}
.slide {
display: inline-block;
width: 100%;
transition: transform 0.3s;
}
注意点:
– このサンプルは基本的なスライダーのスタイルのみを提供しています。
– 実際のスライドの動きやページネーション、次/前のナビゲーションなどは、JavaScriptや追加のCSSで実装する必要があります。
15. プログレスバー
説明: プログレスバーは、タスクの完了度や読み込みの進行状況を視覚的に示すコンポーネントです。
<div class="progress-bar">
<div class="progress" style="width: 50%"></div>
</div>
.progress-bar {
width: 100%;
background-color: #f3f3f3;
height: 20px;
}
.progress {
height: 100%;
background-color: #4CAF50;
}
注意点:
– プログレスの幅（width）は動的に変更することで、進行状況を反映させることができます。
– 実際の進行状況の取得やプログレスバーのアップデートは、JavaScriptで行うことが多いです。
16. ブレッドクラム
説明: ブレッドクラムは、現在のページの位置を階層的に表示するナビゲーションツールです。ユーザーがサイト内を探索する際のガイダンスとして役立ちます。
.breadcrumb ul {
list-style-type: none;
padding: 0;
}
.breadcrumb li {
display: inline;
margin-right: 5px;
}
.breadcrumb li:after {
content: ">";
margin-left: 5px;
}
.breadcrumb li:last-child:after {
content: "";
}
注意点:
– ブレッドクラムのリストアイテム間に “>” の記号を表示して階層を示しています。
– `content` プロパティを使い、最後のリストアイテムの後の記号は非表示にしています。
17. フッターの社交メディアアイコン
説明: フッターやサイドバーに配置することが多い社交メディアのアイコン。多くのサイトで見かける一般的なデザインパターンです。
<footer class="social-media">
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<!-- ... -->
</footer>
.social-media a {
margin: 0 10px;
color: #333;
transition: color 0.3s;
}
.social-media a:hover {
color: #0077b5;
}
注意点:
– このサンプルではFont Awesomeのアイコンを使用しています。実際に表示する際は、Font Awesomeをサイトに組み込む必要があります。
– ホバー時に色が変わるようなエフェクトを追加しています。
18. ページトップへ戻るボタン
説明: スクロールしたときに画面の下部に表示される「トップへ戻る」ボタン。ユーザーが簡単にページのトップに戻ることができる機能を提供します。
<a href="#" class="to-top">トップへ戻る</a>
.to-top {
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px 15px;
background-color: #333;
color: white;
display: none; /* 初めは非表示 */
}
注意点:
– `position: fixed;` を使い、常に画面の右下に表示されるようにしています。
– JavaScriptを利用して、ページをある程度スクロールした時にボタンを表示するように実装することが一般的です。
19. サイドバーのナビゲーションメニュー
説明: サイトのサイドバーに配置するナビゲーションメニュー。記事のカテゴリーや関連ページへのリンクを整理して表示します。
<aside class="sidebar-menu">
<ul>
<li><a href="#link1">リンク1</a></li>
<li><a href="#link2">リンク2</a></li>
<li><a href="#link3">リンク3</a></li>
</ul>
</aside>
.sidebar-menu ul {
list-style-type: none;
padding: 0;
}
.sidebar-menu a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
.sidebar-menu a:hover {
background-color: #f5f5f5;
}
注意点:
– `list-style-type: none;`を使用して、リストのマーカーを非表示にしています。
– リンクに対してブロックレベルの表示を適用して、クリック領域を広げています。
20. レスポンシブデザインのためのメディアクエリ
説明: スマートフォンやタブレットなど、さまざまなデバイスに適応したレイアウトを実現するためのCSSのメディアクエリの基本的な使用方法。
<div class="responsive-box">コンテンツ</div>
.responsive-box {
width: 100%;
padding: 20px;
box-sizing: border-box;
}
@media (min-width: 768px) {
.responsive-box {
width: 50%;
}
}
注意点:
– `@media`を使用して、ブレークポイントを設定し、そのブレークポイント以上のデバイスの幅でのスタイルを定義しています。
– この例では、デバイスの幅が768px以上の場合、`.responsive-box`の幅を50%に変更しています。
まとめ
今回は、WEBデザインやプログラミング初心者に向けて、コピペで簡単に利用できるHTML＆CSSのサンプルコードを紹介しました。各サンプルには実際のコードの他、そのコードの特徴や注意点も詳しく説明しています。
特に、「19. サイドバーのナビゲーションメニュー」では、シンプルながらも効果的なサイドバーのデザインを、「20. レスポンシブデザインのためのメディアクエリ」では、異なるデバイスサイズに適応するレスポンシブデザインの基本を学ぶことができます。
これらのサンプルコードは、サイトの作成やデザインの参考として利用できます。初心者の方は、これらのコードをベースにアレンジやカスタマイズを行いながら、自分だけのオリジナルなデザインを作成してみてください。
今後も様々なサンプルコードを更新・追加していく予定なので、ぜひお楽しみに！
コメント