お問い合わせページの制作

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座をWebデザインの教科書として学ぶ。

今日からは「お問い合わせページ」の制作に入る。

お問い合わせページの制作

お問い合わせページを「CONTACT」ページとして制作する。「menu.html」 を複製し「contact.html」を保存。 (P251)

<title > を編集。

   <title>Full Screen Web - CONTACT</title>

不要なコンテンツを削除する。

id 名を変更。 (P252)

    <div id="contact" class="big-bg">

見出しを追加する。「header」の下にお問い合わせフォームを追加する。

      <!-- CONTACT FORM -->
      <div class="wrapper">
        <h2 class="page-title">Contact</h2>
        <form action="#">
          <div>
            <label for="name">WWW</label>
            <input type="text" id="name" name="your-name">
          </div>

          <div>
            <label for="email">メールアドレス</label>
            <input type="email" id="email" name="your-email">
          </div>

          <div>
            <label for="message">メッセージ</label>
            <textarea name="your-message" id="message"></textarea>
          </div>

          <input type="submit" class="button" value="送信">
        </form>
      </div>

ラベルは <label> タグで囲み、 for 属性をつける。 for 属性と id 属性の値を同じものにして関連付ける。

関連付けるとなにがうれしいのか?

MDNのでは、2つの利点が説明されている。

ラベルのテキストが、対応するテキスト入力欄に視覚的に関連付けられるだけではありません。プログラム的にも関連付けられます。

関連付けられたラベルをクリックして、入力欄自体をクリックした場合と同様に、入力欄にフォーカスを与えたりアクティブ化にしたりすることができます。

for 属性が必要な理由も

<label><input> 要素に関連付けるには、 <input> に id 属性を設定しなければなりません。そして <label> に for 属性を設定して、値を input の id と同じにします。

と説明されています。

contact.html をブラウズすると書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座通りになりません。

書籍では、送信ボタンとフッターの間に余白がある。わからないが先に進むことにする。

背景画像を表示

フォームの後ろに背景画像を設置する。

#contact {
  background-image: url(https://via.placeholder.com/2048x1365/ddd);
  min-height: 100vh;
}

背景画像の設置と同時に送信ボタンとフッターの間に余白が生まれました。

フォームの装飾

フォームの各パーツを装飾する。 (P254)

<input> タグの各属性は [] で指定できる。

form div {
  margin-bottom: 14px;
}
label {
  font-size: 1.125rem;
  margin-bottom: 10px;
  display: block;
}
input[type='text'],
input[type='email'],
textarea {
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 1rem;
}
input[type='text'],
input[type='email'] {
  width: 100%;
  max-width: 240px;
}
textarea {
  width: 100%;
  max-width: 480px;
  height: 6rem;
}
input[type='submit'] {
  border: none;
  cursor: pointer;
  line-height: 1;
}

input[type='text'] 及び input[type='email']textarea には、それぞれ width: 100 が設定されています。

しかしブラウザでは横幅が違っています。

これは、それぞの max-width240pxmax-width: 480px; に設定しているからです。

親要素をに対する 100% と誤解し、数時間悩んだのは内緒!

モバイル版では余白と入力フォームの幅を調整します。 (P255)

  #contact .page-title {
    margin-top: 40px;
  }

  /* フォーム */
  input[type='text'],
  input[type='email'],
  textarea {
    max-width: 100%;
  }

地図を表示

id location のついた <section> タグを追加する。必要な事柄を記入。 (P257)

Gooleマップを埋め込んで使う。

    <section id="location">
      <div class="wrapper">
        <div class="location-info">
          <h3 class="sub-title">AAAAA</h3>
          <p>
            住所:DDDEEE<br />
            FFFFFFFFF 999-99-9<br />
            GGGGG<br />
            電話:11-1234-9876<br />
            営業時間:10:00~10:10 休日:毎曜日
          </p>
        </div>
        <!-- GOOGLE MAP -->
        <div class="location-map">Googleマップ</div>
      </div>
    </section>

<div class="location-map">Googleマップ</div>Googleマップ を書き換える。 (P258)

        <div class="location-map">
          <iframe
            src="https://www.google.com/maps/embed?pb=..."
            width="800"
            height="400"
            frameborder="0"
            style="border: 0"
            allowfullscreen=""
            aria-hidden="false"
            tabindex="0"
          ></iframe>
        </div>

