• ベストアンサー

カラムの幅ってどうやって決めていますか?

2カラムの時は、790pxとかをよく見かけましたけど、最近は全体の幅もバラバラで、2カラム、3カラムとデザインもバラバラ。 あげくにそれぞれの幅もバラバラになっていますが、これって皆さんどうやって幅を決めているのですが? いろいろ調べてはいるのですが、中途半端な数字が多いので、何か計算式にのっとって幅を決定しているのかな? と思い質問させていただきました。 いろいろ教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

特に計算とか決まりとかはないと思います。 ただ、サイト全体の幅としてモニターのサイズを考慮はします。 最近は液晶の表示領域も大きくなったのですが、それでも横幅1200pxあたりを想定します。 これは画面のサイズなので、ブラウザを全画面表示で見ないことを考慮し、かつブラウザ自身の枠などを考えると、サイトの横幅は800~1000が妥当です。 MAXを800~1000で決めた後に、ページのデザインにあわせてそれぞれの項目の幅を決めていきます。 概ね、メインコンテンツの見栄えを考慮しますので  2カラム メイン8:メニュー2  3カラム メイン6:メニュ右2:メニュー左2 のような比率になることが多いです。 3カラムの時は、左右の幅は大抵同じにします。 ただし、あくまでデザインメインなので、2カラムでメニューに見栄えのいい画像を並べる場合などは7:3とかの比率もあり得ます。 数字よりも、デザインやページの視認性に重きを置く方がユーザーにも優しいものができると思いますよ。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (3)

回答No.4

> 幅を広くしすぎると改行の際の目の動きが右から左へ大きくなり、疲れやすく読みづらくなりますので、 > 私は最大幅1000pxにしています。 自己レスですが、この考え方はやはり穴がありました。 フルハイビジョン(幅1920px)対応リビング向けテレビで、 インターネットテレビやインターネット接続ができるゲーム機を使って表示し、 テレビから3m以上離れると、1000pxでは文字が小さくて読めず、 フォントサイズを大きくすれば、頻繁に改行されて読みづらいです。 モバイル環境では800pxや480pxも考えられますし、 ピクセル数か文字数、もしくは必要があればウインドウサイズで有効なサイズになるようにしていかないとダメですね。 いずれにしても、サイズは気分次第というのに変わりありません。

全文を見る
すると、全ての回答が全文表示されます。
回答No.3

> いろいろ調べてはいるのですが、中途半端な数字が多いので、何か計算式にのっとって幅を決定しているのかな? 計算式はありません。 Fireworksで「このくらいの大きさで表示したいな」と思ったサイズを矩形でとり、 だいたい5pxか10px単位に切り上げています。 ツールの違い、切り上げるかどうかの違いだけで、ほとんどの方が同じじゃないでしょうか? 22インチワイドモニターが2万円を切るようになりましたが、 幅を広くしすぎると改行の際の目の動きが右から左へ大きくなり、疲れやすく読みづらくなりますので、 私は最大幅1000pxにしています。

全文を見る
すると、全ての回答が全文表示されます。
noname#83877
noname#83877
回答No.2

