実技 2025.10.2.

授業内容

• RWD 対応のサイトについて
• メディアクエリについて
• Webページ制作実践
• 本日の講義のまとめ

習得内容

• RWD 対応のサイトについて【復習】

■幅広デザインでの Web ページ作成
まずはPC画面サイズで制作する。
▢課題
スマホ画面では、字が小さくて読めない。読むためにはズームして拡大しなければいけない。
PC画面では、ブラウザ画面の横幅を小さくした時には、横スクロールをしなければ全体を読めない。

■viewport 定義の指定
viewport 定義を head 要素内に指定。
viewport 定義は、表示領域を定義。一般的に viewport 定義が無い状態で Web ページをスマホで表示させると Web ページの横幅全体を画面に表示できるように縮小表示されるが、viewport 定義をすることでスマホの画素数に合わせた表示（横スクロール表示）を行うことができる。viewport 定義は、PC のブラウザでは通常は無視される。
▢指示例　<meta name=”viewport” content=”width=device-width,initial-scale=1.0,viewport-fit=cover”>
▢課題
スマホ画面は、横スクロールをしなければ全体を読めない。
PC 画面では、ブラウザ画面の横幅を小さくした時には、横スクロールをしなければ全体を読めない。

■横幅変動時のコンテンツ幅を設定
表示する横幅が変動しても表示領域を超えない（横スクロールが発生しない）ようにコンテンツ全体幅を設定する。
コンテンツ全体幅の調整は、以下がポイントになる。
width プロパティには、ピクセル値よりも百分率（親の幅に対する比率（%））で指定した方が横幅の変化に柔軟に対応できコンテンツ全体幅の設定には、ボックスモデルを意識する。
コンテンツ全体幅は、「content + padding + border + margin」で求めることがでる。コンテンツ全体幅を算出する時は、box-sizing プロパティの指定値によって width プロパティ値の扱いが異なる。box-sizing プロパティに「content-box」が指定されている場合の width プロパティ値は、「content」部分の幅を指定する。また、box-sizing プロパティに「border-box」が指定されている場合の width プロパティ値は、「content + padding + border」部分の幅を指定する。
max-width プロパティ（width プロパティの取ることができる最大値）を使用すると横幅の調整がしやすくなり、横スクロールしなくてよいWebページになる。width プロパティには、ピクセル値よりも百分率（親の幅に対する比率（%））で指定した方が横幅の変化に柔軟に対応できる。
▢指示例　max-width: 960px;　※コンテンツの横幅指定を width プロパティから max-width プロパティに変更。
▢課題
PC画面、スマホ画面ともに、横方向に項目を詰めすぎていで読みにくい。
PC 画面では、ブラウザ画面の横幅を小さくした時には、文字の大きさと画面幅のバランスが悪く文字が読みにくい。
スマホ画面は、文字の大きさと画面幅のバランスが悪く文字が読みにくい。

• メディアクエリについて

■Media Querie でデザインを整える
Media Queries （メディアクエリ）は、CSS スタイルに適用できるシンプルなフィルタ。メディアクエリを使用すると、画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更できる。
▢指示例　@media screen and (max-width: 760px) {　※複数の段階で指定する場合は大きい順にCSSに記述
　　　　　「760pxより小さくなったら」という指示「760pxより大きくなったら」はmini-width: 760px　
▢課題
メニュー部の文字の大きさと画面幅のバランスが悪く文字が読みにくい。

■画面サイズに合わせた表示部品の導入
画面サイズに合わせて異なる表示部品を導入することで操作性を向上させることできる。例えば、幅狭時（スマホなど）にはメニューの表示型式をハンバーガーメニューにすることで狭い画面を有効に使用することが可能になる。
ハンバーガーメニューとは、主にスマートフォンやタブレット端末に対応したWebサイトにおけるナビゲーションメニューの表示形式の一つ。 アイコンは画面の左上隅か右上隅に配置されていることが多くアイコンをクリックまたはタップすることでメニューが表示されることから「折り畳みメニュー」と呼ばれることもある。
▢指示例　HTML　<div class=”hamburger-menu”>
　　　　　CSS　div.hamburger-menu {
　　　　　　　　　　　　display: none;
　　　　　　　　｝

• Webページ制作実践

■Webページ制作実践⑤
ブラウザの画面幅を変えて背景色が変わる事を確認しよう。

■viewportをお忘れなく
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,viewport-fit=cover”>

■メディアクエリの使い方

body{
　　　 background:#ccc;
}
@media only screen and (max-width: 1280px){
　　　body {
　　　　　 background:#999;
　　　 }
}
@media only screen and (max-width: 960px){
　　　 body {
　　　　　 background:#666;
　　　 }
}
@media only screen and (max-width: 640px){
　　　 body {
　　　　　 background:#333;
　　　}
}

1280px（PC）、960px（タブレット）、640px（スマホ）と認識してみよう。
PC表示の場合は横並びのレイアウト、スマホ表示の場合は縦積みのレイアウトとし、flexプロパティを使ってレイアウトを自在に切り替えてみよう。

■モバイルフレンドリーのポイント！

• 横スクロール出さない
• 文字が小さすぎない
• ボタンが押しやすい

■おススメの手順「まずは横スクロールを無しにしよう。」

1. ブレイクポイントを決める
2. 横のスクロールバーは20px程度で計算しておく
3. widthを「%」に切り替える
4. marginを再調整する「解らなくなったらとりえず margin:0;」
5. box-sizing:border-box;で「padding」と「border」は内側にする

■トレーニング-５
実際のWebページを作成しよう。

▢先生が用意してくださったテンプレートを使用して制作したマルチデバイス対応のWebページ

• 本日の講義のまとめ

■昨日制作したカレンダーの続き

▢トレーニング-1で先生が用意してくださったテンプレートを使用して制作したマルチデバイス対応のWebページ
　写真とアクセスマップは自分で用意しました。

▢トレーニング-1で先生が用意してくださったテンプレートを使用して改造したWebページ
　9/30に制作したWebページのfooterのカラーを変更しました。