• ベストアンサー

このページもpositionプロパティでボックスが配置されているのでしょうか？

お世話になります。 http://www.goo.ne.jp/ 上記のgooのサイトなんですけど このサイトもcssのpositionプロパティで ボックスの配置が制御されているのでしょうか？ cssファイルをみてもpositionプロパティが下部だけで ほかにみつからないのですが・・・。 どのようにして配置されているのでしょうか？ 教えてください。お願いします。

  • mixiho
  • お礼率41% (251/608)
  • CSS
  • 回答数4
  • ありがとう数3

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

  • ベストアンサー
noname#23734
noname#23734
回答No.4

#mframeで幅を決めてmargin:autoでセンタリング。 #contents-inner　float:left #contents-right　float:right で左右の幅を決めて左右に寄せて上げていろいろな詰め物をして。 #footerでclear:both http://www.goo.ne.jp/css/top_4.cssより引用 良くありがちなCSSだと思います。

その他の回答 (3)

  • ICHI-yan
  • ベストアンサー率33% (45/134)
回答No.3

えっ？？？ 私のソースではもろ、テーブルレイアウトですが？？？ IE6 win 環境です。 試しに、ヘッダのソースに td{border:5px solid red;} を追加し、テーブルのtdの部分を赤くさせたら、画面が真っ赤です。 違う場所を見てるのでしょうか？？？？？？

mixiho
質問者

お礼

こちらがみているgooのサイトは <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>goo</title> <link rel="shortcut icon" href="gooicon.ico"> <meta name="content-language" content="ja"> <meta name="description" content="NTTレゾナントが運営する安心・安全のポータルサイトです。検索、辞書、地図、乗り換え、ニュース、ショッピングなど生活に便利な機能が充実。あなたの行動を支援するメディアとして様々なサービスを展開しています。"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="/css/top_4.css" media="all"> </head> というヘッダでした。 gooのサイトのデザインも以前とは更新されていて msnみたいにすっきりした感じになっていました。 やはりtableタグは tableタグは真ん中の342行目から346行目までしか使われていませんでした。以下がその部分です。 <table border="0" cellspacing="0" cellpadding="5" width="100%"><tr><td bgcolor="#f2f2e6"> <div class="t12"><font size="-1"><a href="http://ad.goo.ne.jp/event.ng/Type=click&FlightID=34312&AdID=46984&TargetID=13597&Segments=13478&Targets=13597&Values=31,51,60,72,83,94,100,110,150,422,423,13285,13392,13586,13587,13629,13639,13769,13808,14077,14153,14441&RawValues=USERID%2Ca010133-13302-1162362281-4%2CRIP%2C60.56.59.84%2CSITEID%2Cgootop%2CKIND%2Cbadge340_1%2CCONTENT%2Cgootop_goo&Redirect=http:%2F%2Fwww.ntt.co.jp/saitai/index.html" target="_blank">【NTTグループの災害対策の取り組み】</a><br> ・災害用伝言ダイヤル「171」「web171」<br> ・「iモード」災害用伝言板サービス<br> </font></div></td></tr></table>

  • ICHI-yan
  • ベストアンサー率33% (45/134)
回答No.2

tableレイアウトです 表の中のコラムにさらに表をいれてって感じで罫線は表示させずにくみ上げていきます。入れ子ともいいます。 どのブラウザでも比較的同じように表示させるのが楽です。 cssだとブラウザやバージョンによって、プロパティの解釈が違うので、細かい指定をすると、どこかがずれ、微調節が大変になります。それを嫌って、テーブルをレイアウトに使う手法を使われています。

mixiho
質問者

お礼

え・・・？（笑） tableタグは真ん中の342行目から346行目までしか使われていませんよ。

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

主にfloat(+clear)を使用してレイアウトしているようです。 「css レイアウト float」で検索してみると色々と参考になる情報が見つかると思います。

mixiho
質問者

お礼

