レスポンシブ対応の記述とモックアップ作成
ブレイクポイント
- ブレイクポイントを基準に表示を変化させます
すでにPC用の記述がある場合
- 横幅の最大値767px（767px以下の場合）
/* すでにあるPC用の記述 */ @media screen and (max-width: 767px) { /* ここにスマートフォンの記述 */ }
完成例
- 「課題01」の場合
記述ポイント
- この段階は、PCファーストで記述（max-widthを利用）
レイアウトブロックごとに、メディアクエリを記述
- PCの記述で適用できる部分は、メディアクエリ内に繰り返し記述をしない
「reset」に追記
html { font-size: 100%; }
「body」の文字サイズを変更
/* ------------------------------------ body ------------------------------------ */ body { background-color: #abc9ca; color: #333; font-size: 1.0rem; font-family: Arial, sans-serif; line-height: 1.7; }
「layout」にメディアクエリを追記
/* ------------------------------------ layout ------------------------------------ */ .container { max-width: 760px; margin: 30px auto; padding: 40px; background-color: #fff; } @media screen and (max-width: 767px) { .container { margin: 0; padding: 20px; } }
「header」にメディアクエリを追記
- 「背景画像」のトリミングを変更
- 「リード文」の、文字サイズを変更しスマートフォンでも読みやすくする
/* ------------------------------------ header ------------------------------------ */ .header { margin-bottom: 30px; } h1 { display: flex; justify-content: center; align-items: center; height: 280px; margin-bottom: 20px; background: url(../img/h1_bg.webp) no-repeat center 10px / cover; color: #fff; text-shadow: 0 0 4px #000, 0 0 4px #000; } .lead { padding: 0 3em; text-align: justify } @media screen and (max-width: 767px) { h1 { height: 300px; background: url(../img/h1_bg.webp) no-repeat right top / cover; } .lead { padding: 0 1em; font-size: 0.925rem; } }
モックアップの作り方
- PCとモバイルのスクリーンショットをそれぞれ「PSD」データとして保存する
- 「pc.psd」「sp.psd」の各ファイルのレイヤーは、「スマートオブジェクトに変換」をしておく（必須）
- 「pc.psd」のカンバスサイズを変更して、「sp.psd」と合成後の準備をしておく
※このサイズは、スクリーンショットを撮った解像度によって違いが出るため、少し下の余白を多めに取るぐらいの変更にする
- 「pc.psd」ファイルに「sp.psd」を「埋め込み配置」をします
※この時、各レイヤーが「スマートオブジェクト」になっていることが重要
各レイヤーのスマートオブジェクト内
今後の課題
- この合体されたモックアップのベースファイルの上に埋め込み配置をして利用していくので、保存をしておきます
課題01 スペイン観光ガイド 完成例
style.css
@charset "UTF-8"; /* ------------------------------------ reset ------------------------------------ */ * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } a { color: inherit; text-decoration: none; } img { max-width: 100%; vertical-align: bottom; } html { font-size: 100%; } /* ------------------------------------ body ------------------------------------ */ body { background-color: #abc9ca; color: #333; font-size: 1.0rem; font-family: Arial, sans-serif; line-height: 1.7; } /* ------------------------------------ layout ------------------------------------ */ .container { max-width: 760px; margin: 30px auto; padding: 40px; background-color: #fff; } @media screen and (max-width: 767px) { .container { margin: 0; padding: 20px; } } /* ------------------------------------ header ------------------------------------ */ .header { margin-bottom: 30px; } h1 { display: flex; justify-content: center; align-items: center; height: 280px; margin-bottom: 20px; background: url(../img/h1_bg.webp) no-repeat center 10px / cover; color: #fff; text-shadow: 0 0 4px #000, 0 0 4px #000; } .lead { padding: 0 3em; text-align: justify } @media screen and (max-width: 767px) { h1 { height: 300px; background: url(../img/h1_bg.webp) no-repeat right top / cover; } .lead { padding: 0 1em; font-size: 0.925rem; } } /* ------------------------------------ main ------------------------------------ */ h2 { margin-bottom: 30px; padding: 8px 0 6px; background-color: #ac9f49; color: #fff; text-align: center; } h3 { margin-bottom: 10px; padding: 8px 0 6px 20px; background-color: #c3e3ff; border-left: 12px solid #74a6d1; font-size: 1.125rem; } ul { margin-bottom: 20px; padding: 0 20px 0 50px; list-style: disc; } @media screen and (max-width: 767px) { ul { padding: 0 1em 0 2em; } } /* ------------------------------------ footer ------------------------------------ */ .footer { padding: 10px 0 0; border-top: 1px dotted #333; text-align: center; }
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【コーディング練習】スペイン観光ガイド</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <!-- ▼header --> <header class="header"> <h1>スペイン観光ガイド</h1> <p class="lead">スペインは、イベリア半島の大半を占めるスペイン本土、バレアレス諸島、カナリア諸島から構成される。<br> 気候は内陸部と北部、東部の3つのエリアに分けられ、高原地が広がる内陸部は寒暖の差が激しく、海洋性気候の北部は雨量が多い。</p> </header> <!-- ▲/header --> <!-- ▼main --> <main class="main"> <h2>観光スポット</h2> <h3>カタルーニャ広場</h3> <ul> <li>カタルーニャ広場は、旧市街と新市街を結ぶバルセロナの人気の広場。</li> <li>ショップや記念碑が点在し、お祭りが開かれる場所として知られています。</li> </ul> <h3>アンダルシア</h3> <ul> <li>スペインの最も南に位置するエリア。</li> <li>どこまでも続く海岸線、見どころがいっぱいの自然、古代の建築物、暖かく乾燥した気候で人気の観光地です。</li> </ul> <h3>カナリア諸島</h3> <ul> <li>一年中快適な気候の島々を巡って、海辺のリゾートを満喫しましょう。</li> <li>スペインの由緒ある建築を見たり、変化に富んだ風景を楽しんだり、フレンドリーな島の人々と交流したりもできます。</li> </ul> <h3>バスク地方</h3> <ul> <li>美食の地として知られるバスク州では海岸沿いの町を訪れ、歴史スポットや美しい風景を楽しみましょう。</li> </ul> </main> <!-- ▲/main --> <!-- ▼footer --> <footer class="footer"> <p><small>© スペイン観光ガイド</small></p> </footer> <!-- ▲/footer --> </div><!-- /.container --> </body> </html>
