レスポンシブ対応

レスポンシブWEBデザイン

受講日：2025年04月08日

• レスポンシブデザイン(RWD)とは：色々なデバイスに対応できる事。(マルチデバイス対応)
• WEBサイトは、全体の6割がスマホで閲覧される。
• Googleはモバイルフレンドリーなサイトを評価する傾向。
• レイアウトが綺麗でも、文字が小さくて読めないと、モバイルフレンドリーではない。
• ポートフォリオサイトは基本的にPCで見られる想定(採用担当も)。Wordpressは基本的にスマホ対応しているので、あまり気にしなくて良い。

レスポンシブ対応のコツ

• マルチデバイス対応のサイトの特徴は、固定値からの解放。
• ニュートラルはサイトを作るには、Box-modelの理解が必要不可欠！

Box-model (CSSのプロパティ)

• コーディングの最重要ポイント!!先生も理解する事に2年かかった。
• Box-modelは10個のポイントとなるプロパティを理解する事が大切。
  width・height・padding・margin・border・float・clear・position・overflow・display
• 固定値の解放を意識する。ニュートラルなWEBサイトを作る。
• どうやってサイトのレイアウトを作るためにBOX-modelを作る。
• 仕事は成立するけど、理解できるまでメインの仕事にできるかは探り探りの状態。
• 重要な10種類を理解する！

ニュートラルなWEBサイト作り

• 幅100%を意識してWEBサイトを作成する。
• 横幅を決めるプロパティは4種類。(width・padding・border・margin)
• サイズはpx(絶対指定)と%(相対指定)ができる。

プロパティ	初期値	サイズ指定	役割
width	auto	可能な限り％で指定。	Box-modelの起点。
padding	0	数値と％で値を指定。 負の値 指定不可。	内側の余白を取る。
border	none	数値で指定。	見た目の装飾。
margin	0	数値と％で値を指定。 負の値 指定可。	箱と箱の距離を取る。
float	none	左「left」または右「right」に寄せて配置。	コンテンツを横並びにしたい時。※現在は使われない。

セレクタ ボックスモデル

widthとheight

• 数値と％で指定可能。
• 初期値はauto。

width

• 可能な限り％で指定する。
• min-widthとmax-widthはレスポンシブ対応でとても便利なので、積極的に活用する。

height

• 可能な限り初期値にしておく。

paddingとmargin

• 上下左右まとめての余白指定が可能。
• 数値と％で指定可能。
• 初期値は0。

プロパティ	負の値の指定	background	記述の反映	上手く反映されない時
padding:	不可	適用される。	書いた通り 反映される。	大体どこかの記述を間違えている。
margin:	可	適用されない。 背景画像がない部分の余白を設定。	書いた通り 反映されない。	marginの相殺。

padding

• 迷ったらpaddingを使う。書いた通り反映されるので使いやすい。
• 背景に画像を持たせる時に有効。
• 負の値の指定が不可。

margin(要注意)

• 背景画像以外の余白を設定する時に使う。
• marginは箱と箱の処理。
• marginの相殺が厄介。発生させないためには、箱と箱をぶつけないようにする。
• 見た目じゃなくて数値・内容で理解する。backgroundが適用されないので、視覚的に見えない。

border

• borderは装飾のためのタグ。線を引いたりする。
• パスのオフセット的なノリ。
• スマホ対応が上手くできない時はコイツを疑う。

セレクタ ボックスレイアウト

float(要注意)

• コンテンツを横並びにしたい時に使う。
• 難易度：極力使わないというのがコツ。横並びで画像を載せるのは、WEBサイトの製作上、複雑で大変。
• 2010年位までのデザイナーが使っていた。横並びで画像を載せるのは、WEBサイトの製作上、複雑で大変。現在のサイトは縦長対応が主流で、基本はfloatを使わない構造にするのが推奨される。
• 自分で新規サイトを立ち上げる時は使う事はないが、古いサイトの改修時に使う。
• floatは中央寄せができない。要素を左「left」または右「right」に寄せて配置。
• ただし、左か右にしか配置出来なくなり中央に揃わなくなるので、合計値の計算が必要で、使うのが難しい。
• 使わない時は「none」にする。「float」したら「clear 」を徹底する
  floatをつかったら、必ず止める存在が必要になる。

