- ベストアンサー
CSSでレイアウト（絵参照）を組むにはどうすればいいですか？
CSS勉強中のものです。 よく見かけるこのような感じのレイアウトで配置したいんですが・・・ ■■■■ □□□タイトル□□□ ■画像■ ○○○テキスト○○○ ■■■■ ○○○テキスト○○○ どうすればいいのでしょうか？ 初心者の私が思いつくのは、「画像」と「タイトル」と「テキスト」それぞれを一つの大枠で囲んで、 画像を「フロート：left」 タイトルを「フロート：right」 テキストを「フロート：right、マージン：タイトル分のpx」 このようにすればできるとは思うんですが、なにか面倒なような気がします。 また、あまり複雑にしてしまうとIE以外のブラウザなどで問題が起きそうな気がしますし・・・ いろいろ方法はあるとは思うのですが、最適なやり方を教えていただけないでしょうか？ どうかよろしくお願いいたします。
- nanashiya
- お礼率75% (41/54)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こういうのは、画像があってその題名や説明を書いていることが多 いので、DLを使うのがいいでしょう。 とすると、HTMLは <dl class="hoge"> <dt><img src="gebo.gif"> <dd>title<br>text </dl> で、CSSは DL.hoge dt { clear: both; } DL.hoge img { float:left; max-width: 100px; } DL.hoge dd{ margin-left: 110px; } みたいな感じで済むんじゃないでしょうか。
その他の回答 (1)
とても古典的な書き方になるかもしれませんがご参考までに。 画像の大きさを「200×200」とした場合で書いてみました。 <head> <title></title> <style type="text/css"> <!-- .t1{ float: left; width: 200px ;/*画像の幅*/ height: 220px ;/*画像の高さ＋20pxに指定します*/ background-image : url(sample.gif);/*画像ファイル名は任意*/ } .t2{ width: 200px ;/*タイトル枠の幅*/ height: 10px ;/*タイトル枠の高さ*/ background-color: #ffffff;/*タイトル背景の色*/ text-align: center;/*タイトル文字のセンタリング*/ font-weight: bold;/*タイトル文字を太くする*/ padding: 0.5em;/*タイトル周りの余白*/ } .t3{ width: 200px ;/*テキスト枠の幅*/ height: 190px ;/*テキスト枠の高さ*/ background-color: #ffffff;/*テキスト背景の色*/ text-align: center;/*テキスト文字のセンタリング*/ padding: 0.5em;/*テキスト周りの余白*/ } --> </style> </head> <body> <div class="t1">画像ファイル</div> <div class="t2">タイトル</div> <div class="t3">テキスト<br>テキスト</div> </body> 本来ならばNo.1さんの書き方が一番適切だと思いますよ。
関連するQ&A
- CSSのフロートを使ったレイアウト割
CSSのフロートを使ったレイアウト割で質問です。 あるボックス（仮に100px）を真横に並べる時の事ですが、 いつもは<p>なり<div>なりにCSSでフロートleftで詰めていました。 間隔を空けるためにマージンで10pxとったとして 100px+10pxで110pxのものが5つ 550pxの幅になります。 ただ、最後のボックスにはマージンを付けたくありません。 ■がボックス、□が間隔の10pxだとして ｜ バナー ｜ ■□■□■□■□■ ■□■□■□■□■ ■□■□■□■□■ ｜他のコンテンツ｜ こういう風にしたいんです。（この例でいうと540pxにおさめたい） 左と右が端にあって等間隔でそろっている。 どんどん下にも追加していったり消したり、つめていくので 一番右の最後にだけ別のCSSを付けるわけにはいきません。 どんどん左詰めで詰まって行く コンテンツを作りたいのですが、このやり方だと出来ないですよね。 あまり使わないんですが こういう場合って <ul>とか<il>とか使うんですか？ やり方があったら教えて下さい。
- ベストアンサー
- HTML
- CSSでブラウザごとにレイアウトが崩れたりします。
はじめまして。 現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。 細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■ ■＝ヘッダー □□●●●● □＝メニュー □□●●●● ●＝コンテンツ（中身）1 □□○○○○ ○＝コンテンツ（中身）2 □□○○○○ ▲＝フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。 そこで、問題の崩れているレイアウトですが、メニュー（□）とコンテンツ（○+●）の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー（□）の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ（○+●）部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。 ちなみにこの現象はIE７のみでして、IE６やfirefoxなどでは正常に表示されました。 全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、 どうか教えていただけないでしょうか？ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFFF; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#FFFFFF; } /* 左側の設定*/ #left{ width:210px; height:auto; float:left; background-color:#FFFFFF; } /* 右側の設定*/ #right{ width:580px; height:950px; float:right; background-color:#FFFFFF; margin-bottom: 15px; } #sub_main { width: 550px; margin-left: 15px; background-color: #FFFFFF; margin-top: 10px; height: auto; margin-bottom: 5px; } #sub_main2 { width: 550px; margin-left: 15px; margin-top: 15px; background-color: #FFFFFF; height: auto; } #foot{ position:relative; width:100%; height:auto; background-color:#CCFFCC; clear:both; float: left; } ※sub_main1,2は●と○になります。 どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- CSSレイアウト・背景グラデーション
初めまして <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" でCSSでヘッダー・右袖・左メイン・フッターとレイアウトしてます。 ヘッダーから下は右・左・フッターとコンテンツIDでまとめてます。 bodyと#wrapperを使いセンター表示にしてますがページによって テキストボリュームの差がかなりあるのでそれぞれのheightは設定してません。 autoでも非設定でも複数ブラウザで大丈夫だったので省きました。 このレイアウトでIE・Safari・FireFoxなどでレイアウト崩れはしないのですが、枠線を付けたり背景画像で境界線に影を付けたりすると問題が出ます。 FireFoxとSafariだけヘッダー部分にしか影が出ません。 IEやSleipnirではフッターまで反映されます。 ページ毎のテキストボリュームが違うためheight設定してませんが数値指定するとすべてのブラウザで反映されます。 heightに数値いれるとテキストが少ないページでは無駄な表示域がでてしまうので避けたいです。 解決策や当方の設定に問題点があるでしょうか？ 影画像は820pxで制作#wapperの背景に指定してます。 よろしくお願いします。 body { text-align: center; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #wrapper { text-align: left; width: 800px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; padding: 0px; } #header { margin: 0px; padding: 0px; width: 800px; height: 300px; } #contents { padding: 0px; margin-top: 10px; margin-right: 0px; margin-left: 0px; width: 800px; height: auto; margin-bottom: 0px; } #contents #left { margin: 0px; padding: 0px; width: 200px; float: left; height: auto; } #contents #right { padding: 0px; float: right; width: 600px; margin: 0px; height: 1280px; } #footer { margin: 0px; padding: 0px; width: 800px; height: 60px; } 上では#wrapperに画像設定してませんが#wrapperに背景設定してます。 どのブラウザでもレイアウト崩れは起きてないです。 よろしくお願いします。
- ベストアンサー
- CSS
- CSSレイアウトの回り込みについて
初めまして、よろしくお願いいたします。 見よう見まねでCSSレイアウトのweb制作に挑戦している者です。以下の現象についてご指南いただければ大変助かります。 ■CSS #wrapper { width : 620px; } #left { width : 300px; float : left; } #right { width : 300px; float : right; } ■ソース <div id="wrapper"> <div id="left"> （左寄せブロック） </div> <div id="right"> （右寄せブロック） </div> </div> 上記のCSSとソースで「620px幅の外枠」の中に「300px幅の左寄せブロック」「300px幅の右寄せブロック」が中央に20pxの隙間を空けて正常に表示されるのですが、右寄せブロックの中に長いテキストを改行せずに書いたら右寄せブロックが右寄せにならず、左寄せブロックの下に落ちて表示されてしまいます。 この現象は、長いテキストが300px幅に指定されている右寄せブロックの幅を押し広げている？から起こるのでしょうか。 右寄せブロックの中に長いテキストを書く場合、いちいち300px幅を意識して自分で改行を入れなくても、300pxの右寄せブロック幅を押し広げることなく自動折り返しされれば良いのですが。（右寄せブロックの高さは指定していないので） また、文字のサイズはpxで固定できない事情があるので、ブラウザで可変できるパーセント指定にしているのですが、ブラウザの文字サイズ中では正常に右寄せされている右寄せブロックが、文字サイズ大に変更したとたんに左寄せブロックの下に落ちてしまいます。 右寄せブロックの中に長いテキストを改行なしで書いても右寄せブロックが左寄せブロックの下に落ちて表示されない様、どなたかご指南いただければ誠に幸いです。
- ベストアンサー
- ホームページ作成ソフト
- 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のレイアウトについてのアドバイスをお願い出来ましたらと 思います。m(_ _)m 添付画像の様なレイアウトがしたく、いろいろやってみましたが、 何時間かかっても上手く行かなくて。。 A(画像）、（B ○の部分がテキストでリスト）、（C ○の部分が 画像を三段重ね）、D（画像）という様に、float: left;で配置して いき、 Bの○のテキストはリストで左頭揃えにしながら、 Bのブロックごとは右寄せで右にパディングで余白を取る。 Cの○の画像は左頭揃えにしながら三段重ね、 Cのブロックごとは左寄せでパディングはゼロにしたいと いう部分で上手く行かずに悩んでいます。。 元から書かれた物を直すという作業の上で、 戸惑っています。 自分では下記の様にやってみて途中やり直しを繰り返し して混乱して頭が止まってしまいました。。 よろしければ、アドバイスの方をお願い致します。m(_ _)m ☆ HTML <div id="header"> <!-- A--> <h1><img src="hogehoge.gif" alt="" width="175" height="64" /></h1> <!-- /A--> <p class="g_navi"><a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a><br> <a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a><br> <a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a> </p> <ul class="s_navi"> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> </ul> <!--D--> Dの部分は省略。 <!--/D--> </div> ☆CSS #header { margin: 0 10px 0; padding: 28px 0 0; width: 950px; height: 102px; position: relative; line-height: 1; } #header h1{ float: left; } #header .g_navi{ margin: 8px 0 0; padding: 0 32px 0 0; float: left; width: 270px; height: 70px; text-align: right; } #header .s_navi{ margin: 8px 0 0; padding: 0 0 0; float: left; width: 238px; height: 70px; line-height: 1; font-size: 1px; } #header .s_navi li{ margin: 0 0 10px; } ------- 以下D部分は略 －－－－－－－－－
- ベストアンサー
- CSS
- CSS：印刷時のレイアウト崩れについて
CSSを利用してレイアウトしたページを作成しています。 もう殆ど作りこんだ今になって気付いたのですが、記事本文のテキストが長くなり、印刷プレビュー時に改ページされる程度にまで伸びると、一挙にレイアウトが崩れてしまうようなのです。 こちらにつきまして回避策はありますでしょうか？ ★外部CSS部分 body { padding: 0px; margin: 0px; } #container { width: 762px; position: relative; margin: 0 auto; margin-left: auto; margin-right: auto; top: 0px; } #header { width: 549px; position: absolute; left: 212px; top: 3px; } #left { width: 211px; position: absolute; left: 1px; top: 0px; } #content_right { width: 510px; margin-left: 231px; padding-top: 149px; font-size: 0.8em; line-height: 140%; } #footlink { text-align: center; margin: 30px 0px 40px 0px; } ★HTML部分 <div id="container"> <div id="content_right"> <h1>h1テキスト</h1> <h2>h2テキスト</h2> <p>記事：この辺に印刷プレビューで改ページされるほど改行を入れた場合です</p> <div id="footlink"><a href="#">フッダリンク</a></div> </div> <div id="header">ヘッダメニューとかタイトル画像とか</div> <div id="left">左メニュー部分</div> <div>コピーライト</div> </div> どうにもならないようであれば、印刷時に記事部分だけ抜き出すようなカタチにするべきなのかと考えていますが、難しそうで少し尻込みしています。 良い手立てがあるようでしたら、是非教えてください。 よろしくお願いします。
- 締切済み
- HTML
- CSSでのレイアウトについて
HTML、CSS超初心者なのですが CSSでレイアウトを組むと ブラウザを縮小したりしたときに レイアウトがぐちゃぐちゃになります paddingやmarginはpxで指定してるのですが それがいけないのでしょうか？ ｜ ｜ ｜あああ｜ ｜ ｜ こういうレイアウトの物が ブラウザを小さくすると ｜｜ ｜｜あああ ｜｜ とボーダーがちいさくなって 中の文字がはみ出してしまいます どうぞよろしくお願いします
- 締切済み
- HTML
- 3カラムのレイアウト、及びdivの入れ子等
初めまして。 とても基本的なことでお恥ずかしいのですが、 3カラムのレイアウト、及びdivの入れ子等について、行き詰ってしまいました。 どうぞ宜しくお願い致します。 下記のように、3カラムの段組みレイアウトを行いました。 左・右のナビゲーションに、width:150pxで幅指定し、それぞれleft・rightにfloat、 中心部分（#contents）は、左右ナビゲーション分のマージンを設定して、真ん中に配置させる方法です。 HTMLでは、可変？させたい真ん中部分は、ナビゲーションの後に記述すること、とのことでしたので、そのように致しました。 ＜CSS＞ #contents { margin-left:155px; margin-right:155px; } #left { float:left; width:150px; } #right { float:right; width:150px; } ＜HTML＞ <div id="left>あああああああ</div> <div id="right">いいいいいいい</div> <div id="contents">ううううううう</div> ここまでは、問題なく配置させられたのですが、 【#contents】の中に、<div>や<ul>などを使用すると、画像（http://blog.goo.ne.jp/ray-chimin）のような現象が起きます。 ちなみに、【#left】のheightを長く伸ばすと、IEではキレイに並びましたが、firefox等では、やはり崩れます。 と言いましても、それは実験的に行った結果で、【#left】のheightを無駄に長く伸ばすことは避けたいです…(;ω;) そもそも、【#contents】の中の、「中身の並べ方」の考え方に問題があるのでしょうか…？ 可能な限りシンプルに、 正しいCSSの使い方でレイアウトしたいと考えております…！(>_<) divの不必要な多用？ （ひとつひとつの画像をdivの中に入れたり、 横並びのミニバナーを、divの中にdivを入れて…のような入れ子構造） は避けたいと思っておりましたが、 もしかして、それがいちばん正しいのでしょうか…？ ご存じの方、どうぞご指南の程宜しくお願い致します！ 散文、失礼いたしました！
- ベストアンサー
- HTML
- CSSレイアウトの本当の正しいやり方
CSSでヘッダーとフッター付きの2カラムレイアウトを書籍のサンプルを見て行ないました。 表示は何も問題ないのですが、色々とサンプルレイアウトのサイトを見ていると「main」でleft-marginfを指定しているのはなく、floatを指定しているのが多いのですが、下記でも合っているのでしょうか。 #wrap { width: 700px; margin: 0 auto; text-align: left; } #header { color: #fff; } #menu { width: 160px; float: left; } #main { margin-left: 160px; padding: 10px; } #footer { clear: both; padding: 10px; }
- ベストアンサー
- HTML
お礼
ありがとうございます。 ひょっとすると、タグに直接CSSを指定するやり方でしょうか？ まだまだ勉強中でして、ひとまずクラスとIDだけしか知らず、正直これをこのままコピーする以外にできそうにないかもです・・・ ちなみに「DL hoge ○○」というのはどういった使い方をすればいいのでしょうか？ DLとhogeと○○の関係、といいますか書き方が全く見当もつきません。 できればこの際に覚えようかとも思うのですが、どこか参考サイトのようなものはありますでしょうか？ お礼の欄なのにすみません・・・ もしご存知でしたらお願いいたします。