この記事は、「デザインデータからコーディング！ブログサイトのレスポンシブ化」の続きになります。
まだ未学習の方は学習しておきましょう。
「デザインデータからコーディング！ブログサイトのレスポンシブ化」で、ブログサイトのトップページのレスポンシブ化をしてきましたが、今回は別ページのお問い合わせフォームのレスポンシブ化を行っていきます。
- フレキシブルレイアウトのポイントをさらに学ぶ
- お問い合わせフォームをレスポンシブ化させる
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を使って余白をとると、さらに簡潔なコードを書けます。
お問合せフォームでのレスポンシブスタイルの追加は以上となります。
まとめ
ここまでお疲れ様でした。
今回の流れを実際に行った場合のサンプルコードをご用意しましたので、以下のボタンからダウンロードし自分が制作したものと見比べてみてください。
レスポンシブで大事なことは前回の記事で書いたので、今回はプラスアルファのやり方の解説が主でした。
テクニックややり方といった手法は、この段階で全てできるようになる必要はないです。ただ、今回の教材を通して、似たパターンを見かけたら、教材やこの記事・自分のメモなどを見返せるような状態にはしておくと良いです。まずは、こちらの記事をレスポンシブの練習に生かしてください！
