10/29 学習内容
レスポンシブ
なぜレスポンシブしなければいけないのか？
様々なデバイスがある中でそのデバイスごとにHTMLを作るのは面倒。
一つのHTMLを変更することでPC用、タブレット用の管理、更新をできるようにする。
head内の記述
<meta name="viewport" content="width=device-width, initial-scale=1" >
metaタグとしてviewportを記載する。
※それぞれの画面幅に合わせて表示する大きさを調整するためのコード。
基本的には最初から記載されている。
メディアクエリの使い方
@media screen and (〇〇-width: △△px) { .class名{CSSプロパティ} }
※｛｝内にCSSをいれる
○○にはmin-width or max-widthを入れる。
min-width 、 max-width
min-width・・「widthの取ることのできる最小値」を指定
言い換えると要素がこれ以上小さくならない幅を指定する
使う場面：PCではちょうど良いサイズだけど、スマホだと小さい。。
デスクトップファーストでPCサイトから作る場合多様する
max-width・・「widthの取ることのできる最大値」を指定。
言い換えると要素がこれ以上は大きくならない幅を指定する
使う場面：スマホだけどちょうどいいけど、PCだと小さい。。
モバイルファーストでスマホ版から作る場合に多用する。
ブレイクポイント
「表示を切り替える画面幅のサイズは何pxかを指定する点」
画面幅が限界点を突破したとき壁を突き破って切り替わる境目のイメージ
モバイルファーストでコーディングするときの代表的な画面幅
※個々人によって異なる場合もある。
min-width: 1080px・・・PCサイズ
min-width: 768px・・・タブレットサイズ
レスポンシブの流れ
今の見た目とデザインカンプを見比べる
違いを見つける
コードに置き換えて書く
検証ツールを使う
メディアクエリのスタイルの記述場所
ベースのスタイルのすぐ下に記載する。
〈Why〉
最後に書かれたスタイルが優先して適用（上書き）されていくので、ベースのスタイルが優先されないようにするため
flex-shrink
任意のflexアイテムを縮小させるプロパティ
親要素にdisplay: flex;を、子要素にflex-shrinkを指定する
flex-shrinkの初期値は" 1 "
flex-shrink: 1 ; ←数値は比率
値が大きいほど、要素が小さく表示される。
縮小させたくない場合は、flex-shrink: 0 ;
flex基本
flex-basis
flex-shrink
レスポンシブでbrタグをシカトする方法
brのクラスにdisplay:noneするだけ
〈why〉
brタグはインライン要素
displayは要素を変形させるプロパティなのでinline→noneになって非表示になる。
たけ先生の効率化講座
ユーザースニペット
PCで言うユーザー辞書的なやつ
Emeetを登録できる
Emmeetが効かないとき
大概選択されているときのためEscキーで解決
検証ツールの使い方
この記事が気に入ったらサポートをしてみませんか？