• ベストアンサー

container(wrap)は、普通は何px

(width)ぐらいでしょうか? 特に制約がなく、パソコン用のサイトの場合です。

  • mx5gg
  • お礼率91% (433/475)
  • CSS
  • 回答数2
  • ありがとう数2

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

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

どもっ! >>container(wrap)は、普通は何px (width)ぐらいでしょうか? 特に制約がなく、パソコン用のサイトの場合です。 普通は1024pxとかに合わせるんじゃないかと思います。 で、1024pxとっちゃうとスクロールバーの幅とかも入らなくなってしまうので、 余裕を持って950pxとかにします。 普通の参考はよく人の集まるサイトですよね^^ それを参考にすると・・・ Yahoo!は950px、楽天は最低幅ですが950pxです。 OKWaveは930pxです。 そろそろ大きなディスプレイも増えてきたので1280pxとかに合わせてもいいような気がしますが、より多くの人に不自由なく見てもらうには1000未満の幅がいいのではないでしょうか。

mx5gg
質問者

お礼

ありがとうございました。私も、場合によっては1000未満の幅だと小さい気がします。例えば、最新のvalue star(http://121ware.com/valuestar/n/?pro=121pro_vs_top)でyahooのwebページを表示させると、ディスプレイの半分ほどスペースが空いてしまっていますからね。そういった大きさのディスプレイのパソコン用に幅1000以上もありなのかなと。

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

著者が制約するつもりでも利用者は自由に訪問してきます。近年は携帯電話、i-phone,i-padのような狭いウィンドウから、とても幅広のディスプレイのパソコンやインターネット対応テレビ・・。この傾向は、今後ますます進行するでしょう。  そのため、最小640px~(ウィンドウの90%)~最大900pxあたりが良いでしょう。 width:90%; min-width:640px; max-width:950px; とかね。このままでもi-phoneに対応しますが、特別考慮するときは、別のスタイルシートを適用させます。  なお、container(wrap)というclass名(id名)は、あまり望ましくありません。オーサリングツール由来のものですが、class/id名は、 【引用】____________ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )]より  あまりにこの説明が漠然としていたため、へんなclass/id名が使われてきましたが、それではということで、HTML5では、それまで「文書に構造を付加するため」のclass名を要素にすることになりました。 ・HTML5 における HTML4 からの変更点/新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) <div class="article">  <div class="header">  </div>  <div class="section">  </div>  <div class="footer">  </div> </div> とかですね。そしたら、そのまま少し書き直せばHTML5になりますし、なによりも検索エンジンはこれらの文書構造を示すclass名を理解してくれますからね。

mx5gg
質問者

お礼

ありがとうございました。 最近、HTML4、XHTMLにようやく慣れてきたのですが、HTML5が正式勧告となる2014年までに身につけていきたいです。

