CSS repeat-yを使ったデザインレイアウト
- CSS repeat-yを使用してデザインレイアウトを作成する方法についてご質問させていただきます。左カラムと右カラムでバックグラウンドを上下に分け、右カラムの高さに合わせて2つ目のバックグラウンドを下まで伸ばす方法を教えていただきたいです。
- また、左カラムの内容が右カラムより少ない場合は、左カラムの高さに合わせるようにしています。画像をrepeat-yして表示させる方法についても不明点があります。flotすると表示がされないことがあるので、解決策をお知りになっている方のアドバイスをお願いします。
- ご存知の方は、どうぞよろしくお願いいたします！
- ベストアンサー
css repeat-yを使ったデザインレイアウト
ご質問させていただきます。 下記リンクのようなレイアウトを作ろうとしています。 http://www.anandan.co.jp/works/ 左カラムのバックグラウンドが 上下で2つに分かれており、 2つ目のバックグラウンドは右カラムの高さに合わせて 下まで伸びています。 また、左カラムの内容が右カラムより少ないときは、 左カラムの高さに合っています。（下記URL） http://www.anandan.co.jp/services/web.html 画像をrepeat-yして表示させていることは、 なんとなくわかったのですが… flotすると表示されなくなってしまったり… ご存知の方、とうぞよろしくお願いいたします！
- hs07
- お礼率66% (2/3)
- CSS
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
floatしている要素にではなく、floatしている要素の親要素に背景として指定すれば、長い方のボックスに高さが揃うように見えます。 floatする時はちゃんとクリアしてやらないと親要素に高さが反映されないので、可能ならclearプロパティで、もし無理なら親要素にoverflow:hidden;を指定しましょう。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
例えばこんな感じ・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>テスト</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <style type="text/css"> <!-- div.Main{ position: relative; margin:0px 20px; width:auto; background-color:#aaaaaa; padding: 0px 200px; } div.Main div.index,div.Main div.note{ position:absolute; top:0px; width:180px; min-height:100%; } div.Main div.index{ left:0px; background-color: #aaffaa; } div.Main div.note{ right:0px; background-color: #aaaaff; } --> </style> <link rel="START" href="../index.html"> </head> <body> <h1>テスト</h1> <div class="Main"> <h2>見出し</h2> <p>・・・・</p> <p>・・・・</p> <p>・・・・</p> <p>・・・・</p> <p>・・・・</p> <p>・・・・</p> <p>・・・・</p> <p>・・・・</p> <p>・・・・</p> <p>・・・・</p> <p>・・・・</p> <p>・・・・</p> <p>・・・・</p> <p>・・・・</p> <p>・・・・</p> <div class="index"> <ul> <li><a href="./index.html">リンク</a></li> <li><a href="./index.html">リンク</a></li> <li><a href="./index.html">リンク</a></li> <li><a href="./index.html">リンク</a></li> <li><a href="./index.html">リンク</a></li> <li><a href="./index.html">リンク</a></li> <li><a href="./index.html">リンク</a></li> <ul> </div> <div class="note"> <h3>ノート</h3> <p>・・・・・・・・・・</p> <p>・・・・・・・・・・</p> <p>・・・・・・・・・・</p> </div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
どのようにHTMLやCSSが書かれているかを調べるには Firefoxｉアドオンのfirebugを使うと一目瞭然です。 そのサイトの場合は、単純に親になるブロック要素の背景画像が繰り返されているだけですから、当然親要素の長さ分背景が続きます。 floatされている子要素の背景はありませんが、その中のブロック要素には背景や枠が指定されているため、親要素が早く終了しても背景はあります。 ただし、親要素の背景をこのfloatしている要素の長さに合わせるのはたいへん苦労します。 ただ、floatは安直にこのようなデザインができるので多用されますが、本来の目的とは少し違う使い方ですね。親要素内でfloatをさせる画像が現れたときにはややこしくなります。 親要素をrelativeなりabsoluteで指定して、このブロックはabsoluteで配置するほうが良いでしょう。
お礼
ご回答ありがとうございます。 firebugは便利ですね、活用します！ >親要素をrelativeなりabsoluteで指定して、このブロックはabsoluteで配置するほうが良いでしょう。 上記のやり方でもグレー部分が内容によって伸びるのでしょうか？ 不勉強ですみません。relative、absoluteはまったく使ったことがないのです…
関連するQ&A
- CSSでのBackground
質問です。 CSSでTRタグにBackgroundって使えますか？ 何度かやっているのですがうまくいかなくて・・・ リファレンス参照してもそれらしい記述がなくて困ってます。 下記のような感じでやってるのですが何か間違ってますでしょうか？ ちなみにインラインではなく、別ファイルでのCSS記述です。 tr#area_center_column{ background:url('画像パス') no-repeat; height:26px; } 画像パスの間違いなどはありません。 上記の記述じゃ無理ですか？ 下記の記述でも無理でした。 tr#area_center_column{ background-image:url('画像パス'); background-repeat:no-repeat; height:26px; } インラインでは画像は表示されるんですけど・・・ どなたか教えてくださいお願いします！
- ベストアンサー
- HTML
- CSSのリストタグでメニューを作ってますがレイアウトが崩れます
CSSでリストタグを使ってメニューを作成してますが、Firefoxだとメニューの幅が広く表示され本文にかぶってしまいレイアウトが崩れてしまいます。ちなみにレイアウトは2段組です。 #menu{ text-align: left; width: 175px; float: left } #menu #text ul{ list-style-type: none; margin: 0; padding: 0; border-top: 1px solid white } #menu #text li{ background-image: url("../navi_yajirusi.gif"); background-repeat: no-repeat; background-position: left center; margin: 0; padding: 0; border-bottom: 1px solid white } #menu #text li a{ color: #fff; text-decoration: none; background-color: #1b328d; background-image: url("../navi_yajirusi.gif"); background-repeat: no-repeat; background-position: left center; display: block; padding: 10px 0 10px 10px; width: 175px } #menu #text li a:hover { color: #fff; background-color: #ff0; background-image: url("../navi_yajirusi.gif"); background-repeat: no-repeat; background-position: left center } どなたか詳しい方よろしくお願いいたします。
- 締切済み
- HTML
- cssで左カラムと右コンテンツの長さをそろえる方法
cssで左カラムと右コンテンツの長さをそろえる方法 今ホームページを作っているのですが、左カラムの背景と右コンテンツの長さがそろわず困っています。 左は短めなので右が長くなっても左は短いままなのです。 【background-repeat:repeat-y;】で左の背景を繰り返しています。 どなたか分かるかた教えてください。 下のようになっています。 #wrapper…左カラムと右コンテンツ部分 #side…左カラム #main_contents…右コンテンツ部分 body{ width:930px; float:left; margin:0px; padding:0px; font-size:12px; background-color:#CCCC99; color:#333333; font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅"; line-height: 150%; height:100%; } #wrapper { margin:0px auto; background-color:#ffffcc; height:auto; min-height:100%; } #side { background-image:url(left_bg.gif); background-repeat:repeat-y; width:230px; float:left; margin:0; padding:0; } #main_contents{ width:685px; color:#333333; font-size:13px; font-family:"Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅"; line-height:170%; float:right; background-color:#ffffcc; padding-left:15px; margin:0; padding-bottom:200px; }
- ベストアンサー
- その他(ソフトウェア)
- ホームページのcssでの3段列作りのレイアウト
cssを使ってトップ一つと左、真ん中、右と3列にレイアウトをしたいのですが皆様どのようにされていますか？ テーブルを使ってやっている方が多いのですがそれを使わない方法がありましたら教えてください。 標準ではあまりテーブルは使わないようになっていたので知りたいです。 backgroundをXとYで指定すればいいのかとはうっすら思っています。それでいいのでしょうか？
- 締切済み
- HTML
- CSSでレイアウトが崩れます
CSSに挑戦したのですが、IE6.0とie7.0で若干表示がくります。 ただ、IEでは何とか表示します。 また、MAC IE5.2では、右側メインが左メニューの下に崩れて表示されてしまいます。 ドリームウィーバーでもやはり表示が崩れるのです。 cssは以下になります。 左と右のレイアウトに問題があるのでしょうか。一部省略しました。 #Wrapper { padding: 0px; width: 800px; display: block; margin: 0px; background: url(../images/bg_img_01.jpg) repeat-y bottom; height: auto; } body { margin: 0px; padding: 0px; text-align: center; color: #333333; font-size: 12px; line-height: 150%; vertical-align: middle; } #imgR { padding: 0px; float: left; width: 500px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #arrow { margin: 0px; padding: 0px; float: left; width: 500px; } #rContents { text-align: left; padding: 0px; margin-top: 30px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: #111184; } .TextRink { text-decoration: none; color: #FF6600; display: inline; margin: 0px; padding: 0px 0px 0px 5px; } #WrapperL { margin: 0px; padding: 0px; width: 215px; height: auto; float: left; } #WrapperR { padding: 0px; width: 563px; height: auto; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; } #Footer { padding: 0px; height: 52px; width: 563px; background-image: url(../images/footer.gif); background-repeat: no-repeat; display: block; float: left; background-position: bottom; margin: 50px 0px 0px; vertical-align: bottom; } .sabu-title { padding: 13px 0px 0px; } .underline1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #Header { display: block; margin: 0px; padding: 0px; height: 147px; width: 563px; background-image: url(../images/header_img.jpg); background-repeat: no-repeat; } .HeaderText { color: #FFFFFF; padding-top: 3px; margin: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 150px; font-size: 10px; }
- 締切済み
- HTML
- XHTML+CSSレイアウト ネスケ対応について
WINのIE・ Firefox・Operaではできていますが Netscape 7.1だけクリアできない問題があるので、教えてください。 HTML内は大雑把に書くと以下のような構成になっています。 <コンテンツ大枠> <エリア左（CSS・float: left;）> <ul> <li>メニュー</li> <li>メニュー</li> </ul> </左エリア> <右エリア>・・・以下略。 </コンテンツ大枠> ※コンテンツ大枠には、ページの下部まで以下のように背景を指定しています。 background: #fff url('背景.gif') repeat-y left top; overflow: auto !important; overflow /**/: hidden; そうするとネスケだけ、コンテンツ大枠部分に 縦・横スクロールバーがついてしまいます。 スクロールバーがつく分のスペースがないので レイアウトは左エリア・右エリアが縦に並んでしまい 大きく崩れてしまいます。 スクロールが現れるのはoverflowのせいだと思いますが これを消すと背景が下まで表示されなくなります。 それから、不思議なのは 左エリアにリストタグを入れていますが、これを削除すると スクロールは消えますし、レイアウトも他ブラウザ同様キレイに収まります。 この現象に経験のある方いたら教えてください。 また私の記述が間違えていたら教えてください。
- 締切済み
- HTML
- CSSレイアウトについて
cssによる3カラムを作っているのですがie6で見ると右のカラムが 落ちしてしまいます。 ie6のバグのようでdisplay: inline;を使うなどいろいろと試して みたのですがwidthとmarginの合計で1000px以内にしなければ ならないようなのですがその場合firefoxなどのブラウザで確認 すると若干ではありますが微妙に違いがでてきます。 下記のソースのように特に画像をいれなくてもbackgroundを設定 することによりカラム落ちはしなくなったのですがこの他に解決 方法はあるのでしょうか？ また、なぜbackgroundを設定することにより解決したのかも 全く意味不明なのでご存知の方がおりましたら教えてください。 #contents { width: 1000px; } #left { display: inline; float: left; width: 180px; text-align: left; background: url(); } #center { display: inline; float: left; width: 600px; margin: 0 20px; text-align: left; background: url(); } #right { display: inline; float: left; width: 180px; text-align: left; background: url(); } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ～略～ <div id="contents"> <div id="left">レフト</div> <div id="center">センター</div> <div id="right">ライト</div> </div> ～略～
- ベストアンサー
- CSS
- CSSでのレイアウトについて
CSSやHTMLのテンプレートをカスタマイズ中です。 分からないことだらけですが構成としては BODYと#maincontで分かれていまして、 画面中央に四角いコンテンツ。 サイドに背景画像が表示されるようにしたいです。 BODY部分に背景画像のbackground指示を入れると 画面一面中央コンテンツ上にも背景画像が表示されてしまいます。 画像がかぶっている中央コンテンツの文章や 外枠は画像の上から表示されて読めます。 一枚構成になっているような状態だと思うのです。 枠外背景にのみ画像を表示する方法を教えてください。 画像なしの状態では閲覧に問題はないです。 下記CSSを一部抜粋します。 どなたかご親切な方。 分かりやすくお願いします。 BODY{ font-size:～～; font-family:～～～; color:#～～～; border-top:5px #000000; solid; background-image: url(～～～); background-repeat: repeat; } #maincont{ width:600px; margin:auto; padding:30px border-left:3px #～～～ dotted; border-right:3px #～～～ dotted; }
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSレイアウト
はじめまして。CSSレイアウトについて質問させてください。 ※昨日投稿したつもりが、、、、gooに羽井されていないようなんで 再度投稿させていただきます。 ■実現したいこと。 下記URLのようなイメージを、cssで実装したいのです。 ※センタリングもします。 http://www.turn.jp/design.jpg 現状自分で組んでみると、以下URLのように表示されます。 safariでは、外枠container部分のdivが上手く表示されません。 IE6ではとりあえず表示はされていますが、投下PNGが読めない？ のか、うまくできていません。 www.turn.jp 下記にhtmlおよびcssを記載しますので どなたかアドバイスいただけると幸いです。 ■html <body> <div id="container"> <div id="wrapper"> <div id="contents"> <div id="logo"> <h1><img src="images/logo.png" width="200" height="164" alt="2lemma" /></h1> <h2><img src="images/menu.png" width="447" height="79" alt="blog" /></h2> </div> <div id="footer"> <p>Copyright©2010 All Rights Reserved.</p> </div> </div> </div> </div> </body> ■CSS @charset "Shift_JIS"; /* CSS Document */ }#container { margin: auto; width: 1000px; background-color: #959500; } #wrapper { height: 437px; width: 960px; background-image: url(../images/design.jpg); background-repeat: no-repeat; margin: 20px; } #logo { text-align: right; height: 164px; width: 200px; margin-right: 245px; margin-top: 170px; float: right; } #footer { clear: both; color:#FFFFFF; font-size:8px; padding-top: 10px; } -- 以上、宜しくお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
- CSS外部ファイルのレイアウト基本設定について
ＷＥＢを勉強中です。 ＭｄＮを見てＣＳＳ外部ファイル設定にこうありました。 body{margin:0;padding:0;color:#ffffff;background:#334455;} #wrapper{color:#000000;background:#ffffff url(img/web-153.jpg) repeat-y right;} #wrapperというのはよく#containerとも名づけられ使われているもので この中にナビゲーションや段組みレイアウトなどを使って コンテンツを入れる、bodyのすぎ下に入れ子になっているものです。 なぜbodyにcolorとbackgroundの設定があるのに#wrapperにも colorとbackgroundの設定があるのでしょうか？？ また、bodyにmargin:0;padding:0というのは必ず設定するもの なのでしょうか？？
- ベストアンサー
- HTML
お礼
ご回答ありがとうございます。 親要素にclearプロパティを指定すれば良いのですね。 試してみます！