後楽エンブログ

「後」の人生を「楽」にするために「エン」ジニアにキャリア変更した私が初心者エンジニアを応援するブログです。

【模擬コーディング実践】レスポンシブデザインの調整を行おう!第二章

f:id:rikei-venture:20190522141426j:plain

レスポンシブデザインは理解したけど、使い方がイマイチ。。

レスポンシブデザインのやり方は分かっているけど、実際にサイト作成していく中で、どのタイミングでどうレスポンシブ対応させていくのか?という実践的な部分で困っている方は多いと思います。

本記事では実践的な視点で、サイト作成の際にどのようにレスポンシブ対応させていくのかということを学ぶことができる記事にしてあります。

本記事のテーマ

ブログ風サイト作成を通して実践的な視点でレスポンシブデザインを身につけよう!

 本記事はブログ風サイトデザイン作成の第2章ということで、前回の続きから入りたいと思います。

レスポンシブデザインについてだけ知りたいという方も前回の記事からの流れから把握していただいた方が理解できると思いますので、是非こちらの第1章からお読みいただけると幸いです。

【ブログ風サイトの制作手順】

① レイアウトの基本構造を作る

② ボックスにコンテンツを入れる

③ レイアウトの調整

④ レスポンシブ調整

⑤ パーツの追加&調整

前回の記事で②ボックスにコンテンツを入れるまでいきましたので、今回は③からです。

本記事のメインはレスポンシブデザインについてですが、まずは前記事の続きである③レイアウトの調整から入ります。

レイアウトの調整

①Box2をバーの形にする

f:id:rikei-venture:20190601152329p:plain

②Box5の上に区切り線を入れる

f:id:rikei-venture:20190601152740p:plain
③縦方向、横方向の調整

をしていきたいと思います。

ナビゲーションをバーの形に

ボックスをバーの形にするには、ボックスの背景色を指定します。

今回は、Box2を青緑色の「#7cbac1」に指定していきます。

また、少しバーを太くしたいので、paddingを5pxから15pxに、

カーソルを重ねた時の色をグレーから水色「#75dbe7」に変更します。

f:id:rikei-venture:20190522144639p:plain

フッターの上に区切り線を

Box5の上に太さ1pxのグレーの線を入れます。

f:id:rikei-venture:20190522145228p:plain

縦方向、横方向のレイアウトの調整をする 

f:id:rikei-venture:20190522153253p:plain

上図のようにレイアウトを整えます。

調整の仕方はpaddingを入れます。

f:id:rikei-venture:20190523125334p:plain

box-sizing:border-boxを入れるとpaddingを含めた幅の取り方をしてくれるので、paddingを入れてもレイアウトが崩れなくなります。

レスポンシブデザインの調整

 ブラウザ表示の横幅を変化させて表示の確認を行います。

気になるポイントがある場合必要に応じてブレイクポイントの追加やボックスの分割などを行いましょう。

気になるポイントの確認

本記事の肝となる部分です。

画面幅を変更していき、それぞれの画面幅に対して、レイアウトが現状どうなっているのか?また、どのようにしたらレイアウトが綺麗になるのか?その辺を考えることが非常に大切になってきます。

 

現時点での画面幅を変更した際に、レイアウトで気になる点を確認しましょう。

f:id:rikei-venture:20190601153721p:plain

左の画像のiPhone5の画面サイズでは

①メニューバーが2段になってしまう

②記事タイトルが大きい

これらが原因で記事の本文が見えない状態になっています。

サイト名、メニューバー、記事タイトルをコンパクトのデザインにします。

 

右の画像のNexus7の画面サイズでは

③サブメニューの右側の余白が気になる

横幅が600~767pxのときはサブメニューを二段組にします。

 

ついでに、1040px以上ではレイアウトの横幅を1000pxに固定する設定も追加します。

調整に必要な@mediaの設定を追加する

f:id:rikei-venture:20190601154338p:plain

