今のホームページはレスポンシブデザインを使って、様々なキャリア（PC・タブレット・スマートフォン）に対応する様に制作されています。ですが、PCだけを考えても10インチの小型ノートPCから、30インチ近い大型ワイド液晶まで様々なサイズがあり、ホームページの横幅の設定数値によっては、横スクロールバーが表示されてしまう場合があります。
今回は大きい画面から小さい画面まで対応できるPC用ホームページの作り方です。
簡単なCSSの指定で、一般的な２カラムのデザインであれば最小値が横幅800px程度の大きさまでの対応が可能です。
サンプルコードは以下の通りです。
HTML
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表示テスト</title> </head> <body> <div id="wrapper"> <div id="conetnt">メイン</div> <div id="side-bar">サイドバー</div> </div> </body> </html>
CSS
#wrapper {
padding: 1rem;
height: auto;
max-width: 1200px; /*ここがポイント*/
margin-right: auto;
margin-left: auto;
}
#conetnt {
padding: 0px;
float: left;
height: auto;
width: 70%;
}
#side-bar {
padding: 0px;
float: left;
width: 30%;
}
解 説
外郭のプロパティをmax-widthで指定する。
たったこれだけのサイズ指定方法で小さい画面から大きな画面までの対応ができます。
サンプルコードでは、wrapperセレクタで一番外側（外郭）を最大幅1200pxで指定。この時のwidthのプロパティをmax-widthとする事で、モニタサイズが横幅1200px以上ある場合は、横幅1200pxで表示されるように設定されます。
では1200px以下の小さい画面になった時にどの様に表示されるかと言うと。
プロパティmax-widthの場合は、表示の最大幅を指定してあるだけなので、それ以下の画面サイズの場合は。画面表示に合わせた横幅100％と同じ様に表示されます。
つまり、横幅1080pxなどのノートPCなどは、横幅一杯に表示されるので、横スクロールバーは表示されません。
ただし、この時注意が必要な事があります。それは、wrapper内のブロック要素の指定方法です。
このサンプルを見て解ると思いますが、conetntとside-barの横幅は％（パーセント）による指定をしています。もしこの指定をpx（ピクセル）で指定しまうと、1200px以下の小さい画面では内側のボックスが飛び出します。その飛び出しを回避する為には、内部のブロック要素を全て％指定にしておく事が必要です。
基本的な考え方として、外側をpx指定で固めて内部に関しては、リキッドレイアウトでの制作方法を取り入れています。これは昨今の大画面液晶に対応する為です。最近のワイド画面液晶の場合、キッドレイアウトを使って、外郭を％指定してしまうと、間抜けなデザインになってしまうので、あえてサイト幅に最大値を設定して、バランスのとれたホームページを表示するようにしています。
ちょっとした、発想の転換で簡単に様々な画面サイズに適応が出来るので、お勧めです。
そうそう。この作り方でも問題が発生する場所があります。作り方次第ですがグローバルナビの表示項目が多い場合などは、小さい画面の時にナビが改行されて2段になってしまう事があります。
この辺りはナビ関連のCSSでmargin・paddingと言ったプロパティ調整や、ナビの表示項目の見直しで回避するしかありません。
個人的には、ホームページを作る時にpx指定するのは、外郭だけですね。
内部については、プロパティではpx指定せずに、%かremで対応しています。0（ゼロ）サイズ指定の時はpxですが。
margin・paddingと言ったプロパティ値はremで設定する事が多いです。
特に、レスポンシブデザインで制作している場合などは、px指定してしまうと、スマートフォンでの表示で文字間隔が狭くなってしまう場合があり、Googleのモバイル フレンドリー テストでアラートが出てしまう事があります。
よく聞くのは、レスポンシブでモバイル対応はremですると言う方法ですが、PCでも最近はremでの指定が増えています。
これからのホームページ制作は、常に画面サイズの変化に対応できるよな基本設計を考えつつ、デザインを作る必要があります。その為には最低限押さえておきたいポイントが幾つかありますが、今回の話はそのうちの重要なポイントの一つです。本当にちょっとした事ですが、これを知っているかいないかで、作業効率が変わるので覚えておくとイイと思います。
