スイーツショップサイトを作ろう！　デイトラWeb制作初級編5~10　ゼロからサイトを作ってみよう！その②「メインコンテンツ編」

デイトラWeb制作
2024.03.12
ハック
ハック

こんにちは！運営者のハックです。

今回はデイトラWeb制作コース初級編Day5~10「ゼロからサイトを作ってみよう！」の学習内容のうち「メインコンテンツ編」について記録します。

※①「事前準備編」はこちら。

サイトに表示される部分はすべて「body」タグの中に書いていきます。
今回はbodyタグ内のコンテンツを順番に作成していきます。

モナ
モナ

コード内のすべてのタグの意味を紹介すると長くなるため、講義や自分がポイントだと思った箇所のみ紹介します。

各タグの意味が気になった方は「Progate」などで学習したり、ご自身で調べてみてください。

ヘッダーを作ろう！

まずはサイト上部、header部分から作成していきます。

完成形は左のような画像となります。

それぞれHTMLとCSSを書いていきます。

コーディングする時はスマートフォン表示の大きさ（iPhoneSE：375×667ピクセル）に合わせて書いていきます。

HTMLを書いていこう

HTMLのコードは以下のとおりです。

 <header class="header">
      <div class="header-inner">
        <h1 class="header-logo">
          <img src="./img/logo.svg" alt="Sweet Delight" />
        </h1>
        <nav class="header-nav">
          <ul class="header-nav-list">
            <li class="header-nav-item">
              <a href="#about" class="header-nav-link">About</a>
            </li>
            <li class="header-nav-item">
              <a href="#menu" class="header-nav-link">Menu</a>
            </li>
            <li class="header-nav-item">
              <a href="#shop" class="header-nav-link">Shop</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

CSSを書いていこう

CSSのコードは以下のとおりです。

body {
  font-family: "Josefin Sans", "Noto Sans JP", sans-serif;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  border-bottom: 1px solid rgba(241, 238, 228, 0.25);
  width: 100%;
  text-align: center;
  padding: 12px;
}

.header-nav {
  margin-top: 10px;
}