見栄えを整える

Flexboxを使って店舗情報となるAAAAAと地図を横に並べる。

#location {
  padding: 4% 0;
}
#location .wrapper {
  display: flex;
  justify-content: space-between;
}
.location-info {
  width: 22%;
}
.location-info p {
  padding: 12px 10px;
}
.location-map {
  width: 74%;
}

Flexboxはどこに効果を及ぼすのか?

セレクタ#location .wrapper と定義しました。これは子孫結合子です。

子孫結合子

2つの CSS セレクターを結合し、1つ目のセレクターに一致する要素が祖先 (親、親の親、親の親の親、など) となっている2つ目のセレクターに一致します。

htmlでは次のように記述しました。

    <section id="location">
      <div class="wrapper">
        <div class="location-info">
          <!-- 店舗情報 -->
        <div class="location-map">
          <!-- Google map -->

<div class="location-info"><div class="location-map">Flexアイテムになります。

justify-content: space-between;<div class="wrapper"> の左右端に配置される。 .wrappe のデスクトップ版の横幅は、 1100px です。

.wrapper {
  max-width: 1100px;

.location-mapwidth: 74%; は、「news.html」の articlewidth: 74%; とデザインの統一感をもたせるためだと思われます。

SNSプラグインの挿入

snsという id のついた <section> タグを用意する。 (P260)

sns-box クラスのついた <div> タグを用意する。

    <!-- SNS PLUGIN -->
    <section id="sns">
      <div class="wrapper">
        <div class="sns-box">
          <h3 class="sub-title">Facebook</h3>
          Facebookプラグイン
        </div>

        <div class="sns-box">
          <h3 class="sub-title">Twitter</h3>
          Twitterプラグイン
        </div>

        <div class="sns-box">
          <h3 class="sub-title">YoutTube</h3>
          YoutTubeプラグイン
        </div>
    </section>

スタイリングを行います。

#sns {
  background-color: #faf7f0;
  padding: 4% 0;
}
#sns .wrapper {
  display: flex;
  justify-content: space-between;
}
#sns .sub-title {
  margin-bottom: 30px;
}
.sns-box {
  width: 30%;
}

#sns .sub-title セレクタの下線が色 #0bd になっているは、見出しの装飾を継承しているからです。本当は、レンダリング結果をみて検証ツールで判明しました。

すでに300行近いスタイルの設定を覚えておくなど不可能。設計段階での検討をしっかりやる必要があるのだろう。

YouTube動画のコード取得

FacebookTwitterプラグインを使うにはアカウントが必要。今回はYouTube動画のみを埋め込みます。

YoutTubeプラグインを置き換える。

          <iframe width="560" height="315" src="https://www.youtube.com/embed/nzp3c_QH_a0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

スマートフォン版では要素を横並びにする。

@media (max-width: 600px) {
  ...
  #location .wrapper,
  #sns .wrapper {
    flex-direction: column;
  }
  .location-info,
  .location-map,
  .sns-box {
    width: 100%;
  }
  .sns-box {
    margin-bottom: 30px;
  }
}

店舗情報、地図、各種SNSプラグインflex-direction: column; で縦に並べる。

  #location .wrapper,
  #sns .wrapper {
    flex-direction: column;
  }
  .location-info,
  .location-map,
  .sns-box {
    width: 100%;
  }

width: 100%; モバイル版でスタイリングする前は、デスクトップ版の width: 22%; で幅が設定されている。

モバイル版で改めて width: 100%; とすることで縦長に配置された店舗情報を横いっぱいに広げた。

OGPの設定と外部メディアのカスタマイズについては、今回は扱わない。

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座でのWebデザインを一通り終えた。

まとめ

覚えたこと

  1. positionプロパティの relative/absolute の意味を理解した
  2. Flexboxの親子関係が把握できるようになった

もっと積み重ねが必要なこと

  1. girdレイアウトの使いこなし
  2. レスポンシブデザインへの理解
  3. そもそもタイポ、スペルミスの削減

フロントエンドの知識不足を痛感し、かつて挫折した書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座を再度、手に取り学習を行った。

知識は少しは増えた。不足している事柄を明確にすることができた。

知識が忘却の彼方に消えないように学びを継続しなければ...

続編にあたるほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座に期待してます。