私は790pxよりは780pxで考えますね。 スクロールバーの幅ががだいたい16px程度だと思うので、解像度の低いモニターを使っていても全画面でサイトが見えるようにするためです。 さすがに横幅640pxや400pxのモニターを使っている人はいないと思われるので、現在主流と思われる17~19型(横1280px)の一つ狭い解像度の1024pxからスクロールバー等の余裕分を引いて1000px以下なら問題ないと思います。 私はさらにこれに保険をかけて800pxのモニタにも対応しようとしているだので780pxとなるわけです。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 2カラムで固定幅+可変幅のCSSは?

    2カラムのデザインで、左のカラムは幅が200px、右のカラムは幅が可変(100%から200pxを引いた値)にするにはどうすればいいのでしょうか? なお、右カラムの中身の文章はごくごく少量のときもありえます。 以上、よろしくお願いします。

    • ベストアンサー
    • CSS
  • さくらのブログの幅の変更について

    こんにちは ブログの幅って変更できますでしょうか? 内容↓ 現在さくらブログの【シンプル茶色:両】を使用して ブログを作ろうとおもっています。 ↓練習で作りました。 http://yakyuusyounenn.sblo.jp/ ただ上記の標準では幅が狭いので少し広げたいと思っています。 全然CSSについてはわかっていませんが #container{ width:800px; を1000pxにして (多分全体の幅ですよね) #content{ width:360px; と言う数字を360px;から500pxに変更したら 確かに幅は増えたのですが背景の紙?の大きさが変わりません。 このようになります。 ↓ http://yakyuusyounenn2.sblo.jp/ 理想としては 左のサイドバーの幅 250px ブログの幅 450px 右のサイドバーの幅 250px で背景の白の紙も綺麗に表示できればいいなぁと 思っているのですが・・・・ デザインの何処を変更すればいいかがわかりません。 (もしかして出来ないのかな・・・とも思っています) もし可能であれば 何とかお力を貸していただけますでしょうか? 変更前のCSSのファイルは http://yakyuusyounenn.sblo.jp/ に記載しています。 お手数お掛けしますがよろしくお願いします。 <(_ _)>

  • コラムスペーサーの幅について

    ステムの交換をしました。 交換前のステムはハイトが30mm。 交換したものは35mmあります。 交換する前は、10mmのスペーサーが3枚入っていました。 ですので、単純に5mm幅のスペーサーに入れ替えれば良いとおもうのですが・・・。 ステム上面からフォークコラムの出っ張りは2mm弱しかありません。 3mmも隙間があって大丈夫なのでしょうか? 各部品の名前が正確ではないかもしれませんが、 質問文全体から内容を推察いただければ幸いです。 昼から買いに行こうと思っていますので、 店員さんに聞けば良い話なのですが、予備知識として。 よろしくお願いします。

  • ホームページの幅なんですが

    最近YAHOOやGOOやMNSなんかも幅が広いポータルサイトが目立ってますが、1050px幅のHPってサイズ広すぎですか? 一部の中の一部・・というか少数派にまでサイズを合わせようとは思いませんので、このサイズになりました。 3カラムタイプです。

  • 線路の幅の、中途半端な数字について。

    線路の幅が1067mmとか1435mmとかで中途半端な数字なのは、元がヤード・ポンド法だからである、ということは知っています。 ですがその元の3フィート6インチ、4フィート8.5インチというのも、そもそも中途半端じゃないかと思うんですが…なぜ、4フィートとか5フィートじゃなかったんでしょう??

  • 3列コラムのデザインがブラウザによって崩れてしまう

    3列コラムのヘッダーフッター構成でページを作ったのですが IE8では問題なく表示されるのですが…(Firefox3でも問題なく表示されます)IE8以下のバージョンのブラウザでは、デザインが崩れてしまうのです… どこがおかしいのか分からず…CSSを書き出してみますので、アドバイスよろしくお願いいたします。 デザイン: ●Topページのみ3列コラムで、その他は2列コラムになっています その為、センター部分を.centと.cent2で分け、横幅を変えて調整しました。。 ●フッター部分はナビ部分とコピーライト部分と2つになっています。 .head { background-color: #ffffff; width: 100%; height: 113px; } .main  (コラム全体) { width:100%; background-color: #ffffff; border: 0px; } .left  (左コラム) { float:left; width:170px; background-color: #ffffff; padding-right: 10px; } .cent  (センターコラム topのみ) { float:left; width:421px; padding: 0px 10px 10px 15px; } .cent2  (右コラム 他ページ) { float:left; width:591px; padding: 0px 15px 10px; } .right  (右コラム topのみ) { float:left; width:175px; } .foot_menu  (フッターナビ部分)        { width:100%; clear:both; background-color: #FFFFFF;        } .foot      (フッターコピーライト部分) { clear:left; height: 42px; background-image: url(コピーライト用画像); background-repeat: no-repeat; } その他補足が必要な場合はおっしゃって下さい。 よろしくお願いいたします

    • ベストアンサー
    • HTML
  • リキッドデザイン3カラム左端幅固定の個別スクロール

    現在、リキッドデザインで幅3カラムのレイアウトをしようとしています。 左端のみ幅を178pxに固定し、中央と右のブロックはそれぞれ残りの画面を二分割し、最低幅401pxで制作した上に、それぞれのカラムを個別にスクロールさせようと考えています。 以下のコーディングでFirefoxとChrome、Safariでは想定したレイアウトを概ね実現できたのですが(厳密には中央と右のサイズが微妙に異なっていて調整できていません)、IE9以下は全てレイアウトが崩れて表示されてしまいます。 IE6はともかくとしても、IE7以降で崩れずにレイアウトを完成させる方法は無いでしょうか。 さらに欲を言えば中央と右カラムを完全に二分割のサイズにできるとありがたいです。 (こちらはできればで結構ですが。。。) おわかりいただける方、お知恵をお借りできないでしょうか。 ご迷惑をおかけしますが、よろしくお願いいたします。 ------------html------------ <div id="wrap"> <div id="contents"> <div id="wall"> <div id="nav"> 左ブロック </div> <div id="main"> 中央ブロック </div> </div> <div id="sub"> 右ブロッック </div> </div> </div> ---------------------------- ------------css------------ #wrap{ width:100%; text-align:left; min-height: 100%; font-size: 100%; } #contents{ position:fixed; overflow:auto; width:100%; min-width:980px; height:100%; margin-top:60px; } #wall{ position:fixed; overflow:auto; width:60%; min-width:579px; height:100%; } #nav{ position:fixed; overflow:auto; left:0px; width:178px; height:100%; } #main{ width:100%; min-width:401px; height:100%; margin-left:178px; } #sub{ width:40%; min-width:401px; height:100%; margin-left:60%; } ----------------------------

    • ベストアンサー
    • CSS
  • 平鋼の幅寸法

    平鋼の幅寸法は13、16、19、22、28等 キリの良くない寸法が標準となっていますが この寸法はどこからきているのでしょう? この中途半端な寸法のお陰で扱い難い時ないですか? 幅20とか30の方がいい時がよくあるので。 ここの質問と平行して製造メーカに同じ質問をしました。 <結果>(メーカ電話回答) 寸法は幅、厚み共インチ系より来ていて、それをミリに丸めている。 →回答(1)さんの読み通りでした。 色々とありがとうございました。

  • EXCELのセル幅

    友人は、全盲です。そこで、レイアウトの確認が できないのですが、自分で、出来るだけ表を、作りたいとの事です。 excelのセルの幅や高さを表す数字の単位についてお教えください。  どうやら、ミリメートルではないようなのですが、何という単位なのでしょう か。  また、その長さの単位はミリメートルに置き換えると、どれだけの長さになる でしょうか。  これがわかれば、例えば、全体で180ミリメートル幅の表を作りたい、だから、 一つのセルの幅をどれだけにすればよいかという計算ができると思っています。

  • レールが「幅170cm、長さ200cm」用のカーテンについて

    幅170cm、長さ200cmの中途半端なサイズの部屋に引越しました。 既製品だと100cmx200cmはたくさんあるのですが、私の部屋では使えませんよね?単純に計算して幅が余るわけですし...。 私の部屋に合うサイズのカーテンを探しています。何か良いアイディアがあれば教えて下さい。 また、このサイズを売っているお店があれば紹介して下さい。

このQ&Aのポイント
  • 新しいPCでUSBシンクライアントを使おうとしたが、起動ができない
  • BIOS設定でUSB Herd Diskを設定したが、立ち上がらない
  • 新しいPCにはUEFIの設定がなく、Aptio Setup Utilityが表示される
回答を見る