position(要注意)

• ヘッダーの固定、TOPページへのボタンの固定などに利用。
• 難易度：position＋座標を指定するので1番複雑。
• パターンをテンプレートで覚えるのがコツ。（ヘッダー固定の時はこう、TOPページボタン固定の時はこうなど）

overflow

• スクロールバーの設置に利用。
• 「float」の親要素に「overflow: hidden;」が便利

display

• ブロックレベル・インライン等の、要素の表示形式を指定する際に使用。
• 全部のタグを制御する魔法の言葉。
• inlineは（横幅の絶対値を持てない）
• blockとinline-blockは（横幅の絶対値を持てる）
• noneは要素が表示を隠す事が出来てしまう

インライン・インラインブロック・ブロック要素の違い

• レイアウトを取る時は、ブロックを基準として考える。
• まずはブロックをパズルのようにして、レイアウトを取る。

ブレイクポイント

• どの幅（サイズ）で表示を切り替えるか。起点する数値(ポイント)。
• PC・タブレット・スマホの3つに対応する。
• iphone SE(1,334 x 750px)で表示できるサイトを目指す。(一般普及のスマホで1番小さい画面)
• 3つのデバイスに個別で対応するのは大変なので、760pxを起点にタブレット・スマホを両方対応すると良い。
• 流行のデバイスでpxのシェア率が変わるので、サイズのズレが大きくなるとメンテナンスが必要。

画面幅サイズ（px）	デバイス
1080	PCとみなす
760	タブレット・スマホとみなす
759～420	スマホとみなす

レスポンシブ Webデザインの作成方法

CSSの指定で「画面幅○○px以上の場合はA、それ以下の場合はB」という風に、同じセレクタ内で条件分けして指定していく。

レスポンシブWebデザインの作成方法

1. viewport を指定する。
2. 横スクロールが出ないようにする。
3. Media Querie を使用して横幅によって表示形式を変更する事で見やすさを向上させる。
4. ハンバーガーメニューなどの導入などで操作性を向上させる。

レスポンシブ Web デザインの実施手順

1. 幅広デザインでの Web ページを作成します。
2. viewport 定義を指定します。
3. 横幅変動時のコンテンツ幅を設定します。
4. Media Querie を使用してデザインを整えます。
5. 画面サイズに合わせた表示部品を導入します。

1.幅広デザインでの Web ページ作成

• 幅広画面（PC など）のデザインでの Web ページを作成を完成させる。

---

2.viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

width：ビューポートの横幅。device-widthでデバイスの描画領域の横幅を指定。
initial-scale：ズームの初期倍率。
viewport-fit=cover：左右の余白がなくし、画面全体に表示する。

• 記述箇所はhead 要素内。
• 表示領域を定義する。
• viewport 定義をすることでスマホの画素数に合わせた表示をを行うことができる。
• スマホで閲覧する時だけ反映されて、PC版には干渉しない。

---

3.横幅変動時のコンテンツ幅を設定する。

• 表示する横幅が変動しても表示領域を超えない（横スクロールが発生しない）ようにコンテンツ全体幅を設定。
• box-sizing：「content(コンテンツそのものの幅) + padding + border + margin」の合計値が、画面幅を超えないようにする。
• max-width min-widthプロパティを使うと横幅の調整がしやすい。

---

4. Media Querie

役割

• 横幅によってデザインを変えるための仕組み。
• 横幅(ブレイクポイント)を基準に、表示形式を変更して見やすさを向上する。
• 画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更できる。

記述

• 大きい画面サイズから順に書く。PC→スマホ・タブレット。
• セレクタの得点計算に注意！メディアクエリだけセレクタを省略してしまうと、点数で負けてしまい、760px以下の時のスタイルが適用されない。
• 初期値に戻したいものも忘れずに記述する。

