- ベストアンサー
CSSで画像の配置について
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
前回紹介したところので試してみましたがダメでした。 今度は http://desperadoes.biz/style/index.php に紹介されていた3段組レイアウトを参考に作ってみました。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>3karamu</title> <style type="text/css"> body{ margin: 20px 0% 20px 0%; color: #333333; background: #ffffff width:100%; } #left { border: 2px solid #ff0000; position:absolute; left:50px; top:75px; width:35px; } #right { border: 2px solid #00ff00; position:absolute; left:203px; top:75px; width:35px; } #center { border: 2px solid #0000ff; position:absolute; top:75px; left:90px; width:108px } </style> </head> <body> <div id="center"> <img src="http://okwave.jp/images/question1.gif" /><img src="http://okwave.jp/images/question1.gif" /><img src="http://okwave.jp/images/question1.gif" /><br /> <img src="http://okwave.jp/images/question2.gif" /><img src="http://okwave.jp/images/question2.gif" /><img src="http://okwave.jp/images/question2.gif" /><br /> <img src="http://okwave.jp/images/question3.gif" /><img src="http://okwave.jp/images/question3.gif" /><img src="http://okwave.jp/images/question3.gif" /> </div> <div id="left"> <img src="http://okwave.jp/images/question3.gif" /><br /><img src="http://okwave.jp/images/question3.gif" /><br /><img src="http://okwave.jp/images/question3.gif" /> </div> <div id="right"> <img src="http://okwave.jp/images/question3.gif" /><br /><img src="http://okwave.jp/images/question3.gif" /><br /><img src="http://okwave.jp/images/question3.gif" /> </div> </body> </html> 若干IEとネスケで表現のされかたが違いますが・・・。 right,left,centerのwidthは画像の幅に合わせて調整してみてください。
その他の回答 (3)
- sr-agent
- ベストアンサー率43% (594/1373)
自分でも閲覧してみましたがネスケではうまく表示されないみたいですね（苦笑 paddingやmarginなど不要と思われるところも全てなくしてみましたがうまく行かないようです。 floatのバグなんでしょうか・・・（私も聞きたいくらいです） スタイルシート、3列で検索してみましたら http://30smash.main.jp/mt/archives/3/post_8.html というページが出てきました。 フロートを使っていないので試してみてください。 （まだ試していないのでうまくいくかわかりませんが）
- sr-agent
- ベストアンサー率43% (594/1373)
少し手直ししたもののソースを下に書きます。 （<!-- -->内は内容をわかりやすくするためのコメントです。この部分の説明を見て必要に応じてスタイルシートを変更してください。） <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>サンプル</title> <meta http-equiv=Content-Type content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> <!-- bodyの上下左右のマージンは0pxに一括指定してあります --> body { margin: 0px } <!-- containerのボーダーのカラーと太さ、線の種類が上・右・下・左の順に、内容と枠線との間の間隔を上・右・下・左の順に0pxに指定してあります。また、ボックスのページの上下からのマージンは0px、ページの左右からのマージンは20pxで、ボックス自体の横幅は850pxです --> #container { border-top: #999 1px solid; border-right: #999 1px solid; border-bottom: #999 1px solid; border-left: #999 1px solid; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin: 0px 20px; width: 850px; } #content { } <!-- menuの内容と枠線との間の間隔を上・右・下・左の順に5pxに指定してあります。また、ボックスのページの上下左右のマージンは0pxに一括指定してあります。幅は100px、高さは100%、文字の色は#666です --> #menu { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; float: left; margin: 0px; width: 100px; height: 100%; color: #666; } <!-- 真ん中の列、wrapperの部分の属性で左右のボーダーの色・太さ・線の種類を右・左の順に指定しています。太さは625pxです --> #wrapper { border-right: #999 1px solid; border-left: #999 1px solid; float: left; width: 625px; height: 100% } #title { clear: both; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; margin: 0px; color: #666; border-bottom: #999 1px solid } #title2 { clear: both; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; margin: 0px; color: #666; border-bottom: #999 1px solid } #title3 { clear: both; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; margin: 0px; color: #666; border-bottom: #999 1px solid } #link { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; float: left; margin: 0px; width: 100px; color: #666; height: 100% } </style> <body> <div id="container"> <div id="content"> <div id="menu"> <h2>画像A</h2></div> <div id="wrapper"> <div id="title"> <h2>画像B</h2> </div> <div id="title2"> <h2>画像C</h2> </div> <div id="title3"> <h2>画像D</h2> </div> </div> <div id="link"> <h2>画像E</h2></div> </div> </div> </body> </html>
- sr-agent
- ベストアンサー率43% (594/1373)
このサイトのサンプルを参考にされては如何でしょうか？ http://csssimplesample.nobody.jp/sample.htm の中の http://csssimplesample.nobody.jp/sample/layout_3cols2/index.htm まず、上記のサンプルのheaderとfooterを消す。 そしてtitleとなっている部分を3列にする。 トピックの部分は消す など。
お礼
ありがとうございます。 何となくテクニックというか仕組みかな、わかってきました。
関連するQ&A
- CSS 画像の配置について
http://www.handmc.jp/pc/index.html こちらのページにある メインの写真が2枚 バック画像の上に並べられていますが これをCSSで配置するにはどうしたらよいでしょうか？ 背景のグレーのグラデーションもあるので 写真の上に写真を並べているように見えます 今までのテーブルであれば簡単なのですが 沢山本を買ったり WEBで調べていますが 画像配置の方法が文字の回り込みのものばかりで このページのように画像背景の上に さらに画像背景を配置する方法を知りたいと思っております お手数ですがどなたがご教授お願いします
- ベストアンサー
- HTML
- CSSを使った全体の配置
サイト全体の配置指定を外部スタイルシートを使い、 ホームページ作成をしております。 CSS初心者なので、変な質問になるかもしれませんが宜しくお願いします。 全体のぺージの構造は上にヘッダー、下にフッター 真中は3つに分け、3カラムの状態で配置しております。 今回、ヘッダー部分を2つに分けたいと思っております。 今のヘッダー部分は、最初にh1（テキスト）を左配置に表示し、その右側にテキストで「サイトマップ」のテキストリンクを配置。 その下に width="850" height="200" の大きめな画像を置き、 画像の下に右配置でh2（テキスト） 上記のような配置になっているので、外部スタイルシートコードは・・・ /* ヘッダーコンテンツ */ .header { text-align:left; padding-bottom:0.5em; width:830px; float:left;} .header h1{ font-size:12px; padding:0; float:left;} .header h2{ font-size:12px; float:right;} /* ヘッダーサイトマップ */ .headersite{ float:right;} ・・・としています。 HTMLタグの方は・・・ <!-- ヘッダー開始 --> <div class="header"> <h1>ｈ1題名</h1> <div class="headersite"><a href="sitemap.html">サイトマップ</a></div> <a href="index.html"><img src="%/logo.jpg" width="850" height="200" border="0"/></a> <h2>h2題名</h2></div> <!-- ヘッダー終了 --> 画像部分を真中から分け、左に画像を置き右はテキストにし回り込ませたいと思っておりますが、なかなか上手くいきません（汗） 画像を2つにわけるCSSコードを .header left .header right とするならば、 HTMLタグ部分は・・・ <!-- ヘッダー開始 --> <div class="header"> <h1>ｈ1題名テキスト</h1> <div class="headersite"><a href="sitemap.html">サイトマップ</a></div> <div class="header left"><a href="index.html"><img src="%/logo.jpg" width="300" height="200" border="0"/></a> <div class="header right">テキストテキストテキスト <h2>h2テキスト</h2></div> <!-- ヘッダー終了 --> にしたいのですが、CSSコードはどのように指定したら良いでしょうか？ 自分なりにCSSコードを筆記したのですが、 回り込みがうまくいかないのか、真ん中から分けた左画像の右にテキストが並んでくれなくて下に配置されてしまいます。 ちなみに全体横幅は850pxにしております。
- ベストアンサー
- その他（プログラミング・開発）
- CSSで文字と画像の配置方法は・・・
HTML+CSSで書いています。 画像とテキストを配置しようとしています。 画像は位置固定にして、 テキストは回り込みではなく、その上にかぶさる感じにしたいの ですが、画像は画像、テキストはテキストに分離してしまいます。 （画像を背景みたいに扱いたいのですが、すでに背景はCSSで 指定されてしまっています。。。。） どのようにCSSを記述すればいいのでしょうか？
- 締切済み
- HTML
- css の float:left; を li 適用
css の float:left; を li に適用すると <ul> <li>AAA</li> <li>BBB</li> <li>CCC</li> </ul> ●AAA●BBB●CCC のような横並びにできます <ul> <li>AAA</li> <li>BBB <ul> <li>aaa</li> <li>bbb</li> </ul> </li> <li>CCC</li> </ul> このように入れ子の場合 ●AAA●BBB ●CCC □aaa□bbb のように表示されます これを ●AAA●BBB●CCC □aaa□bbb のように、一段目に間を空けないで表示する CSS の設定を教えてください よろしく、お願いします
- ベストアンサー
- ホームページ作成ソフト
- CSSでイメージ配置について
こんにちわ。 同じ <div></div> 内に二つのイメージ画像を別々のルールーで配置したいのですがどのようにしたら良いのかわかりません。 (1)のイメージにはfloat: left; (2)のイメージにはfloat: right; としたいのですがどのようにしたらいいのかアドバイスください。 ちなみにCSSはすべて外部リンクになっています。 よろしくお願い致します。
- ベストアンサー
- HTML
- CSSで背景画像の上にラジオボタンを配置したい
画面のある一部分に背景画像があり（背景画像もCSSで配置したい）、 その背景画像の上にラジオボタンを配置したいのですが、これはCSSで実現できますか？ もし可能でしたら具体的なコード（ｈｔｍｌとCSS）を教えていただきたいです。 よろしくお願いします。
- ベストアンサー
- CSS
- cssのことでわからないことがあります。
こんにちわ。 私はＦＣ２ブログを使って自作テンプレートを作っているのですが、テーブルで組んだ一つのコンテンツを真ん中に配置したいのですが、cssでmargin-raight:auto、margin-left:auto;にしても真ん中に配置されません。 margin-left:300px;と入力すれば左に300pxの余白を作ることはできるのですが・・・ 何故なんでしょう？ 後HTML上で<div align="center">～</div> で囲むと真ん中に配置されます。 私としてはcssでレイアウト全てを管理したいのでお願い致します。
- ベストアンサー
- ブログ
- cssで画像を均等に配置する方法を教えてください。
cssで画像を均等に配置する方法を教えてください。 下図のようなレイアウトをcssで作りたいのですが方法を教えてください。 ・■は画像（一行あたりの個数は固定）。 ・罫線はブラウザの表示エリア（divのボックスです）。 ┏━━━━━━┓ ┃■■■■■■┃ ┃■■■■■■┃ ┃■■■■■■┃ ┃■■■■ ┃ ┗━━━━━━┛ ・ブラウザのサイズを変えても画像は均等に配置。 ┏━━━━━━━━━━━┓ ┃■ ■ ■ ■ ■ ■┃ ┃ ┃ ┃■ ■ ■ ■ ■ ■┃ ┃ ┃ ┃■ ■ ■ ■ ■ ■┃ ┃ ┃ ┃■ ■ ■ ■ ┃ ┗━━━━━━━━━━━┛ できればテーブルを使わずに実現したいのです。 どなたかよろしくお願いします。
- ベストアンサー
- HTML
- (VBA) 多階層のフォルダーの配置換え
VBA 多階層のフォルダーを配置換えする 2021/07/13 16:54 以下のような操作をEXCELのVBAで処理可能でしょうか ？ --------------------- 例えば、 添付画像のような階層が深いフォルダーの各層の最後に存在している AAABBB,CCC,DDD,EEEの各フォルダーを#testに引き上げる。 ターゲットは、フォルダーでファイルではありません。 1段下層のフォルダーを引き上げるBATなどは検索すれば見つかりますが 階層が深い（多階層）の場合を見つけられませんでした。 （ファイルの場合は少し見つかりましたがフォルダーは見つけられませんでした。） 具体的には O:\#test\AAA O:\#test\#2\BBB O:\#test\#2\#3\CCC O:\#test\#2\#3\DDD O:\#test\#2\#3\#4\EEE を O:\#test\AAA O:\#test\BBB O:\#test\CCC O:\#test\DDD O:\#test\EEE に配置換えする 配置換え後は、O:\#test\#2及＃2以降の下層のフォルダーは削除する。 ---------------------
- ベストアンサー
- Excel（エクセル）
- CSSで画像を上下中央に配置する方法を教えてください。
はじめまして。 現在、CSSを使ってホームページを作っているんですが、CSSの枠内に画像とテキストを一列に連続して挿入する場合、テキスト部分がどうしても画像の下の部分合わせて配置されます。 これをなんとかして画像の真ん中にテキストを配置させたいのですが、可能でしょうか？ また、まだまだ初心者でCSSの仕組みをよく理解していないのですが、基本的にはCSSというのはdivでboxを作ってそれを配置していくもの理解しています。 ただ、今の私の知識ではdivの中にかなり多い数のdivが挿入されていて、あまりきれいな状態とは言えないような感じなのですが・・・ なにか勘違いしているんでしょうか？
- 締切済み
- HTML
お礼
具体的なサンプルありがとうございます。 詳しいコメントがあるとスタイルシート初心者には嬉しいです。 Netscapeで見たところ、画像A～画像Eが縦に並んで表示されました。 InternetExplorerでは理想通りに表示されるのですが…。 自分でも、何となくわかったつもりの理屈で試行錯誤していましたが、Netscapeでは画像が表示されなかったりして、悩んでいました。 ブラウザでの違いはどのように対応したらよいでしょうか？