HP作成 Menu |迷惑書込対策 |迷惑メール対策 |メール送信規制 |BBSログ変換 |メールCGI改造 |テキストメニュー |HTML一括変更 |外部Menu file |外部CSS |段組レイアウト |表示の速いHP |HPの横幅 |HPの背景 |HPの文字 |HPの見出し |HPのタイトル |htaccess機能 |Adsenseクリック規制 |HPビルダー起動時間 |複数パソコンでHP更新 |文字の大きさ変更 |ページ内検索
ホームページ(HP)の横幅の設定
苦労して作ったホームページを自分のパソコンで表示すると問題なくきれいに表示されています。でもあなたが今見ている自分のホームページは他の人にも同じように見えているのでしょうか。
普通は違って見えます。パソコンが違えばブラウザも違い、またその設定も違います。画面の大きさも解像度も色も違います。見る人の環境が多種多様なので全く同じものは無いと思ってください。
今回は画面の横幅について考えてみます。
2008年4月
スポンサード リンク
ホームページの横幅は800ピクセル以下にしましょう
ホームページの文字は普通横書きです。ホームページの横幅が表示画面より大きいと全部が表示されないので、横スクロールバーが表示されます。その場合ページの文章を読む時、画面右端まで読んだらスクロールバーを右に動かして、表示されていない部分を表示させて読む必要があります。次にスクロールバーを左に戻して、次の行の先頭を表示させて読まなければなりません。横スクロールバーの操作は非常に面倒なのが一般的です。
このような事を避けるにはホームページの横幅をあまり大きくしないことです。古いノートパソコンでは画面の横幅が800ピクセルのものもあります。最近のパソコンはそれよりもっと大きい画面のものが多いのですが、横幅を最大にして使わない人も多いようです。またお気に入りを左に出したまま使う人も多いようです。
ということで、パソコンのディスプレイ画面の横幅が800ピクセルと想定して、ホームページの横幅を730〜780ピクセル程度にした方が良いと思います。グーグルや楽天のアフィリエイト広告で横長の最大のものは728ピクセルとなっているのもホームページ横幅を決定する要因になります。
ホームページの横幅を絶対指定する方法
ホームページの横幅を絶対指定するのが一般によく行われています。これは横幅が決まっているので、デザインし易い為です。スタイルシートで指定したり、表の横幅を指定したりします。
ホームページの横幅を絶対指定しない方法
私はホームページの横幅を絶対指定しないでホームページを作成しています。このようにすると見る人の環境によってホームページの横幅が動的に変化します。どのような横幅でホームページを見ても特殊な場合を除いて横スクロールの必要はありません。
極端な場合、横幅が400ピクセルでも全く横スクロールしないで文章を読むことができます。また横幅1600ピクセルでも画面いっぱいに表示され場合によっては縦スクロールの必要も無くなります。しかし画面のデザインは思い通りにはなりません。デザインより使い勝手重視です。
このようなホームページを作成するのは非常に簡単です。要するに横幅に何も指定しないだけです。表の場合も横幅に関する項目を指定しないか、横幅を相対指定(パーセント%指定)します。
ホームページの中に画像やアフィリエイト広告があることで、ブラウザの横幅が728ピクセル以下の場合は横スクロールバーが出ることがあります。この場合でもホームページ内の文字は横スクロールバーを操作しなくても全て見ることができるので大変便利です。
スポンサード リンク
実際のブラウザでの確認方法
作成したホームページが実際どのように見えているのか確認しましょう。インターネットエクスプローラやファイヤーフォックスやネットスケープやオペラ等のブラウザで確認できれば良いのですが、無ければインターネットエクスプローラだけでも色々な設定で確認しましょう。
まずお気に入りを左に出して、画面の横幅を400〜800ピクセル程度に縮めて観察してみてください。次に文字の大きさを最小から最大まで変化させてみてください。
[インターネットオプション]の[全般]タブの中の[デザイン]内の[ユーザー補助]で[Webページで指定されたフォントサイズを使用しない]等の設定を変更して自分の作ったホームページがどのように見えるかも確認しましょう。特に不自然なく表示されれば一応合格です。
HP作成 Menu |迷惑書込対策 |迷惑メール対策 |メール送信規制 |BBSログ変換 |メールCGI改造 |テキストメニュー |HTML一括変更 |外部Menu file |外部CSS |段組レイアウト |表示の速いHP |HPの横幅 |HPの背景 |HPの文字 |HPの見出し |HPのタイトル |htaccess機能 |Adsenseクリック規制 |HPビルダー起動時間 |複数パソコンでHP更新 |文字の大きさ変更 |ページ内検索
Car Evolution |Tomy's HP |このページの先頭