---

5.ハンバーガーメニューなどの表示部品

• 画面サイズに合わせた表示部品の導入
• 例えば、幅狭時（スマホなど）にはメニューの表示型式をハンバーガーメニューにすることで狭い画面を有効に使用することが可能。

表示部品

サンプルコードの利用方法

1. サンプルコードを表示
2. ※1～4のコピー箇所がある。
3. ※1 headブロックにペースト
4. ※2 styleシートにペースト
5. ※3 HTMLの表示したいところに
6. ※4 /bodyの前にペースト

WEBパーツ例

• スライダー
• ライトボックス
• ウィンドウ遷移・画面遷移
• モーダルウィンドウ
• ページトップ
• ドリルダウン
• ドロップダウン
• パンくずリスト＞最近はあまり使わない
• パーティクル(画面負荷が重い)

フリーアイコン

実装手順

上手く反映されない時の対処法

1. 該当箇所で検証ツールを使う
2. CSSが適用されているかを確認する。
3. 該当箇所か、それより前に原因がある可能性が高いので、CSSファイルを確認する。

対応手順

1.該当箇所で検証ツールを使う

エラー発生箇所：画像が3つずつ横並びになるはずが、1個ずつになっている。

• まず該当箇所で検証ツールを使う。
• 仮説：画像が上手く並ばない₌Flexが効いてない。
• 実際のエラー：event FlexでCSSが無効になっており、Flexも無効になっている。
• 次の行動：event Flexより前の箇所が原因の可能性が高いので、遡って調査する。

---

2.原因箇所の調査

左：CSSが有効（style.css.237・230がある）
右：CSSが無効（style.css.237・230がない）

---

3.原因箇所の修正

main section.eventの@media screen and (max-width: 760px)の ｝閉じカッコがないために、それ以下を全て適用範囲としてしまっていた。修正したら治りました。

4月8日 授業の感想

受講日：2025年04月08日

• 今までの授業で特に難しいと思い、心が折れかける原因となった余白のレイアウトが、CSSの鬼門という事で、逆にこれを理解できればCSSのコツを掴んだ事になるそうなので、希望の光が見えた。
• まずpaddingとmarginが難しくて、検証ツールで1個ずつ反映を確認しながらコツを掴むしかないと思ったけど、見た目じゃなくて数値・内容で理解する必要があるという事だった。（marginは記述通りに反映されない）独学だと回り道して知る事になりそうだったので、授業で教えてもらえて良かった。
• 数値・内容で理解するためには、ブレイクポイントを把握する。
• サイトを3つくらい作れば、①実践経験としてようやく認めてもらえるかも。②色んなパターンを自分で経験できる。ので、数をこなせるよう頑張る。
• 自分の性格上、最初から頑張って完璧なサイトを作ろうとして、目標を達成できなかった時にモチベーションが大幅にダウンしてしまいそうなのと、実際の現場では時間との闘いになる事が想定されるので、目標を3つに分けてみる。

自主制作の目標

1. 60%のクオリティで良いので、1つのサイトを完成させる。
2. 60%のクオリティのサイトを、別々の構成やパターンで3つ完成させる。
3. 3つのサイトのクオリティを60%→80～100点にブラッシュアップする。
   ※あくまでも、3より他のポートフォリオや就活対策を優先する。夢中になりすぎない！

4月9日 実習日の課題

受講日：2025年04月09日

今日の授業でやった事

• 幅広デザインでの Web ページ作成
• viewport 定義の指定
• 横幅変動時のコンテンツ幅を設定
• Media Querie でデザインを整える
• ハンバーガー部品の導入

感想

• 何とかお手本サイトが完成したけど、まだ全然HTML・CSSを習得した手ごたえがないので、ここからの自主制作が本番になると思いました。
• デザインカンプの作成はとても楽しそうだけど、何も考えずに趣味全開で作成すると、コードを書く時に自分を激しく憎む事になりそうなので、他のサイトを沢山見て、パターンを掴み、実現可能なものにできるように努めたいと思います。