レイアウト変えてみた


従来は基本的に800×600(SVGAってヤツですな)の画面を想定して全てのページのレイアウトを作成してきたのですが、世の中の趨勢としてというか実際にアクセスしてくる方のうち95%以上が1,024×768(XGAってヤツですな)を超えた画面でのアクセスになっているので、横幅を1,005ピクセルまで広げてみました。
それに伴ってレイアウトを3列表示に変更してみました。 一応、XGA未満の解像度で見ても横スクロールすることなく必要なものは見えるようにと配置しています。 本当は、今の表示と左右逆にしたかったのですがゴチャゴチャ感が一層増すので、試行錯誤の末にこのような配置になりました。
ちなみに、何で1,005ピクセルなのかというと… XGA解像度のPismo上でSafariを使って見たときに最大このサイズまでは行けたので決めました。 ウチの会社のサイトも同じような視点で検討して似たようなサイズにしたと聞いたような…
なので、Windowsとか他のブラウザでは欠けが発生したりします。 Windows版IE6では右側が2ピクセル欠けるため横スクロールバーが出てしまいますし、Windows版FireFoxでは欠けは発生しないものの横スクロールバーが出てしまいます。(何で?) Mac版FireFoxではスクロールバーの太さがSafariよりも太いために欠けが発生し横スクロールバーが出てしまいます。 まぁ、でも情報量的には不足を発生しない事の確認は出来ていますので良しとします。
見え方に関しては一応FireFoxのフォントサイズ標準(Safariはだいたい中間)で良き形に見えるようにしているつもりです。 デザインはSafariでの見え方を最優先にしていますので他のブラウザやOSでは貧相に見えたりしますが仕方ありません。 特に貧相に見えるのはブラウザ問わずWindows上でなんですが、それはOSが貧相という事でやむを得ません。


2 thoughts on “レイアウト変えてみた

  1. レモン

    3カラム、いいですよね。私は途中で挫折してしまいました。だって難しいんだもの・・・。HELP ME~♪

  2. pismo

    スタイルシートをある程度マスターできると簡単です。
    例えばこのページだと
    左(左から5ピクセル目から幅190ピクセル)
    本体(左から215ピクセル目から幅560ピクセル)
    右(左から795ピクセル目から幅210ピクセル)
    という定義をして、それを使って3列表示にしています。
    絶対位置指定と相対位置指定を巧く使い分ける事もコツでしょうか。
    なかなか思った通りにならないので最初はかなり試行錯誤が必要ですが、慣れるとある程度は想像がつくようになります。
    頑張ってみてください。
    (元に戻せるように最初のCSSを取っておくのもコツですね)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です