関連するQ&A

  • CSS #containerについて

    えっと、CSSについての質問です。 最近勉強をはじめたのですが、 #container を下まで伸ばすのに height: 100%; min-width: 100%; をいれても下まで伸びない現象がおきています。 最初は伸びていたのですが、 ヘッダーとフッターを横に100%にしてから 様子がおかしくなりました。 減ったーフッターは横に全部伸ばしたくて、 コンテイナーは横は余白つけて下にのばしたいのです>< どなたか原因がわかる方、対処法わかる方 いましたらお願いします>< ------------------------------HTML--- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index3.css"> </head> <body> <div id="container"> <div id="headerbg"> <div id="header"> <h1>header</h1> </div><!-- header --> </div><!-- headerbg --> <div id="menu"> <ul> <li><a href="">めにゅー1</a></li> <li><a href="">めにゅー2</a></li> <li><a href="">めにゅー3</a></li> <li><a href="">めにゅー4</a></li> <li><a href="">めにゅー5</a></li> <li><a href="">めにゅー6</a></li> </ul> </div> <div id="main"> <div id="contents"> </div><!-- contens --> <div id="sidebar"> </div><!-- sidebar --> </div><!-- main --> <div id="footerbg"> <div id="footer">Footer</div><!-- footer --> </div><!-- footerbg --> </div><!-- container --> </body> </html> -------------------------CSS--- html { background-image: url('hana3.jpg'); background-attachment: fixed; } body { font-family: Verdana, Arial; font-size: 20px; margin: 0px; padding: 0px; } html,body,#main,#container{ height:100%; } #container { height: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #headerbg{ width: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #header { padding: 40px; width: 100%; } #menu { } #menu>ul>li { float: left; } #main { overflow: hidden; } #sidebar { } #footerbg{ background-color: rgba(255,100,0,0.5); width: 100%; min-width: 100%; } #footer { padding: 50px; width: 100%; }

    • 締切済み
    • CSS
  • 助けてください><IE上で1pxのズレ

    こんにちわ。 組んだテーブルに謎の1pxがはいってしまいます。 ファイヤーフォックスでは正常なのですがIEでは1pxの隙間ができてしまうようで。 どなたか分かる方いらっしゃたらお願いします>< <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"> <img src="img/test_01.jpg" width="660" height="177" alt=""></td> </tr> <tr><td rowspan="2" valign="top"> <table width="316" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <img src="img/test_02.jpg" width="316" height="46" alt=""></td> </tr> <tr> <td> <img src="img/test_05.jpg" width="144" height="47" alt=""></td> <td> <img src="img/test_06.jpg" width="172" height="47" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_08.jpg" width="316" height="169" alt=""></td> </tr> </table> </td></tr> <tr><td valign="top"> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_03.jpg" width="181" height="62" alt=""></td> <td> <img src="img/test_04.jpg" width="163" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_07.jpg" width="344" height="83" alt=""></td> </tr> </table> </td></tr> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_09.jpg" width="160" height="62" alt=""></td> <td> <img src="img/test_10.jpg" width="184" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_11.jpg" width="344" height="23" alt=""></td> </tr> <tr> <td> <img src="img/test_12.jpg" width="160" height="32" alt=""></td> <td> <img src="img/test_13.jpg" width="184" height="32" alt=""></td> </tr> </table> </td></tr> </table> </td></tr> <tr><td colspan="2"> <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/test_14.jpg" width="660" height="141" alt=""></td> </tr> <tr> <td> <img src="img/test_15.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_16.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_17.jpg" width="140" height="150" alt=""></td> <td> <img src="img/test_18.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_19.jpg" width="130" height="150" alt=""></td> </tr> <tr> <td colspan="5"> <img src="img/test_20.jpg" width="660" height="40" alt=""></td> </tr> </table> </td></tr> </table>

  • コンテナ船のコンテナ、どうやって見分けてるの

    題名の通りですが、コンテナ船には、沢山のコンテナが積まれていますが、あれは、全てが一つの会社の荷物ではありませんよね?  港を出航する時や、港に着いた時、どうやって、荷物を分別するのでしょうか? わざわざ、一つ一つ中を開けて、チェックする訳じゃないですよね? コンテナの色でしょうか?コンテナに何か書いてあるのでしょうか?その場合、毎回、ペンキで行き先や荷物の内容を書き直しているのでしょうか?  独身の頃、釣りで沖合に出て、コンテナ船を見掛ける度に思っていました。誰かご存知の方、教えてください。

  • コンテナ

    40フィートコンテナに縦6センチ横30センチ長さ4メートルの木を積みたいと思いますが重さを考えない場合最大何本詰めますか?計算方法を教えてください。お願いします。

  • 1pxの表を重ねたときにその重ねた部分が2pxになってしまいます

    列数が違う表を重ねたのですが重ねた部分が2pxになってしまうので 重ねた部分も1pxで表示させたいのですがどうすればいいのでしょうか? ソースはこちらです <TABLE BORDER="0" WIDTH="400" CELLSPACING="1" CELLPADDING="5" BGCOLOR="#1C79C6"> <TR BGCOLOR="#E3F0FB"> <TD>あ</TD> <TD>い</TD> </TR> <TR BGCOLOR="#E3F0FB"> <TD>う</TD> <TD>え</TD> </TR> </TABLE> <TABLE BORDER="0" WIDTH="400" CELLSPACING="1" CELLPADDING="5" BGCOLOR="#1C79C6"> <TR BGCOLOR="#E3F0FB"> <TD>↑の部分が2pxになるのを防ぎたいです</TD> </TR> </TABLE> 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • IE6でmax-width:100px; max-height:100pxを実現にするには

    BLOGでエントリーから画像だけを読み出しサムネイルを集めたhttp://www.photocase.com/photobrowser.aspのようなページを作ろうと考えています。 画像の大きさはまちまちなのでmax-width:100px; max-height:100pxとしました。 しかしmax/min-height/widthはIE6に対応しません。 そこで▼以下の2つを試してみました。 ・max-width in Internet Explorer(IE独自のexpressionを利用)  http://www.svendtofte.com/code/max_width_in_ie/ ・minmax.js module(Java Scriptを利用)  http://doxdesk.com/software/js/minmax.html ただしこれらの使用方法に従って記載しても、max-width:100px; height:100px(縦長の画像は100px×100pxに)またはwidth:100px; max-height:100px(横長の画像は100px×100pxに)となってしまいます。 Java Script、CSS、または両方を使って解決できる方法がありましたら教えていただけませんでしょうか。 よろしくお願いいたします。

  • レスポンシブ 横1080px高解像度スマートフォン

    レスポンシブに挑戦しようとしていますが、 ちょっとよく分からくなってきたので質問させてください。 レスポンシブWEBデザインは、 例えば、次のようにデバイスの横幅によって異なるデザインのサイトを表示させるわけですよね。  @media screen and (min-width: 769px){PC向け}  @media screen and (max-width: 768px){タブレット向け}  @media screen and (max-width: 640px){スマートフォン向け} しかし、横幅が1080pxもあるスマートフォンが発売されてきましたので、 もはや、横幅ではどんなデバイスなのか分からなくなってきたと思います。 また、スマートフォンが高解像度になっても、 画面自体は小さいので、 スマートフォン用にサイトデザインを最適化する必要は変わりません。 そうすると、ユーザーエージェントで切り分ける旧式のやり方を少なくも併用しなければ、 結局、うまくいかないような気もするのですが、どうなんですかね? そのあたりについて、どのようにお考えでしょうか? ご意見お聞かせいただきたくお願い申し上げます。

    • ベストアンサー
    • CSS
  • コンテナの上下左右を囲う線のやり方は?

    こんにちは。ホームページを製作しているものです。 私のサイトでは、まず『大きなコンテナ』を定義して、その中に3つ、カラムのコンテナを定義しています。 その様な状態で『大きなコンテナ』の周りに線を引きたくて、上下左右を囲うborderを定義致しました。 border-top:1px solid #BBB; border-left:1px solid #BBB; border-right:1px solid #BBB; border-bottom:1px solid #BBB; これでInternet Explorer9では、思った通りに『大きなコンテナ』の周りが線で囲まれました。しかし、Firefox、Safari、Chrome、Operaといったブラウザでは、『大きなコンテナ』の上側の部分だけしか線が書かれませんでした。 理由を探しにググったところ、 1: http://gyauza.egoism.jp/clip/archives/2007/05/070509-background-clip/ 2: http://hajimetedesign.blog77.fc2.com/blog-entry-74.html 上記2サイトに解決法があるのではと思いました。 それは、両サイトともに以下の様な記述があり思い通りに行きそうな気がしたのです。 html , body {height:100%;} body > #container {height:auto;} #container { height:100%;/* for IE6 */ min-height:100%; background-color:#fff; border:solid #ccc; border-width:0 1px; } しかし、自分のサイトに適用してみたら上側の線は無事引かれましたが、左右側がブラウザのheightの100%の高さまでしか線が引かれず、下側の線は引かれないままでした。つまりブラウザをスクロールさせるほど高さ的にコンテンツがある場合は、左右の線は途中までしか引かれなかったのです。 上記2サイトの記述はコンテナの中に普通にコンテンツがあり、私のサイトは『コンテナの入れ子』というのが問題だと思いました。 どなたか解決方法をご教示願えないでしょうか? よろしくお願いいたします。 失礼致します。

    • ベストアンサー
    • CSS
  • WRAP の解説書

    双極性障害II型を患っています。 この前、WRAP (Wellness Recovery Action Plan) という手法があることを教えてもらいました。 患者の集まりで、教えてもらったのですが、そういうものがあるということぐらいしかわかりません。 全くのど素人なので、まずは本などをよんでみようと思い立ちました。 お勧めの素人にもわかりやすい解説書を探しています。 いい本があれば、アドバイス頂ければと思っています。 手元には、発案者の 「メアリー・エレン・コープランド」 さんの翻訳本がありますが いまひとつよくわかりません。 素人向けに、噛み砕いた本がありましたら、是非、ご教示お願いします。

  • プラスチックコンテナについて

    プラスチックコンテナや、折りたたみのコンテナが沢山の種類の中から1個でも買える通販サイトはありませんか?

専門家に質問してみよう