1限目~2限目：ボックスモデルについて
3限目~4限目：レスポンシブWEBデザインについて
5限目：本日の講義のまとめ
今日教わったこと
・ここも山で最重要ポイント
・レスポンシブWEBデザイン＝PC、タブレット、スマホなど様々なデバイスに対応できる技術のこと
・Box model=固定値の解放を意識しないといけない。
・width、height、padding、margin、border、float、clear、position、overflow、displayが理解できていればCSSはなんとかなる！
・常にmargin、border、padding、widthのすべての幅の合計値を幅100％にすることを意識する。大きくなると横スクロールバーが出てしまうので。
・CSSは必ず初期値がある。
・width
初期値はautoで数値と％の指定ができるが可能な限り％を使うようにする。-の値は指定できない。CSSでHTMLの中身や画像が適用される場所。max-width(最大で何％)とmin-width(最低で何％)は便利。
・height
これも初期値はautoで数値と％の指定ができて-の値は指定できない。と、widthと似てるがこっちはデザインの都合が可能な限り初期値のautoにしておかないとデザイン崩れに繋がったりするので固定値は入れない方がいい。あと％は使いづらい。何を基準とするんですかという話になるので。
・padding
上下左右に余白を持つことができる。CSSでbackgroundが適用される場所。数値と％の指定ができて-の値は指定できない。paddingは書いたものがそのまま余白として適用されるからわかりやすい。marginと違って相殺も起きない。「box-sizing: border-box;」を使えば内側の線で調整してくれるのでだいたい解決するかも。イラレで言うパスのオフセット。
・margin
数値と％の指定ができて-の値は指定できる。CSSでbackgroundが適用されない場所。marginは見た目がない。ややこしいポイントが多いので、marginはぶつけない、相殺をさせないような使い方をするのがコツ。箱と箱の距離を取るもの。難しいけど分かれば自由自在。
・border
「box-sizing: border-box;」を使えばだいたい解決するかも。borderは装飾のためのタグという使い方にした方がいい。↑以外で使っていると横スクロールの原因探しで最後まで見つからない事が多い。
・float
昔からのタグで更新のお仕事で出てくることが多いので覚えておいた方がいいもの。初期値はnone。使わないときはnone。必ず「clear」とセットで使うのと、float使うと中央揃えができないので右が左のどちらかに寄せる。難しいけど分かれば自由自在。
・clear
↑とのセットで覚える。初期値はnoneで使わないならnone。値に「left」「right」あるが一緒なので使うなら「both」
・position
裏ボス。分かりづらいのでテンプレ的に作っておいて使い方限定してこうやって書けばいいって思っておけばいい。思った通りに動かないときは親要素をちゃんと指定していなかったりする。使いこなせるとどんなレイアウトも出来るが頼りすぎるとこれどこの子だっけとなってややこしくなる元。
・overflow
「float」の親要素に「overflow: hidden;」が便利。初期値はvisibleでautoはブラウザ依存があるので注意。
・display
重要なシーンで使われることが多い。表組「table」の解体に必要。（スマホで画面が小さい時に表組をバラバラにして並び順を変えて見せる）
・HTMLのタグが元々インライン要素、インラインブロック要素、ブロック要素で別れて性質が違うので覚える。まずはブロックでパズルのように組み合わせてレイアウトを取る。
・Googleスマホサイトを基準に評価して検索結果の順位に反映させることを公表しているのでスマホ画面時のレイアウトが崩れていないか特に気を付ける。
スマホサイト対応ができているかの確認はGoogleの「モバイルフレンドリーテスト」で確認できる。
・小さい画面の方から先に作るか、大きい画面の方から先に作るかの方法があるけどここでは大きい→小さいから学ぶ。とりあえずはPCとスマホから作って余裕があればタブレットサイズも作ってみる。
・手順
1.幅広デザインでの Web ページ作成
2.viewport 定義の指定
3.横幅変動時のコンテンツ幅を設定
4.Media Querie でデザインを整える(実際の画面とは異なる場合もあるけどやる)
5.画面サイズに合わせた表示部品の導入
・条件付けをしていって「これになったらこれを適用」というのをPC版と変える分だけ書く。
・ハンバーガーメニューを使ってメニューが潰れることを防ぐ。（成績考査直前にやるので成績考査の作品には含まれなくてもいい）
・条件を満たしたらサイドバーを下に下げてメイン部分の表示を保つなど
・ブレイクポイント：PC画面から作り始めて、どこからタブレット対応表示に切り替えるかの位置のこと。機種によるので絶対値は指定できないので「ブレイクポイント 最新」などと検索して参考にしたりするといい。
現時点では以下を参考にする。以上、以下に気を付ける。
PC：1025px ～
タブレット：600px ～ 1024px
スマートフォン：～ 599px
・CSSは同じ得点の場合下に書いてある方が強いので気を付ける。
・margin､バラバラに書くより4つの値を書いた方が打ち消し漏れが減るのでお勧めとのこと
・mediaクエリ：打ち消したものは書かなくてもいい。その代わり新しい条件を書く
・ヘッダーのことはヘッダーの中で解決するといったようにブロックごとにまとめた方が分かりやすい
・コーディングで詰まったら一旦物理的に離れて頭を切り替えた方がいい。
コメント