スマホ特化サイト

はい、承知いたしました。スマートフォン表示に特化したWebサイトの基本的なHTMLとCSSの構成案を作成します。 html スマホ特化サイト

キャッチコピー

サイトの簡単な説明文が入ります。

サービス

サービスA

サービスAの説明です。

サービスB

サービスBの説明です。

お問い合わせ

お問い合わせはこちらから。

お問い合わせフォームへ

```css /* style.css */ /* 基本的なリセット */ body, h1, h2, h3, p, ul, li, figure, figcaption, blockquote, dl, dd { margin: 0; padding: 0; } ul { list-style: none; } img { max-width: 100%; /* 画像が親要素からはみ出ないように */ height: auto; display: block; /* 画像下の余白を削除 */ } a { text-decoration: none; color: inherit; /* 親要素の色を継承 */ } body { font-family: sans-serif; /* 基本的なフォント */ line-height: 1.6; /* 行間を読みやすく */ background-color: #f8f8f8; /* 背景色 */ color: #333; /* 基本的な文字色 */ } /* ヘッダー */ .header { background-color: #fff; padding: 15px; display: flex; /* ロゴとナビゲーションを横並びにする場合 */ justify-content: space-between; /* 要素間にスペースを空ける */ align-items: center; /* 要素を中央揃え（垂直方向） */ border-bottom: 1px solid #eee; position: sticky; /* スクロールしてもヘッダーを上部に固定 */ top: 0; z-index: 10; /* 他の要素より手前に表示 */ } .logo { font-size: 1.5em; } /* ナビゲーション（ハンバーガーメニューを想定） */ .navigation .menu-list { display: none; /* 初期状態ではメニューを隠す */ /* JavaScriptで表示/非表示を切り替える */ /* または :target 疑似クラスなどでCSSのみで実装も可能 */ position: absolute; top: 100%; /* ヘッダーのすぐ下に表示 */ left: 0; width: 100%; background-color: #fff; border-top: 1px solid #eee; } .navigation .menu-list li a { display: block; padding: 15px; border-bottom: 1px solid #eee; } /* メインコンテンツ */ .main-content { /* ヘッダーが固定されている場合、コンテンツが隠れないようにpaddingを追加 */ /* padding-top: 70px; /* ヘッダーの高さに応じて調整 */ } /* 各コンテンツセクション */ .content-section { padding: 40px 15px; /* 上下に十分な余白、左右に少し余白 */ margin-bottom: 20px; /* セクション間の余白 */ background-color: #fff; /* セクションごとに背景色を変えても良い */ border-bottom: 1px solid #eee; } .content-section:last-child { margin-bottom: 0; border-bottom: none; } .content-section h2 { font-size: 1.8em; margin-bottom: 20px; text-align: center; /* 見出しを中央揃え */ } .content-section p { margin-bottom: 15px; } /* ヒーローセクションの例 */ .hero-section { text-align: center; background-color: #e0f7fa; /* 例: 薄い青色 */ } .hero-section img { margin-top: 20px; max-width: 80%; /* 画像サイズを少し小さく */ margin-left: auto; margin-right: auto; } /* サービスセクションの例 */ .service-section .service-item { background-color: #f0f0f0; padding: 20px; margin-bottom: 15px; border-radius: 8px; /* 角を丸くする */ } .service-section .service-item h3 { font-size: 1.3em; margin-bottom: 10px; } /* お問い合わせセクションの例 */ .contact-section { text-align: center; } .contact-button { display: inline-block; background-color: #007bff; /* ボタンの色 */ color: #fff; /* ボタンの文字色 */ padding: 12px 25px; border-radius: 5px; font-weight: bold; margin-top: 15px; } /* フッター */ .footer { background-color: #333; color: #fff; text-align: center; padding: 20px 15px; font-size: 0.9em; } ``` スマホ特化サイト

キャッチコピー

サイトの簡単な説明文が入ります。

ヒーローイメージ領域

サービス

サービスA

サービスAの説明です。

サービスB

サービスBの説明です。

お問い合わせ

お問い合わせはこちらから。

お問い合わせフォームへ

