今回レスポンシブ化したのは以下の記事で作成したサイトです。
ヒーローヘッダー画像の切り替え
まずPCサイトでは幅1920px、高さ1080pxの最大サイズの画像を利用していました。しかしモバイル向けにこのサイズは必要ありませんし、無駄にファイルサイズも大きくなってしまいます。
なのでモバイルの際にはヒーローヘッダーの画像を切り替えるという指定をCSS内で行います。
CSS（PC用の指定部分）
.hero {
background: url(../images/hero.jpg) 0 0 no-repeat;
}
上記の記述はそのままに、以下の記述を追加します。
CSS（モバイル用の追加部分）
@media screen and (max-width: 768px) {
.hero {
background: url(../images/mobile/mobile-hero.jpg) 0 0 no-repeat;
}
}
これでモバイルで表示した際には画像が用意した小さいサイズのものに切り替えることができます。
「@media screen and (max-width: 768px)」は、ブラウザの表示サイズが最大768pxまでの間は追加で読み込むという指定です。
一つのCSSにこのように併記してしまうこともできますし、レスポンシブ対応に関する部分だけ別CSSにして、以下の様にHTMLのヘッダ内で追加読み込みすることも可能です。
HTML
<head>
<link type="text/css" rel="stylesheet" media="screen and (max-width:768px)" href="css/mobile.css">
</head>
別々に切り出す方が階層を一つ深くしなくて済みますし、わかりやすいかと思います。
最適なmax-widthは何ピクセル？
上記の例で突然出てきた768pxという数字ですが、これはipadのブラウザの表示サイズが768pxになっているからです。
つまり上記の指定ではipadなどのタブレット、そしてそれ以下のサイズのiphoneなどのスマホ、タブレットとスマホで同一表示のレスポンシブ対応をしたということになります。
以下の2種類ですね。
- 通常のPC表示
- ipad、iphone等用のモバイル表示
中にはタブレットの時にはタブレット独自のレスポンシブデザインをしなければいけない、というような場合もあるかもしれません。
しかし現場でもほぼそのような必要があることに遭遇したことはなく、ほとんどがPCかモバイルかの2種類のデザインで作成しています。
状況は変わるかもしれませんが、現状ではその二つに対応していく形がメジャーです。
ナビゲーションメニューの表示・非表示
例えばPCでの表示で画面いっぱいに横並びでナビゲーションメニューを表示していたとします。
HTML
<ul class="navi">
<li><a href="">当サイトについて</a></li>
<li><a href="">サービスの特徴</a></li>
<li><a href="">利用料金</a></li>
<li><a href="">Q&A</a></li>
<li><a href="">お問い合わせ</a></li>
</ul>
このナビゲーションはモバイルでは完全に非表示として、モバイルでは全く別のハンバーガーメニューを実装したいとします。
既存のCSSを何とか切り替えることで実装できるならそれでもいいですが、どうやってもCSSの切り替えだけで対応できない場合もあるでしょう。
その場合には以下のようにモバイルの際にはこのナビを非表示にする、という対応がレスポンシブ対応ではよく行われます。
CSS
@media screen and (max-width: 768px) {
.navi {
display: none;
}
}
もちろんメディアクエリで「screen and (max-width:768px)」として記述した中に書く形になりますので、その点はご注意ください。
これでモバイルの際には画面いっぱいに横並びで広がる大きなナビを非表示にできます。
逆に今度はモバイル用のメニューを表示したいということになるでしょう。その場合はPCでは非表示、モバイル時に表示という以下の設定を行います。
CSS（通常）
.navi_mobile {
display: none;
}
@media screen and (max-width: 768px) {
.navi_mobile {
display: block;
}
}
わかりやすいように一緒のファイル内に記載する方法にしていますが、先ほど紹介した通り、レスポンシブ対応のCSSは別ファイルに切り分けてheadタグ内でメディアクエリを利用して読み込む方がスッキリします。
実務の際には切り分けて利用しておく方が混乱しにくいかと思います。
非表示はSEO的に良くない？
昔関係のないテキストを大量に読みこみ、その部分は非表示にしたり、文字色を背景色と同様にしたりするというスパム的なSEOが有効だった時期があります。
実は私もそれが気になって調べたのですが、通常時とモバイルでの閲覧において、利用者の利便性を考えて表示するコンテンツを切り替えるというのはレスポンシブ対応について問題なさそうということで大丈夫そうでした。
もちろん一つの要素は表示したままで、CSSの設定によって切り替えられた方が何か変更があった時などにも一か所の修正ですみます。
どうしてもCSSによる切り分けは無理そうな場合には表示・非表示による切り分けで対応するようにすると良いでしょう。
flexboxによる横並びの解除
よくある表示例ですが、コンテンツが以下のように3つのブロックで横並びになっているとします。
【コンテンツブロック1】【コンテンツブロック2】【コンテンツブロック3】
それを画面サイズの小さいモバイルでは以下の様に表示させるレスポンシブ対応をするとします。
【コンテンツブロック1】
【コンテンツブロック2】
【コンテンツブロック3】
まずは横並びにflexboxを指定した例がこちら（pxなどの数字は仮です）
HTML
<div class="flex-box">
<div class="flex-item">コンテンツ1</div>
<div class="flex-item">コンテンツ2</div>
<div class="flex-item">コンテンツ3</div>
</div>
CSS
flex-box {
display: flex;
width: 1200px;
margin: auto;
}
flex-item {
width: 400px;
height: 400px;
padding: 50px;
box-sizing: border-box;
}
これの横並びの指定を解除して、縦に並ばせるのは簡単です。以下の指定をモバイルの場合だけ追加します。
CSS
flex-box {
flex-direction: column;
width: 100vw;
align-items: center;
}
「flex-direction: column;」にて縦並びに、かつ幅をディスプレイサイズいっぱいとして中央寄せしています。
これで概ね横並びの要素をレスポンシブ対応させることは可能かと思いますが、これだと左から順に縦に並ぶこととなります。
順番の入れ替え
もしモバイルの場合は順番を以下のようにしたいとします。
【コンテンツブロック2】
【コンテンツブロック1】
【コンテンツブロック3】
その場合はCSSでorderという値を指定することで可能です。
HTML
<div class="flex-box">
<div class="flex-item item-order2">コンテンツ1</div>
<div class="flex-item item-order1">コンテンツ2</div>
<div class="flex-item item-order3">コンテンツ3</div>
</div>
CSS
.item-order1 {
order: 1;
}
.item-order2 {
order: 2;
}
.item-order3 {
order: 3;
}
まとめ
以上、具体例をいくつか見てきましたが、このようにレスポンシブ対応は表示するものをPCとモバイルで切り分けていくだけです。
サイトによって表示しているものも違うでしょうし、モバイルでのデザインが既に作成されてこのように表示するということが決まっている場合もあるでしょう。
あとはメディアクエリを利用してモバイルの場合にだけ読むCSSをうまく使い切り分けていくだけです。
ひとまずこの記事に書いている基本的なことができれば、大体のことは応用が利くのではないかと思います。
ハンバーガーメニューの実装方法なども紹介させていただこうと思ったのですが、記事が長くなってきてしまったので、そちらはまた別の記事で紹介させていただく予定です。