【レスポンシブデザインとは】
→PC、タブレット、携帯などデバイスによって画面幅が変わるようにできる仕様
レスポンシブデザインを作成するにはCSSのメディアクエリを使う
【メディアクエリの使い方】
@media (max-width: 1000px) {
h1{
color:red;
}
.item {
width:50%
}
※1000pxのあとは「;」をつけないので注意
@media(max-width: 500px) {
h1{
color:blue;
}
.item{
width:100%
}
条件はmax-width(最大幅 ○px以下の場合に適用）とmin-width(最小幅 ○px以上の場合に適用）にそれぞれ条件を適用することができる。
上記の例だと500px以上はh1を青色に、1000px以上だとh1を赤色になる
また、条件が切り替わるポイントをブレイクポイントという。
.itemで画面のレイアウトをそれぞれの幅で変更するように設定している
【レイアウト崩れを直す方法】
box-sizing:border-boxを使います。
paddingを追加すると全体の容量が100%を超えてしまい、レイアウトがずれてしまうが、box-sizingを使うことで崩れないように要素の%の中で収めてくれる。ただしmariginは含まれないので注意。
全体にbox-sizingを使う際には*{ }とかきアスタリスクを使う
*{
box-sizing:border-box;
}
【viewportの設定】
レスポンシブデザインを適用するにあたって、<head>タグ内にviewportを設定する必要があります。
これをしないとスマホやタブレットでの閲覧時にメディアクエリが正しく機能しない。
また、PC画面の設定でスマホの画面を大きく上まる画面サイズになっていた場合、表示がされなくなるので、widthの割合をpxから100％に変更する必要がある。
例）responsive.cssにメディアクエリ用のCSSを記述していきます。
このresponsive.cssを読み込む際には、必ずviewportよりも下の行に記述するようにしましょう。
【タブレット向けのレスポンシブルの作成】
PCに比べて半分の大きさで表示させるために、以下のようにwidhtを50％で書くといい
@media(max-width: 1000px){
.lesson{
width:50%
}
【背景がずれている場合】
親要素の背景の範囲から子要素のimgなどがずれている場合の修正は、子要素が全てfloatの時、親要素の高さは０となってしまうという性質がある。floatは浮いているという意味があり、親要素からみると子要素がfloatだった場合存在しないという認識になる。
そのため解除が必要になる。
子要素が全てfloatでも親要素が高さを持つように設定するにはclearプロパティを使う
①まずhtmlにclearというクラス名をつけて空タグを作る。
②css でclearを設定する
.clear{
clear:left;
}
【スマホ用のサイズにレスポンシブを行う場合】
@media(max-width:670px){
.lesson:100%;
}
}
とすることで以下のように一つの要素ずつ表示されるようになる。
またスマホでの表示の時だけ、フッターのテキストをセンターにするようにする場合
footer{
text-align:center;で表示させる
ボタンを押しやすいようにスマホの場合のみボタンを画面いっぱいに広げる
【フォントのレスポンシブ化】
画面幅がタブレット、スマホの時はそれぞれ見やすい文字サイズが違うので、それに適したサイズに変更する
【画面幅が広がりすぎないようにするためにmax-widthを指定する】
mas-widthで上限幅を決めて、width:100%にすることでその上限内で幅を最大まで広げることができる。
.container{
max-width:1170px;
width:100%
}
【スマホの場合のみ右上にハンバーガーメニューを作成する】
PCやタブレットの際には通常のメニューを表示させ、スマホの場合はハンバーガーを表示させる。
①HTMLにメニューアイコンのクラスを<span>タグで作成する
②CSSにデフォルト（PCやタブレット）では非表示にする。（display:none）
③スマフォの場合、通常のメニューを削除してハンバーガーを表示させる
.header-right{
display:none
}
※通常のメニューを表示させない
.menu-icon{
display:block;
}
※ハンバーガーメニューを表示させる
"fa fa-bars"
→フォントオーサムのハンバーガーメニューを表示させている
メディアクリエについて
