実技Webページ制作実習

2025.05.14

アジェンダ

1. レスポンシブWebデザインについて
2. RWD対応サイトについて
3. Webページ制作実践
4. Webページ制作実践
5. Webページ制作実践

ポイント：レスポンシブWeb デザインを理解する

課題：Webページ制作実践で作成したページのキャプチャをWordpressに貼りつける

FlowerDaysのキャプチャ

PC版

スマホ版

感想

書き終えて実際に作成したものを確認すると、つづりのミスや書き残しがかなり多かったので、見直しが大切だなと感じました。

レスポンシブWebデザインについて
書き終えたものに上書きするような形でたくさんの記述があり戸惑いましたが、書き終えて形になったものを見たときに達成感がかなりあり、とてもうれしく感じました。

BOX model　について

• width
  初期値はauto　数値、％で指定
  テキストや画像に適用
  特に指定がなければ「％」で指定するほうがいい
• height
  初期値はauto　数値、％で指定
  テキストや画像に適用
  可能な限り「auto」にしておく
• padding
  余白、backgroundが適用される部分
  数値、％で指定　上下左右まとめて指定可能
• margin
  boxとboxの間の距離
  数値、％で指定　負の値設定が可能
  上下左右まとめて指定可能
• border
  paddingの外側の枠＝borderの内側となる
  marginの内側の枠＝borderの外側となる
  枠の太さ、色などの指定が可能
  数値、％で指定　上下左右まとめて指定可能
• float
  初期値はnone
  指定された要素を左や右に寄せて配置
  中央は設定できない
  clearとセットで使用
• clear
  floatの回り込み解除　セットで使用
  left.right一緒に使うなら「both」
• position
  座標で位置指定
  top bottom left right
  相対位置、絶対位置を指定する
• overflow
  BOX内に入りきらなかったテキストなどの処理を決定
  （スクロールバーを出すなど）
• display
  ブロック、インライン、インラインブロックなどの並び方指定
  違いをしっかり把握しておく

資料：html-css.hamaya2020.com_lesson-3.htmlより引用

レスポンシブWEBデザイン

PC版サイズで作成したサイトをスマホでもデザイン崩れをしないように表示させること

横スクロールを作らないデザイン

マルチデバイス対応

• PC
• タブレット
• スマホ

margin(L3.3ボックスモデル)（付録内知恵袋）

相殺について
上下にBOXがある
・上のBOXには下に15pxの隙間を空ける指示
・下のBOXには上に30pxの隙間を空ける指示
上記の場合、数値の大きい30pxが隙間として反映される

親子関係について
上にBOXがあり下BOX内上部に子BOXがある
・上のBOXには下に15pxの隙間を空ける指示
・下のBOXには上に30pxの隙間を空ける指示
・下のBOX内上部の子BOXには上に60px空ける指示
上記の場合、数値の大きい60pxが隙間として反映される
＊子BOXが親BOXの上部ではなく下部にあるなどの条件の場合は、子BOXの60pxは反映されず、下BOXの30pxが反映される

記述例
BOX1 {margin: 上　右　下　左 ;}
BOX1 {margin: 上下　右左 ;}