.header-nav-list {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.header-nav-link {
  color: #ffffff;
}

rgba(241, 238, 228, 0.25) …「0.25」は透明度です。rgbコードでは色だけではなく透明度まで指定することができます。

画面幅によってファーストビュー画像を切り替えるには？

以下のようなHTMLコードを追加で記入しました。「picture」タグを使用します。

<div class="fv">
      <picture class="fv-picture">
        <source media="(min-width:768px)" srcset="./img/fv.png" />
        <img
          src="./img/sp/fv.png"
          alt="素材の美味しさをそのままに Sweet Delight"
        />
      </picture>
    </div>

上のコード追加で、画面幅が768px未満の時は「./img/sp/fv.png」の画像を、それ以上の時は「./img/sp/fv.png」の画像を表示させることが可能となります。

またCSSには以下のコードを書きました。

/*ファーストビュー*/
.fv-picture img {
  width: 100%;
}

メインコンテンツを作ろう！

Aboutセクションと共通パーツ、Menuセクション、Shopセクションについてコーディングしていきます。

Aboutセクションと共通パーツを作成しよう！

最初はスイーツショップのお店について紹介する「About」セクションを作成していきます。

同時に、文字の色や大きさ、文字幅や画面幅など「このパーツはテキストが違うけれど、それ以外は同じデザインだから、共通のCSSを当てれば良さそうだな」というように、共通クラスを良さそうな要素をピックアップして設定してしまいます（共通パーツ化）。

HTMLを書いていこう

<section id="about" class="about">
      <div class="inner">
        <h2 class="section-heading">
          <span class="section-heading-main">About</span>
          <span class="section-heading-sub">ー当店についてー</span>
        </h2>
        <div class="about-contents">
          <img src="./img/about.png" alt="" class="about-img" />
          <div class="about-text-contents">
            <p class="about-text">
              当店では、素材の持つ美味しさや風味を最大限に生かし、シンプルでありながらも、素材の良さを引き出すこだわりのスイーツを提供しています。
            </p>

            <p class="about-text">
              自然な味わいを大切にし、素材を感じさせるスイーツで、心に残るひとときをお過ごしください。
            </p>
          </div>
        </div>
      </div>
    </section>

CSSを書いていこう

/* 共通クラス */
.inner {
  padding: 0 40px;
}

.section-heading {
  text-align: center;
  margin-bottom: 40px;
}

.section-heading-l {
  color: #fff;
}

.section-heading-main {
  display: block;
  font-size: 40px;
}

.section-heading-sub {
  display: block;
  font-size: 12px;
}
モナ
モナ

ここで設定した各セクションの特徴はMenuセクションやShopセクションに引き継がれます。

なので、各セクションごとにいちいちCSSを設定する必要がなく、その分コード量を削減することができます。

【共通クラスを作るメリット】

  • 同じスタイルを何度も書かなくて済み、コードがスッキリする
  • 複数の要素に同じスタイルを適応できるので、見た目のばらつきが起きない
  • デザインが変更した場合も、１箇所の記述を変更すればOK
  • 適切なクラス名をつければ、後から見返してもどんなパーツなのか思い出しやすい
/* aboutセクション */

.about {
  padding: 40px 0;
  background-color: #f1eee4;
}

.about-text-contents {
  margin-top: 20px;
}

.about-text {
  font-size: 14px;
  line-height: 2;
}

.about-text + .about-text {
  margin: 16px;
}

Menuセクションを作成しよう！

次に、各ケーキの画像と説明があるMenuセクションを作成していきます。

ねこ奈
ねこ奈

おいしそーにゃ😻

ねこ奈も猫用ケーキ食べたくなってきたのにゃ…

HTMLを書いていこう

<section id="menu" class="menu">
      <div class="inner">
        <h2 class="section-heading">
          <span class="section-heading-main">Menu</span>
          <span class="section-heading-sub">ー 今月のケーキ ー</span>
        </h2>
        <div class="menu-contents">
          <ul class="menu-list">
            <li class="menu-item">
              <div class="menu-image">
                <img src="./img/menu1.png" alt="おすすめ　スロトベリーケーキ" />
              </div>
              <div class="menu-text-contents">
                <h3 class="menu-name">
                  <span class="menu-name-main">ストロベリーケーキ</span>
                  <span class="menu-name-sub">- Strawberry cake -</span>
                </h3>
                <p class="manu-text"># 旬のあまおうトッピング</p>
              </div>
            </li>
            <li class="menu-item">
              <div class="menu-image">
                <img
                  src="./img/menu2.png"
                  alt="新発売　ブルーベリーチーズケーキ"
                />
              </div>
              <div class="menu-text-contents">
                <h3 class="menu-name">
                  <span class="menu-name-main">ブルーベリーチーズケーキ</span>
                  <span class="menu-name-sub">- Blueberry cheesecake -</span>
                </h3>
                <p class="manu-text"># フランス産チーズをブレンド</p>
              </div>
            </li>
            <li class="menu-item">
              <div class="menu-image">
                <img src="./img/menu3.png" alt="おすすめ　チョコレートケーキ" />
              </div>
              <div class="menu-text-contents">
                <h3 class="menu-name">
                  <span class="menu-name-main">チョコレートケーキ</span>
                  <span class="menu-name-sub"> - Chocolate cake - </span>
                </h3>
                <p class="manu-text"># ベルギー産チョコレート使用</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>

CSSを書いていこう

/* menuセクション */
.menu {
  background-color: #f1eee4;
  padding: 80px 0;
}

.menu-item + .menu-item {
  margin-top: 62px;
}

.menu-text-contents {
  text-align: center;
  padding: 16px 10px;
}

.menu-name-main {
  font-size: 18px;
  display: block;
}

.menu-name-sub {
  color: #a98c5f;
  font-size: 12px;
  display: block;
  margin-top: 8px;
}

.menu-text {
  font-size: 14px;
  color: #a98c5f;
  margin-top: 16px;
}
モナ
モナ

共通クラスを設定したおかげでCSSがスッキリしていますね！

Shopセクションを作成しよう！

メインコンテンツの最後に、ショップの情報を紹介しているShopセクションを作成していきます。

Shopセクションではお問い合わせフォームを作成します。

HTMLを書いていこう

<section id="shop" class="shop">
      <div class="shop-inner">
        <h2 class="section-heading section-heading-l">
          <span class="section-heading-main">Shop</span>
          <span class="section-heading-sub">ー ショップ情報 ー</span>
        </h2>
        <div class="shop-contents">
          <p class="shop-text">
            ただいま、オンラインストアを準備中です。<br />最新情報は以下より送信いただいた<br />メールアドレスへご案内いたします。
          </p>
          <form action="" class="form">
            <input
              type="email"
              class="form-input"
              placeholder="sample@sample.ne.jp"
            />
            <button type="submit" class="form-submit">SEND</button>
          </form>
        </div>
      </div>
    </section>

CSSを書いていこう

/* shopセクション */
.shop {
  background-image: url(../img/sp/bg-shop.png);
  background-position: center center;
  background-size: cover;
  padding: 80px 0;
}

.shop-inner {
  padding: 0 20px;
}

.shop-text {
  color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 2;
}

.form {
  margin-top: 40px;
}

.form-input {
  width: 100%;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.7);
  border: none;
  font-family: "Josefin Sans", "Noto Sans JP", sans-serif;
  padding: 14px;
}

