横幅widthをpxから%で相対指定のCSS

アクセス解析を見てみると、画面の解像度を 1024x768 で設定している人が多いようなので、ブログの横幅 px を解像度 1024x768 に合わせた長さに設定した方がいいのかなって思うんです。

たぶん、実際の長さは 1000px ぐらいの長さがちょうどいいんじゃないかなって気がするんですが、ぶっちゃけどうなんでしょうか。

アクセス解析をみてみると解像度のパターンは数百種類ぐらいあるようなんですが、わたしのディスプレイで確認できるのは、800x600 と 1024x768 のふたつだけなんです。なので、自分のブラウザではちゃんと表示されていてもくずれちゃったりってこともあるんじゃないかなって気もするんです。

なので、よくわかんないってところが正直なところなんで、どうしようかなって感じです。

web 標準な横幅 width は何 px?

画面の解像度を 800x600 と 1024x768 で設定した場合で、横スクロールバーが発生しないような、ずれの少ない感じのウェブサイトはないかなっていろいろ探してみました。

ヤフーとか、あまぞんとかをみてみたんですが、やっぱでちゃうみたいなんですよね、widthをpx指定で横幅スクロール。

ホワイトハウスとか、アドビなんかも見てみたんですが、やっぱでちゃうようなんです、横幅指定cssでのスクロールバー。

でも、ひとつだけ、ぜんぜん変わんなかったサイトがあるんですが、w3c が画面の解像度による影響がまったくないようなんです。やっぱ web標準 だけのことはあるよなって関心してしまったしだいです。

w3c では横幅widthをpxではなく、%な相対指定で設定しているようなんで、このブログも相対指定で横幅設定してみようと思います。

ブログ横幅を相対指定でのCSS

実際のスタイルシートに設定する際に、サイドバーの割合とコンテンツの割合を何%ぐらいに設定したらいいのかって疑問もあるんですが、このブログは見た感じ、6:4 ぐらいでしょうか、たぶん、そのぐらいなんじゃないかなって気がするんです。

とりあえず、コンテンツの部分を60%、サイドバーを38%で設定してみました。余白を2%ぐらいとってみたんですが、変更後、画面の解像度による違いが、わたしのブラウザではなくなってんでこれでいこうと思います。

スクリーンショット JP(※2016年8月31日サービス終了)でのキャプチャ画像を見てみても、ずれはないようなんで、こんなんでいいんじゃないかなって気がします。

ブログのフォントサイズも%で相対指定の予定

ブログの横幅widthを相対指定の%で指定したので、次はフォントサイズの相対指定に挑戦してみようって思います。

フォントサイズを絶対指定のpxで指定していたら、ブラウザでの文字の大きさの変更ができなくなるんで、アクセシビリティ的によくないんです。

フォントサイズを相対指定する際も、ブラウザによる差異が生じてくるようなんで、難しそうだなって気がするんですが、どんな感じなんでしょうか。

関連記事
  • ブログの横幅は視野領域の狭い方が見やすい
    ブログのレイアウト的には横幅が広くなってしまうと、視野の領域が左右に広がってしまって、眼球を左右に動かさなくてはいけなくなるんで、あまり見やすいブログではないなっていう印象があったりです。 一般的には...
  • CSSで初心者簡単ブログカスタマイズ方法
    初めてブログを作る際は文字の大きさや行間などを自分好みにしようと思っても、どこをどう変更していいものやらさっぱりなんですが、スタイルシートの CSS の部分をブログカスタマイズするといいようなんです。...