先に枠を準備しておきましょう。

上図の黄色の枠で囲った部分を追加します。

各パーツコンパクトにする

f:id:rikei-venture:20190601155021p:plain

上画像のように599px以下ではメニューバー、サイト名、記事タイトルを小さくし、

サイト名の余白を狭くし、記事の上の余白も狭くする設定を施します。

それでは、iPhone5サイズの599px以下の画面を見てみましょう。

f:id:rikei-venture:20190523135857p:plain

すると、1ページ目から本文が見えるコンパクトなレイアウトに早変わりします。

サブメニューを2段組みにする

f:id:rikei-venture:20190523142118p:plain

Nexus7に対応する600px~768pxの画面幅でサブメニューを2つに分けて横に並べるにはボックスの分割を行います。

①Box4を上図左のように「Box4‐1」「Box4-2」とし、2つのボックスに分割します。

②ボックスを横に並べるCSSをあてます。

③間隔を調整します。

これらを施したコードがこちらです。

f:id:rikei-venture:20190523143324p:plain

これで2段組みのレイアウトになりました。

レイアウト全体の横幅を固定する

ブラウザ画面の横幅を大きくしたときの表示を調整します。

Box1,Box2,BoxA,Box5の横幅を調整します。

ここではレイアウト全体の横幅を1000pxに固定し、横に広がりすぎないようにします。

f:id:rikei-venture:20190523145305p:plain

以上でレスポンシブデザインの調整は完了です。

ナビゲーションとフッターを横幅いっぱいに表示

ついでですのでもう少し見栄えを整えましょう。

ナビゲーションとフッターの横幅を画像のように伸ばします。

f:id:rikei-venture:20190524132907p:plain

手順は次の通りです。

①Box2とBox5の中に「box2-inner」「box5-inner」という新たなボックスを作る

②ページの周りに標準で表示される余白を0にする。

③全体の横幅固定をbox2→box2-inner,box5→box5-innerに変更

④Boxの左右に余白を確保

 

これらをまとめたコードがこちらです。

f:id:rikei-venture:20190524133829p:plain

④のようにボックスの左右に余白を作らないとスマホ表示の際、両端がキツキツになってしまうので、余白を入れてあげてください。

ここまでのまとめ

実践的なレスポンシブデザインについては学べたでしょうか?

ポイントとしましては、レスポンシブデザインをあてる前に一度モバイル画面で確認してみて、どの部分をどう変えればレイアウトが綺麗になるか一度考えてみるということです。

そして、フォント小さくしたり、間隔を調整してみたり、2段組にしてみたりとレスポンシブ対応させていくというのが王道となってきます。

させたいレイアウトのCSSが分からなければその都度調べればいいだけで、大事なのはどのタイミングでレイアウトを確認して、それぞれの画面幅でどのようにレイアウトを変更させていきたいか考えることです。

 

本記事までの途中経過を確認しておきます。

【ブログ風サイトの制作手順】

① レイアウトの基本構造を作る

② ボックスにコンテンツを入れる

③ レイアウトの調整

④ レスポンシブ調整

⑤ パーツの追加&調整

④まで終わりましたので、次回から⑤パーツの追加や調整を行っていきます。

ここまでは今までの復習しつつ、それの応用といったものばかりでしたが、ここからは今後使える頻出デザインの盛り合わせとなります。

盛り合わせの量はけっこう沢山ございますので、2回にわたってお送りしたいと思います(笑)

これらは頻出にもかかわらず、決してProgateやドットインストールでは学ぶことができないものばかりなのでまさに目から鱗な話になります。

大変ですが、いよいよ大詰めとなってきますのでもう少し頑張っていきましょう!

CSSをあてる際に毎回どうなってるか確認していくことが大事です。

一つ一つ焦らずに確認して、どのように作用していくか見ていくことが上達の近道となるので丁寧にブログ風サイトを作っていきましょう。