ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > HTML/CSS > デザインデータからコーディング!お問合せフォームのレスポンシブ化

デザインデータからコーディング!お問合せフォームのレスポンシブ化

HTML/CSS

2022/07/23

2023/06/08

デザインデータからコーディング!お問い合わせフォームのレスポンシブ化

この記事は、「デザインデータからコーディング!ブログサイトのレスポンシブ化」の続きになります。

まだ未学習の方は学習しておきましょう。

「デザインデータからコーディング!ブログサイトのレスポンシブ化」で、ブログサイトのトップページのレスポンシブ化をしてきましたが、今回は別ページのお問い合わせフォームのレスポンシブ化を行っていきます。

HTMLを書くときからレスポンシブを考える

レスポンシブコーディングはCSSで上書きすることで行っていきますが、場合によってはHTMLの構造を書く時点で、レスポンシブのことを考える必要があります。

例えば今回のページでは.form-unitというdivタグがありますが、モバイルサイズのレイアウトではこちらのタグは不要です。ではなぜ、記述があるかというと、それは今回のレスポンシブで使うからです。

初めのうちは、レスポンシブコーディングの際にHTMLに追記する形でも良いですが、慣れてきたらHTMLを記述する時点で、モバイルサイズとパソコンサイズのデザインを見比べながらコーディングができるようになると、よりスムーズにコーディングを進められるようになります。

コーディングしてみよう

今回はHTMLは既に記述してある前提なので、早速CSSを追記してレスポンシブ化を行っていきます。

フォームの枠を書き換える

まずは外側から書き換えます。

前回の記事にならって、見比べて違いを見つけます。

フッターとの距離が違う枠線がある横幅いっぱいに広がっていない

これらのコードを記述します。

@media screen and (min-width: 768px) {
  .contact {
    padding-bottom: 80px;
  }
}
@media screen and (min-width: 768px) {
  .form-body {
    width: 92%;
    border: 1px solid #ccc;
  }
}

.form-bodyに関しての補足です。

パソコンサイズのみを気にするのであれば、ベースのスタイルでmax-width: 1080px;が書いてあるので、width: 92%;の記述は不要です。

しかし、768pxから1080pxの間の表示だと、width: 92%;がないと画面幅いっぱいに広がってしまいます。前回の記事で伝えたフレキシブルレイアウトは常に意識しましょう。

項目名と内容を横並びにする

項目名と内容を見ていきます。

横並びになっている枠線がある細かい余白や文字の大きさが変わっている

これらをコードとして記述します。

@media screen and (min-width: 768px) {
  .form-unit {
    display: flex;
  }
}
@media screen and (min-width: 768px) {
  .form-unit:not(:first-child) {
    margin-top: 0;
    border-top: 1px solid #ccc;
  }
}
@media screen and (min-width: 768px) {
  .form-unit-head {
    font-size: 16px;
    width: 240px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
}
@media screen and (min-width: 768px) {
  .form-unit-contents {
      padding: 16px;
      width: 100%;
      border-left: 1px solid #ccc;
  }
}

.form-unitは、横並びにするためにHTMLで書いたことがここでわかります。

まずは、.form-unit-headのスタイルから解説します。

width: 240px;flex-shrink: 0;は、前回メインコンテンツとサイドバーの横並びの箇所で扱った内容と同じです。画面幅が縮まった時に、.form-unit-headの横幅は固定で、.form-unit-contentsの横幅を縮めることで調整する仕様です。

display: flex;align-items: center;がついている理由は、横並びになったことと関連します。

横並びになると、.form-unit-headの高さと.form-unit-contentsの高さで、大きい方に合わせられます。すると、.form-unit-headの高さがモバイルサイズの時よりも広がるので、中の文字が枠に対して上下中央揃えではなくなります。

そのため、上下中央揃えの手段として、display: flex;align-items: center;を使用しています。

チェックボックスのリストを横並びにする

「スキル」項目の内容である、チェックボックスのリストを横並びにしていきます。

@media screen and (min-width: 768px) {
  .form-checkbox-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 40px;
  }
}
@media screen and (min-width: 768px) {
  .form-checkbox-item:not(:first-child) {
    margin-top: 0;
  }
}

ここでflex-wrap: wrap;gap: 8px 40px;を使っている理由も、フレキシブルレイアウトのためです。

gapプロパティの性質上、要素同士の間にしか余白が生まれないので、画面幅の変化での折り返しにとても強いです。レスポンシブとは別に、項目の数や文字の数が変化しても、表示が崩れないというメリットもあります。

ここでのフレキシブルレイアウトのポイント

  • flex-wrap: wrap;gapを使ってキレイに折り返す
    → 横幅が固定のアイテムが横並びになっている場合。

また、.form-checkbox-item:not(:first-child)セレクタで上書きしている理由としては、詳細度により、ベースと同じ詳細度のセレクタで上書きする必要があるからです。

CSSの詳細度に関してはこちらの記事を参考にしてください。

余談ですが、ベースのスタイルからgapを使って余白をとると、さらに簡潔なコードを書けます。

お問合せフォームでのレスポンシブスタイルの追加は以上となります。

まとめ

ここまでお疲れ様でした。

今回の流れを実際に行った場合のサンプルコードをご用意しましたので、以下のボタンからダウンロードし自分が制作したものと見比べてみてください。

レスポンシブで大事なことは前回の記事で書いたので、今回はプラスアルファのやり方の解説が主でした。

テクニックややり方といった手法は、この段階で全てできるようになる必要はないです。ただ、今回の教材を通して、似たパターンを見かけたら、教材やこの記事・自分のメモなどを見返せるような状態にはしておくと良いです。

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから