-本日のアジェンダ-
1限目
実技 WEBページ制作実習②
レスポンシブWebデザインについて
2限目
実技 WEBページ制作実習②
RWD 対応のサイトについて
3限目
実技 WEBページ制作実習②
Webページ制作実践
4限目
実技 WEBページ制作実習②
Webページ制作実践
5限目
実技 WEBページ制作実習②
Webページ制作実践
本日のポイント
レスポンシブWebデザインを理解しましょう
RWD 対応のサイトについて
- 幅広デザインでの Web ページ作成
- viewport 定義の指定
- 横幅変動時のコンテンツ幅を設定
- Media Querie でデザインを整える
- 画面サイズに合わせた表示部品の導入
～レスポンシブWEBデザインは様々なデバイスに対応出来るので多くのサイトで採用している技術～
【メリット】
・1つのHTMLファイルで複数デバイスに対応できる。
・更新・修正やサイト制作の作業工数の軽減出来る。
・各デバイスのURL統一化SEO対策に効果的になる。
【デメリット】
・設計やデザインが複雑になる。
・PCとモバイルの内容が同じなので、ページの読み込みが重くなる可能性がある。
・常に新しいデバイスの登場に対応が必要になる。
横幅の合計値をデバイスの画面幅（100%）を超えなければ、横スクロールのバーは出ません！
【ボックスモデルに関わるセレクタ】
☑ width
☑ height
☑ padding
☑ margin
☑ border
【ボックスをレイアウトさせるセレクタ】
☑ float※今はあまり使われていない
☑ clear※今はあまり使われていない
☑ position
☑ overflow
☑ display
width
【主な内容】
初期値はauto
数値と%の指定が可能
負の値は指定できない
HTMLのテキスト、画像（img）の適用される箇所
・デザインの都合が可能な限り「％」を使用しましょう。
・「max-width」「min-width」は便利
height
【主な内容】
初期値はauto
数値と%の指定が可能
負の値は指定できない
HTMLのテキスト、画像（img）の適用される箇所
・デザインの都合が可能な限り「初期値」にしましょう。
・「width」と違い、「％」は使い難い。
padding
【主な内容】
上下左右まとめての指定が可能
数値と%の指定が可能
負の値は指定できない
CSSでbackgroudが適用される箇所
・「box-sizing: border-box;」を使えばだいたい解決するかも
・数値を入れれば絶対に余白を持ちます。（逆に効かない場合は別の何かが間違っています。）
・背景「backgroud 」に画像を持たせる時に有効
・余白の取り方に悩んだらpaddingで指定すると良いかも？！
margin
【主な内容】
上下左右まとめての指定が可能
数値と%の指定が可能
負の値が指定できる
CSSでbackgroudが適用されない箇所
・「marginの相殺」がややこしい
・「ネガティブマージン」がややこしい
・「他のセレクタとの関係性」がややこしい
・CSSが嫌わる原因はこれ…だが、理解すると自由自在のレイアウトが可能
border
【主な内容】
ボーダーのスタイル・太さ・色の指定が可能
上下左右まとめての指定が可能
数値と%の指定が可能
負の値は指定できない
初期値で「backgroud」を含む箇所だが、「box-sizing」で調整可能
・「box-sizing: border-box;」を使えばだいたい解決するかも
・後で、横スクロールの原因探しで最後まで見つからない事が多いのがコレ
float （古いプロパティ：昔は主流）
【主な内容】横並びにしたいとき
初期値はnone
floatプロパティは、指定された要素を左「left」または右「right」に寄せて配置
ただし、左か右にしか配置出来なくなり中央に揃わなくなる
その他、特殊な仕様が多々ある
・使わない時は「none」にする。（これはよく使います。）
・コーディングで一番悩ましい存在、極力使わないというのがコツかも？！
・ 「float」したら「 clear 」を徹底する
・横並びになれば、横並びの合計値になるので、ボックスの数値をしっかり把握してみましょう。
・ややこしいが「 float 」が自在に使えればどんなレイアウトも自由自在
・「ネガティブマージン」と合わせたら更に強力！
clear
【主な内容】
初期値はnone
「float」プロパティの回り込みを解除する。
「float」 と「 clear 」はセットで考えると良いかも
・値に「left」「right」あるが一緒なので使うなら「both」
・使わない時は「none」にする。（これはよく使います。）
position※多様しない
【主な内容】
positionプロパティは、ボックスの配置方法（基準位置）が、相対位置「relative」絶対位置「absolute」
を指定出来る。表示位置の指定には「top」「bottom」「left」「right」を併用して、基準位置からの距離
を設定する。
数値と「％」の値、負の値が使用可能 初期値は「 static 」
絶対位置への配置でスクロールしても位置が固定の「fixed」
・ヘッダーの固定や、ページトップへのボタンの固定に便利
・2つのセレクタを併用しなければならないのでややこしい
・負の値や、親子関係のがややこしい
・ややこしいが「 position 」が自在に使えればどんなレイアウトも自由自在
・「float」「ネガティブマージン」と合わせたら更に超強力
overflow※float使用時によく使われていた
【主な内容】
overflowプロパティはボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する。
初期値はvisible
autoはブラウザ依存があります。
・ まず「float」の親要素に「overflow: hidden;」が便利
・タッチデバイスのスクロールは操作しにくい
・初期値は「 overflow: visible;」と「height:auto;」で縦長のページは、スマートフォンならOK！？
display
【主な内容】
displayプロパティは、ブロックレベル・インライン等の、要素の表示形式を指定する際に使用
inlineは（横幅の絶対値を持てない）
blockとinline-blockは（横幅の絶対値を持てる）
noneは要素が表示を隠す事が出来てしまう。
・要素の横並びの箇所（グローバルナビ等）には必須
・非表示「 display :none;」＝【表示しない】の扱いには要注意→PC版では表示、モバイル版では非表示など
・表組「table」の解体に必要
| インライン 「display:inline;」 | インライン 「display:inline;」 | ブロック 「display:block;」 | |
| 主な用途 | 文章内 | 文章内、横並び | レイアウト、サイズ調整 |
| 主なタグ | a,storong,span | img | h1,p,ul,li,div |
| 並び方 | 横 | 横 | 縦 |
| 初期サイズ | 内容サイズ | 内容サイズ | 横は100%、縦は内容 |
| widthとheight | – | 指定可能 | 指定可能 |
| padding | 上下左右 ※余白はとってくれるが、上下の要素の位置には影響しない | 上下左右 | 上下左右 |
| margin | 左右のみ | 上下左右 | |
| line-height | 外側にかかる | 内側にかかる | 内側にかかる |
| text-align | – | 指定可能 | 指定可能 |
| vertical-align | 指定可能 | 指定可能 | – |
Viewport
<!--表示領域ブラウザ幅を１００％としてみる-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
※今後必須追加。テンプレートについかしておく
Media Queries
記述する前、記述した後でバックアップ必須！
【ブレイクポイントの設定のポイント！】
・メディアクエリは同じものだけ使う
・ブレイクポイントは同じ数値で切り分ける
・記述箇所はセレクタの直下が好ましい※人による
・プロパティと値は出来るだけ統一する
・「.css」のファイルは1ファイルが理想
・インデント・{}をしっかり揃える
・そもそもHTML文書に無理が無いのかを確認
※よく使うので、【ブレイクポイント】を覚える！！
【記述例】
body{
background: #000000;
}
@media only screen and (max-width: 1280px){
body{
background: #333333;
}
}
@media only screen and (max-width: 960px){
body{
background: #666666;
}
}
@media only screen and (max-width: 640px){
body {
background: #999999;
}
}
UI/UX
「使い易い」「役に立つ」「解りやすい」をポイントにデザイン設計を考えてみましょう。
・タッチデバイスを意識したボタン（リンク）
・迷子にさせない導線
・ページの表示スピード対策「画像」
・ページの表示スピード対策「プログラム」
・使い易さの追求
コメント