ホームページ(HP)の横幅の設定
ホームページ(HP)の横幅の設定について解説しています。ホームページの横幅は800ピクセル以下も想定しましょう。ホームページの横幅を絶対指定する場合と絶対指定しない方法。ホームページの横幅の最大値を指定する方法やレスポンシブWebデザインにする方法など。
苦労して作ったホームページを自分のパソコンで表示すると問題なくきれいに表示されています。でもあなたが今見ている自分のホームページは他の人にも同じように見えているのでしょうか。ウェブページの横幅について考えてみました。
ウェブページの見え方は全ての人に違って見えます。パソコンが違えばブラウザも違い、またその設定も違います。画面の大きさも解像度も色も違います。見る人の環境が多種多様なので全く同じものは無いと思ってください。
ホームページの横幅は800ピクセルでも読めるようにしましょう
ホームページの文字は普通横書きです。ホームページの横幅が表示画面より大きいと全部が表示されないので、横スクロールバーが表示されます。その場合ページの文章を読む時、画面右端まで読んだら スクロールバー楽天 を右に動かして、表示されていない部分を表示させて読む必要があります。次にスクロールバーを左に戻して、次の行の先頭を表示させて読まなければなりません。横スクロールバーのマウス操作は非常に面倒なのが一般的です。
このような事を避けるにはホームページの横幅をあまり大きくしないことです。古いノートパソコンでは画面の横幅が800ピクセルのものもあります。最近のパソコンはそれよりもっと大きい画面のものが多いのですが、横幅を最大にして使わない人も多いようです。またお気に入りを左に出したまま使う人も多いようです。
画面の解像度が高くても、ノートパソコンのように画面サイズが小さい場合、ホームページの文字が小さいサイトが多いので、画面を拡大表示して見る人も多いようです。私もFirefoxで常に拡大表示させています。
ということで、パソコンのディスプレイ画面の横幅が800ピクセルと想定して、ホームページの横幅を730~780ピクセル程度にして作成した方が良いと思います。グーグルや楽天のアフィリエイト広告で横長の最大のものは728ピクセルとなっているのもホームページ横幅を決定する要因になります。
ホームページの横幅を絶対指定する方法
ホームページの横幅を絶対指定するのが一般によく行われています。これは横幅が決まっているので、デザインし易い為です。スタイルシートで指定したり、表の横幅を指定したりします。
しかし、この方法は横幅を狭くしていくと、横スクロールが絶対に必要になり、とても使いにくくなります。
ホームページの横幅を絶対指定しない方法(リキッドレイアウト)
私はホームページの横幅を絶対指定しないでホームページを作成しています。このようにすると見る人の環境によってホームページの横幅が動的に変化します。(リキッドレイアウトと言います。)どのような横幅でホームページを見ても、特殊な場合を除いて横スクロールの必要はありません。
極端な場合、横幅が400ピクセルでも全く横スクロールしないで文章を読むことができます。また横幅1600ピクセルでも画面いっぱいに表示され場合によっては縦スクロールの必要も無くなります。しかし画面のデザインは思い通りにはなりません。デザインより使い勝手重視です。
このようなホームページを作成するのは非常に簡単です。要するに横幅に何も指定しないだけです。表の場合も横幅に関する項目を指定しないか、横幅を相対指定(パーセント%指定)します。
ホームページの中に画像やアフィリエイト広告があることで、ブラウザの横幅が728ピクセル以下の場合は横スクロールバーが出ることがあります。この場合でもホームページ内の文字は横スクロールバーを操作しなくても全て見ることができるので大変便利です。
ホームページの横幅を絶対指定しないで、最大値を指定する方法(お勧めです)
ホームページの横幅を絶対指定しないで(リキッドレイアウト)ホームページを作成すると横幅があまりにも大きくなると、とてもデザインが崩れるものです。そこでホームページの横幅の最大値を指定する方法があることがわかりました。
私のホームページで右側の部分はCSSで次のように、max-widthを指定しています。左側部分等も含めると約910ピクセル以上にはならないようになっています。
#main {max-width:730px;margin:0 10px 10px 180px;}
910ピクセル以下では、表示幅に応じて横幅が小さくなります。とても良い感じです。インターネットエクスプローラ7(IE7)の標準モードや、FirefoxやOperaでもうまく表示できます。IE7の互換モードでは横幅の最大値は無効となります。標準モードと互換モードについては、別にページを作っていますのでそちらをごらんください。
IE6以前のIEでもmax-widthを使えるようにする(minmax.js使用)
IE6以前のIEでもmax-widthを使えるようにする方法があります。min-width max-width min-height max-heightのプロパティを利用可能にするminmax.jsライブラリをダウンロードしてヘッドタグ内に次の設定をして、minmax.jsを呼び出すだけです。
<script type="text/javascript" src="minmax.js"></script>
この方法は、minmax.js のファイル容量が4~5kB程度あり、各ページでこれを呼び出すとダウンロードに時間がかかってしまう欠点があります。
IE6以前のIEでもmax-widthを使えるようにする(* htmlハック)
IE6以前のIEでもmax-widthを使えるようにする別の方法があります。インターネットエクスプローラ7(IE7)以降の標準モードや、FirefoxやOperaでは、前記のCSSを適用してやります。IE6用にはCSSに追加してJavaScriptのexpressionメソッドを使用して適用する方法です。
expressionメソッドはIEに特有のもので他のブラウザでは無視され、「* html」スターハックというIE4~6だけに読み込ませるものを使用します。私は標準モードですので、次のように追加指定しました。
* html #main {width:expression(document.documentElement.clientWidth > 910? "730px":"auto");}
IEの標準モードでは「document.documentElement.clientWidth」として、IEの互換モードでは「document.body.clientWidth」としてください。これを間違えるとうまく動作しません。
また、「clientWidth > 910? "730px"」の数値の意味は「ブラウザの表示幅が910ピクセルより広い時は、右側の部分を730ピクセルにしなさい」という意味です。(910-180=730)
実際のブラウザでの確認方法
作成したホームページが実際どのように見えているのか確認しましょう。インターネットエクスプローラやファイヤーフォックスやネットスケープやオペラ等のブラウザで確認できれば良いのですが、無ければインターネットエクスプローラだけでも色々な設定で確認しましょう。
まずお気に入りを左に出して、画面の横幅を400~800ピクセル程度に縮めて観察してみてください。次に文字の大きさを最小から最大まで変化させてみてください。
[インターネットオプション]の[全般]タブの中の[デザイン]内の[ユーザー補助]で[Webページで指定されたフォントサイズを使用しない]等の設定を変更して自分の作ったホームページがどのように見えるかも確認しましょう。特に不自然なく表示されれば一応合格です。
レスポンシブWebデザインにする方法
私の作成したレスポンシブWebデザインのページの解説では、ウェブページのデザインをブラウザや機器の種類で判別するのではなく、ディスプレイに表示する横幅で判別して表示を切り替える方法にしています。このサイトでも採用しています。
レスポンシブWebデザインにすれば、同一のHTMLファイルをCSS3で制御して表示を最適化することができるので、ウェブページの製作や管理をしやすくなる特徴があります。レスポンシブWebデザインはSEOにも良く、グーグルでも推奨しています。
最近のスマートフォンやタブレット端末でもレスポンシブ・ウェブデザインにして対応することもできます。リキッドレイアウトとレスポンシブ・ウェブデザインでウェブページを作成されることをお勧めします。