レスポンシブ課題

レスポンシブでの実装に挑戦しましょう。
DIVパズルで実践したcssを使用したレイアウトに慣れたら、次はパソコン画面の幅とスマートフォンの幅それぞれでレイアウトが切り替わるレスポンシブな実装に取り組んでください。

スタイルの切り替え方

これまでパソコン用とスマホ用のレイアウトをCSSで完成させたと思います。
ひとつのページを作る時にパソコン用のスタイルだけ作成しても、スマホで見ると小さく表示されて可読性に欠けます。

また、パソコンとスマホでそれぞれCSSを用意して画面幅に応じて切り替える方法もありますが、一元管理ができないため手間が増えてしまいます。

そこでメディアクエリを使ってCSSで画面幅でスタイルを切り替えてみましょう。

メディアクエリの使い方

以下のようにmediaタイプを記述することでスタイルを切り替えることができます。

/*@media以外の所は全てのサイズで読み込まれます。*/
p {
 color: red;
}

@media screen and (min-width:480px) { 
    /*　画面サイズが480pxからはここを読み込む　*/
    p {
      color:  yellow;
    }
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
    p {
      color: blue;
    }
}
@media screen and (min-width:1024px) {
    /*　画面サイズが1024pxからはここを読み込む　*/
    p {
      color: green;
    }
}

画面幅を変更すると、上記の例ではその幅に応じて文字の色が変わることを確認できると思います。

課題について

XDの無料版が新規ダウンロードできなくなったため、以下のURLからブラウザでXDファイルを閲覧してください。

div-pazzle-responsive-01

2 Screens, Last modified on Apr 02, 2022 06:33 GMT

xd.adobe.com

ここではより実践に近づけるため、以下のXDファイルをインストールして、XDで開いて要素のサイズなどを確認しながら実装を進めてください。

※Windowsの方は以下

レイアウトの参考（PC）

注意事項

• 画面の幅の切り替えは768pxからパソコンのスタイル、767px以下はスマホのスタイルで切り替えるようにしてください。

/* 例 */

p {
 color: red;
}
/* ここまでは767pxまでのスタイル（スマホ） */

@media screen and (min-width: 768px) { 
    /*　画面サイズが768pxからはここを読み込む　*/
    p {
      color:  yellow;
    }
}

• PCで見た場合に、コンテンツの中身（タブボックスやサイドナビなどを囲う要素）の最大幅は1020pxとし、画面の幅が1024pxよりも広がった場合は中央に寄せるようにしてください。
• SPはデザインデータが750pxの幅で作成されています。実装では半分の375pxで換算してください。（デザインで高さが200px → 実装では100px）
• 375pxよりも小さい時もスタイルが表示され、崩れないように注意してください
• SP時は画面幅が広がったときに要素が画面幅に合わせて広がるようにしてください

不明点などは講師に質問をするようにしてください。