プログラミングの勉強日記
2020年5月28日 Progate Lv.61
レスポンシブデザイン
画面幅を合わせてレイアウトが柔軟に切り替えられる。レスポンシブデザインが適用されていないと、画面幅を狭めるとコンテンツが収まらなくなってしまうことがある。
レスポンシブデザインを適用するためには、<head>
タグ内にviewportを設定する。また、responsive.cssの読み込みではstylesheet.cssにメディアクエリ用のCSSを記述しても問題ないが、整理しやすいようにCSSを分割しresponsive.cssにメディアクエリ用のCSSを記述する。※responsive.cssの読み込みは必ずviewportの設定よりも後に記述する
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0"> //viewportの設定
<link rel="stylesheet" href="responsive.css"> //responsive.cssの読み込み
</head>
メディアクエリ
プラウザの画面サイズに応じてCSSのスタイルを設定できる手段のこと。@media(条件){...}
という形で記述する。この条件に当てはまるときのみCSSが適用される。条件には最大幅(max-width
)と最小幅(min-width
)を指定できる。条件を指定するときの値の部分をブレイクポイントという。
@media(max-width:1000px){
/*1000px以下の時に適用したいCSSを記述する*/
}
レイアウトの崩れを直す

要素の表示/非表示
要素の非表示:display:none;
要素の表示 : display:block;