/* style.css */ /* 基本的なリセット */ body, h1, h2, h3, p, ul, li, figure, figcaption, blockquote, dl, dd { margin: 0; padding: 0; box-sizing: border-box; /* paddingとborderをwidth/heightに含める */ } ul { list-style: none; } img { max-width: 100%; /* 画像が親要素からはみ出ないように */ height: auto; display: block; /* 画像下の余白を削除 */ } a { text-decoration: none; color: inherit; /* 親要素の色を継承 */ } button { background: none; border: none; padding: 0; font: inherit; cursor: pointer; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* モダンなフォントスタック */ line-height: 1.6; /* 行間を読みやすく */ background-color: #f8f8f8; /* 背景色 */ color: #333; /* 基本的な文字色 */ } /* ヘッダー */ .header { background-color: #fff; padding: 15px; display: flex; /* ロゴとナビゲーションを横並びにする場合 */ justify-content: space-between; /* 要素間にスペースを空ける */ align-items: center; /* 要素を中央揃え（垂直方向） */ border-bottom: 1px solid #eee; position: sticky; /* スクロールしてもヘッダーを上部に固定 */ top: 0; left: 0; width: 100%; z-index: 10; /* 他の要素より手前に表示 */ } .logo { font-size: 1.4em; /* 少し小さめに調整 */ font-weight: bold; } /* ナビゲーション（ハンバーガーメニューを想定） */ .menu-button { font-size: 1em; padding: 5px 10px; border: 1px solid #ccc; border-radius: 4px; } .navigation .menu-list { display: none; /* 初期状態ではメニューを隠す */ /* JavaScriptで表示/非表示を切り替える */ position: absolute; top: 100%; /* ヘッダーのすぐ下に表示 */ left: 0; width: 100%; background-color: rgba(255, 255, 255, 0.95); /* 少し透過させる */ border-top: 1px solid #eee; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } /* メニューが開いている状態 (例: JavaScriptで .is-open クラスを付与) */ .navigation.is-open .menu-list { display: block; } .navigation .menu-list li a { display: block; padding: 15px; border-bottom: 1px solid #eee; text-align: center; color: #333; } .navigation .menu-list li:last-child a { border-bottom: none; } /* メインコンテンツ */ .main-content { /* ヘッダーがstickyの場合、コンテンツが隠れないようにpaddingを追加 */ /* padding-top: 61px; /* ヘッダーの高さ(padding含む)に応じて調整 */ } /* 各コンテンツセクション */ .content-section { padding: 50px 20px; /* 上下に十分な余白、左右に少し余白 */ background-color: #fff; /* 基本は白背景 */ } /* セクション間の区切りを少しつける */ .content-section:not(:last-child) { border-bottom: 1px solid #eee; } .content-section h2 { font-size: 1.7em; margin-bottom: 25px; text-align: center; /* 見出しを中央揃え */ font-weight: bold; } .content-section p { margin-bottom: 15px; line-height: 1.7; /* 本文の行間を少し広げる */ } /* ヒーローセクションの例 */ .hero-section { text-align: center; background-color: #e0f7fa; /* 例: 薄い青色 */ padding-top: 60px; padding-bottom: 60px; } .hero-section h2 { font-size: 2em; margin-bottom: 15px; } .hero-section p { font-size: 1.1em; color: #555; margin-bottom: 30px; } .hero-section div { /* プレースホルダー用 */ margin-top: 20px; border-radius: 8px; } /* サービスセクションの例 */ .service-section h2 { margin-bottom: 30px; } .service-section .service-item { background-color: #f9f9f9; padding: 25px; margin-bottom: 20px; border-radius: 8px; /* 角を丸くする */ box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .service-section .service-item h3 { font-size: 1.3em; margin-bottom: 10px; color: #0056b3; /* 少しアクセントカラー */ } /* お問い合わせセクションの例 */ .contact-section { text-align: center; background-color: #f0f8ff; /* 背景色を少し変える */ } .contact-button { display: inline-block; background-color: #007bff; /* ボタンの色 */ color: #fff; /* ボタンの文字色 */ padding: 14px 30px; border-radius: 25px; /* 丸みを帯びたボタン */ font-weight: bold; margin-top: 20px; transition: background-color 0.3s ease; /* ホバー効果 */ } .contact-button:hover { background-color: #0056b3; /* ホバー時の色 */ } /* フッター */ .footer { background-color: #343a40; /* 少し濃いグレー */ color: #ccc; text-align: center; padding: 30px 15px; font-size: 0.9em; } // script.js (オプション: ハンバーガーメニューの開閉など) // DOM要素を取得 const menuButton = document.querySelector('.menu-button'); const navigation = document.querySelector('.navigation'); // メニューボタンがクリックされたときの処理 if (menuButton && navigation) { menuButton.addEventListener('click', () => { // navigation要素に 'is-open' クラスを付け外しする navigation.classList.toggle('is-open'); // WAI-ARIA属性を更新してアクセシビリティを向上 const isOpen = navigation.classList.contains('is-open'); menuButton.setAttribute('aria-expanded', isOpen); }); // メニューの外側をクリックしたら閉じる (オプション) document.addEventListener('click', (event) => { // クリックされた要素がナビゲーション内部またはメニューボタンでない場合 if (!navigation.contains(event.target) && event.target !== menuButton) { navigation.classList.remove('is-open'); menuButton.setAttribute('aria-expanded', 'false'); } }); // メニュー項目をクリックしたら閉じる (オプション) const menuLinks = navigation.querySelectorAll('.menu-list a'); menuLinks.forEach(link => { link.addEventListener('click', () => { navigation.classList.remove('is-open'); menuButton.setAttribute('aria-expanded', 'false'); }); }); } // 初期状態でaria-expandedを設定 if (menuButton) { menuButton.setAttribute('aria-expanded', 'false'); } **解説:** 1. **HTML (`index.html`)**: * `` と `lang="ja"`: HTML5文書であり、言語が日本語であることを宣言します。 * ``: 文字コードをUTF-8に設定します。 * ``: スマートフォンの画面幅に合わせて表示を調整し、初期のズーム倍率を1.0にするための重要な設定です。 * ``: CSSファイルを読み込みます。 * **セマンティックタグ**: `

`, `

サイトタイトル

キャッチコピー

サービス

サービスA

サービスB

お問い合わせ

サイトタイトル

キャッチコピー

サービス

サービスA

サービスB

お問い合わせ