レスポンシブWebデザインの調整を行う02

今回の作業
ブラウザ画面の横幅を変化させて表示を確認し、必要に応じてブレイクポイントを追加して気になるポイントを調整していきます。

配布データのダウンロード
配布データを以下からダウンロードしてください。
goo.gl/NGjUJB
(4_sample.zip)

レスポンシブWebデザインによる変化で気になるポイント
@media (メディアクエリ)以外の設定で表示したデザインを基準とし、ブラウザ画面の横幅を変化させたときに気になるポイントをチェックします。

基準のデザイン
@media 以外の設定で表示した、基準となるデザインです。

ブラウザ画面の横幅を小さくしたときの表示
ブラウザ画面の横幅を小さくすると、ナビゲーションメニューに改行が入ります。

また、「おしらせ」の各リンクにも改行が入り、日付の下にテキストが入り込んだ表示になります。

ブラウザ画面の横幅を大きくした時の表示

ブラウザ画面の横幅を大きくすると、それに合わせてレイアウト全体の横幅も大きくなっていきます。

どのように調整するかを検討する
気になるポイントを調整するため、ここでは新たに2つのブレイクポイントを追加して、次のように@media (メディアクエリ) の設定を適用して調整していきます。

(クリックで拡大)

追加するブレイクポイント
600px にブレイクポイントを追加 @media (max-width: 599px)
1190px にブレイクポイントを追加 @media (max-width: 1190px)
ブレイクポイント768px以下の設定
適用する設定: @media (max-width: 599px)

ナビゲーションメニューをコンパクトなデザインにする
ブラウザ画面の横幅が599px以下のときにはナビゲーションメニューをコンパクトなデザインに変更し、改行が入らないようにします。
日付とテキストを横に並べて表示する
「お知らせ」では日付とテキストを横に並べて、テキストに改行が入っても日付の下に入り込まないようにします。
ブレイクポイント768px以上の設定
適用する設定: @media (min-width: 1190px)
適用済の設定: @media (max-width: 767px)

レイアウト全体の横幅を固定する
レイアウト全体の横幅を固定し、横に広がりすぎないようにします。
ここでは、CSSフレームワークなどでの採用が増えている少し大きめの横幅 1140px に固定します。
なお、@media が判別するブラウザ画面の横幅には、前回ボックスの左右に確保した余白(15px ×2)や、縦スクロールバー(約15~20px)の大きさが含まれます。
そこで、ブレイクポイントは1190pxに設定し、余白や縦スクロールバーを含めてもレイアウト全体がブラウザ画面に収まるようにします。
ヘッダーとフッターを横幅いっぱいに表示する
サイト名とナビゲーションメニューを横に並べたヘッダー部分は罫線で区切ったデザインにします。
また、ヘッダーとフッターは画面の横幅いっぱいに表示します。
調整に必要な@mediaの設定を追加する
@media (メディアクエリ) の設定はスタイルシートの末尾に追加し、基準のデザインの設定を上書きできるようにします。ここではブラウザ画面の横幅が小さいときに適用する @media から順に記述しています。
コード1 style.css 122~142行目 /* ########### 768px以上 ########### */ ~ } を置き換え

/* ########### 599px以下 ########### /
@media (max-width: 599px) {
}
/
########### 768px以上 ########### /
@media (min-width: 768px) {
/
BOX1とBOX2を横に並べる設定 /
.boxA:after {
content: “”;
display: block;
clear: both
}
.box1 {
float: left;
width: auto
}
.box2 {
float: right;
width: auto
}
}
/
########### 1190px以上 ########### */
@media (min-width: 1190px) {
}
ナビゲーションメニューをコンパクトにする
ブラウザ画面の横幅を小さくしたときに、ナビゲーションメニューをコンパクトなデザインにして、改行が入らないようにします。

  1. 調整前の確認
    ナビゲーションメニューの調整を行う前に、設定した600ピクセルのブレイクポイントが実際のデバイスで有効かどうかを確認します。
    そこで、以下の表を参考に、主要なデバイスのブラウザの画面サイズで表示を確認します。