ありがとうございます。 参考になりました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • cssで好きな位置に好きなボックスを配置するには？

    お世話になります。 cssで文字の大きさを制御したりはできましたが、 ボックスをページの任意の箇所に配置するコードの 書き方がわかりません。 どのプロパティを用いて制御すればよろしいでしょうか？ また参考になるおすすめのサイトはありますでしょうか？ 教えてください。 お願いします。

    • ベストアンサー
    • CSS
  • ボックス内中央配置特殊版

    <div><img src="sss.jpg"></div> でdivの中央に画像を配置したいとき cssで実現しようと思ったら div{ width:100px; height:100px; display:table-cell; text-align:center; vertical-align:middle; } あたりでできそうですが、画像がボックスより小さい場合はこれでいいのですが、 今回やりたいのはボックスより大きな画像の中央をボックスの中央に配置し、 ボックスからはみ出したものはover-flow:hiddenで見切りたいのです。 cssだけで実現可能でしょうか？ js使って画像をposition:ablosute にして位置計算する手は頭に浮かんでますが、もっとシンプルにできそうな気がして質問してみました。

    • ベストアンサー
    • HTML
  • cssでボックスの配置について。

    cssを使ったレイアウト作りでボックスを横並びにし、それぞれの横幅をピクセルで設定したいのですが、どのようなプロパティをどのように使用すればいいでしょうか。

    • ベストアンサー
    • HTML
  • positionについて下記の認識で正しいでしょう

    positionについて下記の認識で正しいでしょうか？ ・relativeは動かしたい要素自体にpositionプロパティをつける。親要素にpositionプロパティはいらない。 { position: relative; top:100px; left:10px } ・absolute; 絶対。 親要素の背景 { width: 100%; position: relative; background: url(../img01.jpg) no-repeat left top; } 子要素の動かしたい要素 .box.box02 p{ position: absolute; left: 0; top: 0; } ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ・absoluteは、親要素も何も関係なしにブラウザ上の上から何PX左から何PXと指定して、要素を配置でできる。 ただし例外として、 親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。 親ボックスにpositionプロパティのstatic（初期値）以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。（個人的に単独で使う事はほぼないです） ・relativeは、親要素から、何PX左から何PXと指定して、要素を配置でできる 補足また、まとめて指定する方法はマージンのようにないのでしょうか？

    • ベストアンサー
    • CSS
  • positionについて

    positionについて教えてください box内にbox2をpositionで配置したいのですが子要素のboxに指定するpositionはrelativeとabsoluteどちらがいいですか？ また、子要素のboxにrelativeを指定した場合とabsoluteを指定した場合の表示の違いはありますか? #box { position: relative; } #box2 { position: relative; top :50px; left: 100px; width: 100px ; height: 100px ; background-color: #F90; }

    • ベストアンサー
    • CSS
  • スタイルシートでボックスを中央に表示する方法

    大ボックスを中央に配置して その中に、小ボックスを上から10、左から20の位置に配置させたいのですが、 大ボックスが中央に配置できません。 少し右側にズレてしまいます。 （ソースは文章最後にあります） そこで大ボックスの　position: absolute; 　を削除すると 中央に配置できるものの、小ボックスが外に飛び出して ブラウザを基点とした上から10、左から20の位置に配置されてしまいます。 tableタグを使わずにCSSのみで 大ボックスを中央に。 その大ボックスの中に大ボックスの左上を基点として上から10、左から20の位置に 小ボックスを配置する方法はないのでしょうか・・・。 よろしくお願い致します。 <html> <head> <title>box</title> <style type="text/css"> <!-- .boxL { /* 大ボックス */ width: 400px; height: 100px; background-color: green; position: absolute; } .box1 { /* 小ボックス */ width: 75px; height: 30px; background-color: lightblue; position: absolute; top: 10px; left: 20px; } --> </style> </head> <body> <div align="center"> 　<div class="boxL"> 　　<div class="box1">小ボックス</div> 　</div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • 文字の囲みボックスが中央に配置されません。

    文字の囲みボックスが中央に配置されません。text-align: center; をCSSのボックスのコードに追加しても、なぜか真ん中に行きません。 どうしたらよいでしょうか？回答よろしくお願いいたします。 付属画像のように真ん中に配置したいです。 コードは下にあります。 ◎ＨＴＭＬのコード <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" /> <title>お問い合わせ</title> <link rel="stylesheet" href="highcoin.css"> <style </style> </head> <body> <div class="box_css"> <p>次の注意事項を読んでください </p> </div> </body> </html> ◎◎ｃｓｓのコード（high coin) /* 電話の際の注意事項ボックスのデザイン， */ .box_css{ width:100px; margin: 5em; border: solid 3px #f83c02; background-color: rgb(255, 255, 255); text-align: center; }

    • ベストアンサー
    • CSS
  • リキッドレイアウトで親boxと子boxの位置

    CSSのpositionについて、解らないので教えていただけませんか？ アメブロを使っています。 ある程度固定されたHTMLタグ内にCSSで隙間を作り、追加のボックスを入れたいのですが、リキッドレイアウトらしくて、新しく作ったボックスの位置指定が出来ません。 ブラウザに固定するとブラウザを広げた時に位置が変わってしまうし、他のボックスをposition relative にしても、その子ボックスに入れる事が出来ません（アメブロはHTMLファイルの改変は出来ないため） 要は、ブラウザを広げたり、縮めたりすると、メインのコンテンツと新しいボックスが、右に左にずれてしまいます。 これを解消するよい方法をご存知の方居られましたら是非教えて頂けませんか？ よろしくお願いします。

    • 締切済み
    • CSS
  • CSSで画像の配置

    CSSで画像を中心に配置しようとしていますが、どのようにしていいか分かりません。 width:900px;のボックスの中で画像を中心に配置しようとしています。 画像の大きさがまちまちで、幅と高さは微妙に異なっています。 このようなときにどのようにCSSを設定したら良いでしょうか。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • グループボックス内のコンボボックスについて

    お世話になります。 WindowsXP / VC2005 / VC++ MFC / ダイヤログベースにて開発を行っています。 グループボックス内にコンボボックスを２つ配置しています。 コンボボックスにカーソルを合わせて、マウスホイールをスクロールした際、 ボックスの中身がスクロールしないのですが、スクロールする方法をご存知でしたら教えていただけないでしょうか？ グループボックス外にコンボボックスを配置した場合では、ボックスの中身がスクロールされており、 再度グループボックス内にてプロパティを変更したりと試してみたのですが、思うように行きません。 よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する