.form-submit {
  border-radius: 4px;
  border: none;
  font-family: "Josefin Sans", "Noto Sans JP", sans-serif;
  display: block;
  margin: 10px auto 0;
  width: 120px;
  padding: 12px 10px;
  color: #fff;
  background-color: #a98c5f;
}

お問い合わせフォームについて

今回はformタグの中に、inputタグとbuttonタグの2つを使いお問い合わせフォームを作成しました。
その他によく使うformパーツとして以下のようなタグがあります。

  • textarea…多くのテキストをユーザーに入力してもらうために使用されるタグです。コメントボックスやメッセージ入力フィールドなどに使われます。
  • select/option…ドロップダウンリストを作成し、ユーザーが複数の選択肢の中から一つを選ぶときに使用します。selectが選択ボックスの枠を定義し、内包されるoptionタグが具体的な選択肢を定義します。
  • label…フォーム要素にラベルを付けるときに使用され、視覚的に識別しやすくなります。また、ラベルをクリックすると関連付けられたフォーム要素にフォーカスが当たるため、ユーザビリティを高めることができます。
モナ
モナ

なお、本格的なお問い合わせフォームを作成しようとするとPHPの知識が必要となります。

PHPはWeb制作コースの上級編で学びます。

フッターを作ろう！

いよいよサイトの一番下の部分です！

サイト下部のfooterを書いていきます。

HTMLを書いていこう

<footer class="footer">
      <div class="footer-logo">
        <img src="./img/logo.svg" alt="Sweet Delight" />
      </div>
      <p class="footer-text">ー 各SNS更新中 ー</p>
      <ul class="footer-nav-list">
        <li class="footer-nav-item">
          <a
            href="https://www.instagram.com/"
            target="_blank"
            class="footer-nav-link"
          >
            <img src="./img/icon-instagram.png" alt="" class="sns-img" />
            <p class="footer-nav-link-text">メニューご案内</p>
          </a>
        </li>
        <li class="footer-nav-item">
          <a
            href="https://www.youtube.com/"
            target="_blank"
            class="footer-nav-link"
          >
            <img src="./img/icon-youtube.png" alt="" class="sns-img" />
            <p class="footer-nav-link-text">制作のウラガワ</p>
          </a>
        </li>
        <li class="footer-nav-item">
          <a
            href="https://twitter.com/home?lang=ja"
            target="_blank"
            class="footer-nav-link"
          >
            <img src="./img/icon-twitter.png" alt="" class="sns-img" />
            <p class="footer-nav-link-text">お店の混雑状況</p>
          </a>
        </li>
      </ul>
      <div class="footer-copy-wrapper">
        <small class="footer-copylight">&copy;2023 Sweet Delight.</small>
      </div>
    </footer>

small…著作権表示や免責事項など、ウェブページの主要コンテンツとは区別されるべき小さな文字や注釈をマークアップするために使用します。これにより、テキストが視覚的にも意味的にも目立たないようになり、ページの情報階層を明確にします。

CSSを書いていこう

.footer {
  background-color: #3c301e;
  text-align: center;
  padding-top: 46px;
  color: #fff;
}
.footer-logo {
  width: 200px;
  margin: 0 auto;
}

.footer-text {
  font-size: 12px;
}

.footer-nav-list {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 0 20px;
}

.footer-nav-link-text {
  font-size: 12px;
  margin-top: 12px;
}

.sns-img {
  width: 56px;
}

.footer-copy-wrapper {
  border-top: 1px solid rgba(241, 238, 228, 0.25);
  padding: 12px;
  margin-top: 46px;
}

.footer-copylight {
  font-size: 12px;
}
ねこ奈
ねこ奈

やっと書き終えたのにゃあ～。

素敵なケーキショップのサイトが出来上がったのにゃ！

モナ
モナ

気持ちは分かりますが、サイト制作はまだ終わってませんよ。

次の記事でレスポンシブ対応と最終チェックを行います。

今回は一気にサイト内のコンテンツを作成しました！

しかし、まだサイト制作は終わっていません。

次回はタブレット・PC用のレスポンシブ対応と、コードの最終チェックを行います。

ハック
ハック

今回、初めてのサイト制作ということもありHTMLとCSSのコードを全てブログ内に書きましたが、この課題以降は必要と思った箇所だけコードを載せるようにします。

有料スクールで扱っているコードを全て載せるのは流石にマズイと思いますし、そもそもサイトに載せたところで需要はないと思うので…

以上で今回の学習記録を終えます。

ここまでご覧いただきありがとうございました。

スポンサーリンク

コメント

タイトルとURLをコピーしました