主要なスマートフォンやタブレットのブラウザの画面サイズ
主要なスマートフォンやタブレット ブラウザの画面サイズ(ピクセル)
iPhone 4 / 4s 320 x 480
iPhone 5 / 5s 320 x 568
iPhone 6 / 6s / 7 / 8 (標準) 375 x 667
iPhone 6 / 6s / 7 / 8 (拡大) 320 x 568
iPhone 6 Plus / 6s Plus / 7 Plus / 8 Plus (標準) 414 x 736
iPhone 6 Plus / 6s Plus / 7 Plus / 8 Plus (拡大) 375 x 667
Nexus 4 (4インチAndroid端末の代表的な機種) 384 x 640
Nexus 5 (5インチAndroid端末の代表的な機種) 360 x 640
Nexus 7 (7インチAndroid端末の代表的な機種) 600 x 960
iPad (9.7インチ) 768 x 1024
Nexus 10 (10インチAndroid端末の代表的な機種) 800 x 1280
すると、ブレイクポイントよりも小さな画面のデバイスではナビゲーションメニューに改行が入ることが確認できますので、 @media (max-width: 599px) に設定を追加してデザインを調整していきます。

  1. ナビゲーションメニューをコンパクトなデザインにする
    ナビゲーションメニューの余白サイズと文字サイズを小さくし、コンパクトなデザインにします。
    そこで、次のように設定を追加して、基準のデザインを変更します。
    ここでは

<

