TECH EXPERT 23日目 レスポンシブWEBデザイン
レスポンシブ対応のWebサイトを作る。
レスポンシブWebデザイン：画面幅によって見た目が変わるように、デザインを設計することをレスポンシブWebデザインと呼ぶ。
現在では、ユーザーがスマホやタブレットでサイトを閲覧することが主流なため、レスポンシブ対応は必須！！
レスポンシブWebデザイン対応の工程
①表示領域の設定をする
②画面サイズによってCSSを切り替えるための設定をする
③画面サイズごとに適用するCSSを記述する
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
事前準備
Noto Sans JP フォント Web現場ではよく使われるフォント
インターネットから読み込みが必要 Link要素でURL引っ張る→ Webフォント
GoogleFonts
Googleが提供するWebフォントのサービス 完全無料 様々なフォント
いろいろなフォント無料で使える。情報は宝です。
企画、ペルソナでクライアントにあった
フォントでサイトデザインすることを意識すべし。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
①表示領域の設定をする
スマホで表示するときに縮小して表示されないようにする。
viewportを設定する。 HTMLのheadタグ内に下記を記述
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
>
contentプロパティにwidth=device-width を指定することで
ブラウザの大きさを機器に合わせることができる。
※ initial-scaleは、画面の拡大率
②画面サイズによってCSSを切り替えるための設定をする
@media (max-width/min-width: 〇〇〇px) { }
という記述をメディアクエリという。
使用例＃画面幅が500px以下の時にのみ、pタグのfont-sizeを10pxにしたい
@media (max-width: 500px) {
p {
font-size: 10px
}
}
※ max-widthに対してmin-widthも存在
Webサイトをレスポンシブ対応させるときには、この記述を使ってレイアウトや文字の大きさなどをデバイスの幅に合わせて調節する。
ブレークポイント：メディアクリエによって規定したスタイル適用の分岐点
上記の場合は ５００pxがブレークポイント
ブレークポイントの値を何pxにするか、何箇所ブレークポイントを置くかは制作するWebサイトの要件による。
③画面サイズごとに適用するCSSを記述する
/* PC表示時 */
p {
font-size: 30px
}
/* タブレット表示時 */
@media (max-width: 1000px) {
p {
font-size: 25px
}
}
/* スマホ表示時 */
@media (max-width: 500px) {
p {
font-size: 20px
}
}
確認方法
指定したデザインになってるかは検証モード（サイト右クリック）
検証ツールのデバイスモード（右サイドバー上のスマホマーク）では、様々なデバイスのサイズでWebサイトの表示が確認できる。500px と501px で比較
