レスポンシブデザイン

2845 ワード
メディアクエリ HTML レスポンシブデザイン プログラミング勉強日記 CSS HTML テキストリンク

プログラミングの勉強日記

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を記述する*/
}

レイアウトの崩れを直す


　要素（水色の四角）がwidth:25％で指定されているのところで、左右のpaddingを加えると要素幅の要素の合計が100％を超えてしまい、レイアウトが崩れてしまう。そこで、右のようにするためにはbox-sizing:border-boxを使うと要素の幅の合計にpaddingとborderが含まれるようになる。しかし、marginはbox-sizingでの合計値に含まれない。
　また、指定するときには*（アスタリスク）ですべての要素に対してCSSを適用することが推奨されている。
　

floatと親要素の関係

　通常は親要素の高さは子要素を包む高さとなる。しかし、子要素がfloatのとき親要素の高さは0になってしまう。（float(浮いている)は親要素から見るとfloatの子要素は存在しないように見えてしまうから）
　→float:leftはclear:leftで浮いている状態を解除できる。
　　☆float:left;を適用するためだけの空タグを用意する。<div class="clear"></div>を入れる。

要素の表示/非表示

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