nav class=”menu”> 内の

  • 内の の padding で左右の余白サイズを 7px に、 font-size で文字サイズを 11px に変更します。
    コード2 style.css 122~125行目 /* ########### 599px以下 ########### */ ~ }を置き換え

    /* ########### 599px以下 ########### /
    @media (max-width: 599px) {
    /
    ナビゲーション /
    .menu li a {
    padding: 10px 7px;
    font-size: 11px
    }
    /
    キャッチコピー */
    .catch {
    padding: 5px 10px;
    font-size: 12px
    }
    }
    これによって、
    28行目に記述されている

    padding: 10px 15px;
    と、30行目に記述されている

    font-size: 14px;
    は、横幅が599px以下の端末では コード2 の記述に置き換えられます。

    日付の下にテキストが入り込まないようにする
    「お知らせ」の各リンクのテキストが改行されても、日付の下に入り込まないようにします。そこで、日付とテキストをそれぞれボックスに入れ、横に並べてレイアウトします。

    1. 調整前の確認
      ナビゲーションメニューのときと同じように、実際のデバイスで「お知らせ」の表示を確認します。すると、小さな画面ではテキストが改行され、日付の下に入り込んだ表示になります。また、大きな画面でもテキストが長くなると改行が入り、同じ表示になってしまいます。
      そこで、ここではブレイクポイントと関係なく、日付とテキストをボックスに分け、テキストが改行されても日付の下に入り込まないように設定していきます。

    2. 日付とテキストをボックスに入れる
      日付の下にテキストが入り込まないようにするためには、まずは日付とテキストをそれぞれボックスに入れます。
      日付は

    <

    div> にはクラス名を text と指定し、スタイルシートを適用しやすくしておきます。
    これで、

    <

    div class=”text”> の構成する2つのボックスが縦に並び、 でグループ化した形になります。
    コード3 sample.html 36~58行目

    ~

    を置き換え

    1. ボックスを横に並べる
      日付とテキストを入れたボックスを横に並べます。ただし、日付を入れたボックスは横幅を固定して表示したいので、片方のボックスの横幅をピクセルで固定する設定を適用します。
      ここでは日付を入れたボックスの横幅を60ピクセルに固定するため、

    <

    div class=”text”> の margin-left を 60px に指定しています。また、余計な余白を入れないように、

    .news time {
    color: #888888;
    font-weight: bold
    }
    .news a:after {
    content: “”;
    display: block;
    clear: both
    }
    .news time {
    float: left;
    width: 60px
    }
    .news .text {
    float: none;
    width: auto;
    margin-left: 60px
    }
    MEMO
    「お知らせ」内の日付やテキストに適用するため、セレクタは

    <

    div class=”news”> 内の

    <

    div class=”text”> を指定する形で記述しています。

    レイアウト全体の横幅を固定する
    ブラウザ画面の横幅を大きくした時の表示を調整します。
    ここではレイアウト全体の横幅を1140ピクセルに固定し、横に広がりすぎないようにします。ただし、ヘッダーとフッターは横幅いっぱいに表示します。

    1. 横幅を固定する
      ブラウザ画面の横幅が大きいときにレイアウト全体の横幅を固定するため、 @media (min-width: 1190px) でボックスの横幅を指定します。ただし、ヘッダーとフッターは横幅いっぱいに表示したいので、BOXAとBOX5は横幅の指定から外します。
      ここではヘッダー画像と「おしらせ」の横幅を固定するため、次のようにBOX3とBOX4の横幅を1140ピクセルに指定します。
      また、横幅を指定したボックスはブラウザ画面の中央に揃えて配置するため、 margin-left と margin-right を auto と指定します。
      コード5 style.css 179行目に追加 ( @media (min-width: 1190px) { ~ } の間)

    /* 全体の横幅を固定 */
    .box3, .box4, {
    width: 1140px;
    margin-left: auto;
    margin-right: auto
    }
    2. ヘッダーを罫線で区切る
    ヘッダーを罫線で区切ります。
    そこで、

    <

    div class=”boxA”> の border-bottom を solid 1px #dddddd と指定し、BOX Aの下に太さ1ピクセルのグレーの罫線を挿入します。また、 margin-bottom でヘッダー画像との間隔を20ピクセルに指定します。
    コード6 style.css 184行目の下に追加

    .boxA {
    margin-bottom: 20px;
    border-bottom: solid 1px #dddddd
    }
    3. ヘッダーとフッターの中身を他のパーツに揃える
    ヘッダーとフッターの中身を他のパーツに揃えて表示します。
    そこで、BOXAとBOX5の中身を

    <

    div> で囲み、クラス名を boxA-inner 、 box5-inner と指定します。
    コード7 sample.html 12~30行目

    ~

    を置き換え

    62~66行目

    ~

    を置き換え

    追加した

    <

    div class=”boxA-inner”> と

    <

    div class=”box5-inner”>に、 1. の横幅の指定を適用します。
    コード8 style.css 179行目 .box3, .box4, { を置き換え ( /* 全体の横幅を固定 */ )の下)

    .box3, .box4, .boxA-inner, .box5-inner {
    大きい画面でもヘッダー画像を横幅いっぱいに表示する場合
    大きいブラウザ画面でもヘッダー画像を横幅いっぱいに表示したレイアウトにすることもできます。
    その場合、ヘッダー画像を入れたBOX3に 1. の横幅の指定を適用しないようにします。ヘッダーの下を罫線で区切る必要もなくなるので、 2. の指定も削除します。
    また、ここで使用しているヘッダー画像のオリジナルサイズは横幅1500ピクセルとなっています。
    ブラウザ画面の横幅が1500ピクセル以上になっても画面の横幅いっぱいに表示するためには、画像の横幅を max-width ではなく width で 100% と指定し、拡大表示を行うようにしておきます。拡大表示を避けたい場合には、より大きなヘッダー画像を用意します。
    コード9 style.css 50~55行目 /* ヘッダー画像 */ ~ } を置き換え

    /* ヘッダー画像 /
    .topimg {
    width: 100%;
    height: auto;
    vertical-align: bottom
    }
    180~189行目 /
    BOX Aの下に罫線を挿入 */ ~ } を置き換え

    /* 全体の横幅を固定 */
    .box4, .boxA-inner, .box5-inner {
    width: 1140px;
    margin-left: auto;
    margin-right: auto
    }

  • カテゴリー: WEB DESIGN 2018-2019 パーマリンク