レスポンシブデザインの適用方法。
###画面サイズに応じた変更
▼Media Queries
メディアクエリとは、ブラウザの画面サイズに応じてCSSのスタイルを設定できる手法。
メディアクエリは、@media (条件) { .... }という様に書きます。
指定された条件が当てはまるときにのみ{ }内のCSSが適用されます。
セミコロン；は付けません。
(条件)
max-width(最大幅)：設定数値以下の時に{}内のCSS適用
min-width(最小幅)：設定数値以上の時に{}内のCSS適用
max-width: ◯◯pxと指定すると、画面幅が◯◯px以下の時に{}内のCSSを適用できます。
h1 {
color: red;
}
/* １０００px以下の画面の時に適用 */
@media(max-width:1000px){
h1 {
color: green;
}
}
####レイアウト崩れの修正
paddingで幅を加えた場合に、左右のpaddingを追加すると要素の幅の合計が100%を超えてしまい、レイアウトが崩れる場合がある。このようなレイアウト崩れは、box-sizing: border-box;を用いることで防ぐことができます。box-sizing: border-box;を適用したセレクタは要素の幅(width)の合計にpaddingとborderが含まれるようになります。（※ただし、marginはborder-boxでの合計値に含まれない）。
box-sizing: border-box;を指定するときは、*(アスタリスク)に対して指定することが推奨されています。*はすべての要素に対してCSSを適用したい場合に用います。
border-boxをすべての要素に対して適用することで、レイアウトを管理しやすくなります。
* {
box-sizing: border-box;
/*HTML全体に適用*/
}
####Viewポイント
Viewポイントを適用するためにはhtmlの<head>内に次の記述が必要
<!-- viewportを読み込むためのタグ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
####背景色が途中で切れてしまう（高さ設定の問題）
親要素の高さは子要素を包む高さとなります。しかし、子要素が全てfloatの時、親要素の高さは0となってしまうという性質があります。背景色が途中で切れてしまうという問題がある場合、要素の高さが固定されていることを疑ってください。高さがコンテンツの中身によって変わるように、変更する方法は次の通りです。
floatは「浮いている」という意味で、親要素から見るとfloatの子要素は存在しないように見えます。子要素が全てfloatでも、親要素が高さを持つように設定を変更する場合、floatはclear: left;で「浮いている」状態を解除できます。具体的にはclear: left;を適用するためだけの空のタグを用意します。
<!--floatをするための空タグ-->
<div class="clear"></div>
/* clearクラスにfloatを解除するためのCSS */
.clear {
clear: left;
}
####画面サイズが大きい場合
基本の要素のwidthが100%の場合、画面幅が2000pxなどとても大きい時も画面いっぱいに広がってしまいます。
max-width: ◯◯px;と指定すると、画面幅を拡大しても、要素の幅の上限が◯◯pxとなります。
.count {
/* max-widthを1000pxに指定 */
max-width: 1000px;
width: 100%;
padding: 0 15px;
margin: 0 auto;
}
####スマートフォンのヘッダーレイアウト
画面幅が670px以下（スマートフォンサイズ）の時にのみ適用表示されるようにします。
要素を非表示にするにはdisplay: none;を用います。
非表示にした要素を表示させる時は、display: block;を用います。
<!-- スマートフォン用のメニューアイコン -->
<span class="fa fa-bars menu-icon"></span>
.menu-icon {
color: white;
float: right;
font-size: 25px;
padding: 21px 0;
/* 基本は表示されないようdisplayをnoneに指定 */
display: none;
}
/* スマホの時は非表示にしたいクラスのdisplayをnoneに指定してください */
.header-right {
display: none;
}
/* スマホの時に表示にしたいクラスのdisplayをblockに指定してください */
.menu-icon {
display: block;
}