学科【オンライン】 2025.10.1.
授業内容
- レスポンシブWebデザインについて
- 本日の講義のまとめ
習得内容
- レスポンシブWebデザインについて
「レスポンシブWEBデザイン（Responsive WEB Design）」は、PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML（ワンソース）で実現する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意すること なく、マルチスクリーンに対応したWEBサイトを制作できる。
レスポンシブWEBデザインは様々なデバイスに対応出来る。
■メリット
・1つのHTMLファイルで複数デバイスに対応できる。
・更新・修正やサイト制作の作業工数の軽減出来る。
・各デバイスのURL統一化SEO対策に効果的になる。
■デメリット
・設計やデザインが複雑になる。
・PCとモバイルの内容が同じなので、ページの読み込みが重くなる可能性がある。
・常に新しいデバイスの登場に対応が必要になる。
■CSSはこれをしっかり覚える！
▢Box model
※横幅の合計値がデバイスの画面幅（100%）を超えなければ、横スクロールのバーは出ない。
▢width
【主な内容】
初期値はauto
数値と%の指定が可能
負の値は指定できない
HTMLのテキスト、画像（img）の適用される箇所
【指示例】
width: (100%/4);
【point】
・デザインの都合が可能な限り「％」を使用する。
・「max-width」「min-width」は便利。
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト L4.2 レイアウト系プロパティ
https://html-css.hamaya2020.com/lesson-4.html#L4-2-1
▢height
【主な内容】
初期値はauto
数値と%の指定が可能
負の値は指定できない
HTMLのテキスト、画像（img）の適用される箇所
【指示例】
height: auto;
【point】
・デザインの都合が可能な限り「初期値」にする。
・「width」と違い、「％」は使い難い。
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト L4.2 レイアウト系プロパティ
https://html-css.hamaya2020.com/lesson-4.html#L4-2-1
▢padding
【主な内容】
上下左右まとめての指定が可能
数値と%の指定が可能
負の値は指定できない
CSSでbackgroudが適用される箇所
【指示例】
padding: 10px 10px 10px 30px;
【point】
・「box-sizing: border-box;」を使えばだいたい解決するかも
・数値を入れれば絶対に余白を持つ。（逆に効かない場合は別の何かが間違っている。）
・背景「backgroud 」に画像を持たせる時に有効
・余白の取り方に悩んだらpaddingで指定すると良いかも？！
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト L4.4 パディング系プロパティ
https://html-css.hamaya2020.com/lesson-4.html#L4-4
▢margin
【主な内容】
上下左右まとめての指定が可能
数値と%の指定が可能 ※何も指示しないと左寄せになる
負の値が指定できる
CSSでbackgroudが適用されない箇所
【指示例】
margin: 0 0 0 auto;
【point】
・「marginの相殺」がややこしいので相殺しないようなデザインを心掛ける
・marginはぶつけない
・「ネガティブマージン」がややこしい
・「他のセレクタとの関係性」がややこしい
・CSSが嫌わる原因はこれ…だが、理解すると自由自在のレイアウトが可能
・Webページで見えない部分なので数値で理解する
・箱と箱の距離をとるイメージ
・難易度はボス前
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト L4.5 マージン系プロパティ
https://html-css.hamaya2020.com/lesson-4.html#L4-5
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト margin プロパティの注意事項
https://html-css.hamaya2020.com/tips-margin.html
▢border
【主な内容】
ボーダーのスタイル・太さ・色の指定が可能
上下左右まとめての指定が可能
数値と%の指定が可能
負の値は指定できない
初期値で「backgroud」を含む箇所だが、「box-sizing」で調整可能
【指示例】
border: 2px #f00 solid;
【point】
・「box-sizing: border-box;」を使えばだいたい解決するかも
・後で、横スクロールの原因探しで最後まで見つからない事が多いのがコレ
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト L4.3 ボーダー系プロパティ
https://html-css.hamaya2020.com/lesson-4.html#L4-3
▢float
【主な内容】
初期値はnone
floatプロパティは、指定された要素を左「left」または右「right」に寄せて配置
ただし、左か右にしか配置出来ないため、中央に揃える指示はできない
その他、特殊な仕様が多々ある
【指示例】
float: none;
【point】
・使わない時は「none」にする。（これはよく使う）
・コーディングで一番悩ましい存在、極力使わないというのがコツかも？！
・ 「float」したら「 clear 」を徹底する
・横並びになれば、横並びの合計値になるので、ボックスの数値をしっかり把握してみよう。
・ややこしいが「 float 」が自在に使えればどんなレイアウトも自由自在
・「ネガティブマージン」と合わせたら更に強力！
・現在はdisplay flexを使用するのが主流
・難易度はボス並み
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト L4.2.7 float/clear プロパティ（回り込み／回り込み解除）
https://html-css.hamaya2020.com/lesson-4.html#L4-2-7
▢clear
【主な内容】
初期値はnone
「float」プロパティの回り込みを解除する。
「float」 と「 clear 」はセットで考えると良いかも
【指示例】
clear: both;
【point】
・値に「left」「right」あるが一緒なので使うなら「both」
・使わない時は「none」にする。（これはよく使います。）
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト L4.2.7 float/clear プロパティ（回り込み／回り込み解除）
https://html-css.hamaya2020.com/lesson-4.html#L4-2-7
▢position
【主な内容】
positionプロパティは、ボックスの配置方法（基準位置）が、相対位置「relative」絶対位置「absolute」
を指定出来る。表示位置の指定には「top」「bottom」「left」「right」を併用して、基準位置からの距離
を設定する。
数値と「％」の値、負の値が使用可能 初期値は「 static 」
絶対位置への配置でスクロールしても位置が固定の「fixed」
【指示例】
{ position: fixed; bottom: 0; left: 0;}
【point】
・ヘッダーの固定や、ページトップへのボタンの固定に便利
・2つのセレクタを併用しなければならないのでややこしい
・負の値や、親子関係のがややこしい
・ややこしいが「 position 」が自在に使えればどんなレイアウトも自由自在
・「float」「ネガティブマージン」と合わせたら更に超強力！
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト
L4.2.8 position/top/left/bottom/right プロパティ（要素の配置方法）
https://html-css.hamaya2020.com/lesson-4.html#L4-2-8
▢overflow
【主な内容】
overflowプロパティはボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する。
初期値はvisible
autoはブラウザ依存がある。※はみ出た時だけスクロール表示
【指示例】
overflow: hidden;
【point】
・ まず「float」の親要素に「overflow: hidden;」が便利
・タッチデバイスのスクロールは操作しにくい
・初期値は「 overflow: visible;」と「height:auto;」で縦長のページは、スマートフォンならOK！？
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト
▢display
【主な内容】
displayプロパティは、ブロックレベル・インライン等の、要素の表示形式を指定する際に使用
inlineは（横幅の絶対値を持てない）
blockとinline-blockは（横幅の絶対値を持てる）
noneは要素が表示を隠す事が出来てしまう。
【指示例】
{display: block; height: 50px;}
{display: inline;}
{display: block;}
block, inline, inline-blockの３つは覚えよう！
【point】
・要素の横並びの箇所（グローバルナビ等）には必須
・非表示「 display :none;」の扱いには要注意
・表組「table」の解体に必要
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト L4.2.10 display プロパティ（要素の表示方法）
https://html-css.hamaya2020.com/lesson-4.html#L4-2-10
- レスポンシブWebでデザイン（RWD） 対応のサイトについて
レスポンシブWebデザイン（RWD）を理解して画面サイズの異なる複数のデバイスでも快適に閲覧できるWebサイト（ページ）を作成しよう。
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト Lesson-11 RWD 対応のサイトを作りましょう
https://html-css.hamaya2020.com/lesson-11.html
■レスポンシブWebでデザイン（RWD）の考え方
Web サイトの閲覧デバイスは、PC、スマホ、タブレットなどと多様化してきており、Web サイト作成時には、画面サイズが異なる色々なデバイスでも快適に閲覧できるようにすることが求められている。
Web サイトを複数のデバイスに対応させる方法として、デバイス単位にソースコードを用意する方法と、一つのソースコードで複数のデバイスに対応する方法がある。後者の方法は「ワンソース・マルチデバイス」という考え方であり「レスポンシブWebデザイン」という手法が用いられる。
「レスポンシブ Web デザイン」は、情報は一つの HTML に記述しておき、デバイスによって異なるデザインは、CSS の指定で変更する。
Web サイトがスマホで閲覧する時のデザインが最適化されており、スマホを利用する人が快適な状態になることを「モバイルファースト」とい
検索エンジンの Google では、モバイルファーストインデックス（MFI）として Web サイトのインデックス登録や検索順位に PC サイトではなくスマホサイトを基準に評価を行うことを発表している為 Web サイト作成時は、スマホサイト対応を実施しよう。スマホサイト対応ができているかの確認を行う時は、Google の公式ツールである「モバイルフレンドリーテスト」を使用してみよう。
■各スマホの画面サイズはGoogleの検証ツールで確認
検証ツールで出てこないスマホの機種は、検索サイトで検索して確認できる
■幅広デザインでの 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;
｝
■ブレイクポイントの考え方
ブレイクポイントとは、CSS ソース内で適用スタイルを区切る位置（Media Querieの設定値）のこと。 たいていは画面の横幅サイズを使ってブレイクポイントが作られる。 レスポンシブ Web デザインを採用する際には、ある画面サイズを境界にしてスタイルを分割したい場合がある。 そのサイズがブレイクポイント。
適切なブレイクポイントは、市場で使用されているデバイスの画面幅に依存しますので市場のデバイス状況により適切なブレイクポイントも変化する。毎年情報は更新されていて、端末ごとの使用率が記載されている。
切り替えるポイントはいくつも設けないようにする。
現時点では、以下のブレイクポイント値を参考にする。
PC1025px ～
タブレット760px ～ 1024px
スマートフォン～ 599px
■画像の解像度（Retina ディスプレイ）
Retina ディスプレイとは Mac や iPhone などの Apple 製品に搭載されている高精細ディスプレイのこと。
通常のディスプレイでは、論理ピクセルと物理ピクセルが 1 対 1 で構成されているが、Retina ディスプレイでは、スケーリングという技術を使用して、2倍（1 論理ピクセル = 4 物理ピクセル）や 3 倍（1 論理ピクセル = 9 物理ピクセル）で構成。
Retina ディスプレイの性能を生かすためには、論理ピクセルの 2 倍や 3 倍のピクセル数を持った画像ファイルを用意しておくことが必要になってくるが、この場合では通常のディスプレイ（1 倍）でも大きなサイズの画像ファイルを使用することになり表示速度の低下を発生させることになる。
表示速度の低下を防ぐために HTML の img 要素に srcset 属性が追加されて複数の画像ファイルから適切なサイズのファイルを選択することが可能になっている。
Photoshopで画像の書き出しは可能。
- 本日の講義のまとめ
■文字を囲みの中に納めたい時
▢word-break: break-all;（英語も日本語も表示範囲で改行）
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト 文字の折り返し
https://html-css.hamaya2020.com/tips-word-break.html
■Web サイトを開発する時に知っておいてほしい事項
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト Appendix-3 知恵袋（Tips）
https://html-css.hamaya2020.com/appendix-3.html