- ベストアンサー
CSSで画像の配置について
HTMLではテーブルで配置していた画像が、CSSではどう表記すべきか教えて下さい。 a～eの4枚の画像があり、HTMLのtableで以下のように配置していました。（3文字で1画像とみて下さい） a bbb e a ccc e a ddd e 両サイドに1枚ずつ、真ん中は3段です。 これをCSSで再現する場合、どのようにしたらよいでしょうか？ 単にfloatだけで出来るのでしょうか。
- みんなの回答 （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列にする。 トピックの部分は消す など。
お礼
ありがとうございます。 何となくテクニックというか仕組みかな、わかってきました。
お礼
具体的なサンプルありがとうございます。 詳しいコメントがあるとスタイルシート初心者には嬉しいです。 Netscapeで見たところ、画像A～画像Eが縦に並んで表示されました。 InternetExplorerでは理想通りに表示されるのですが…。 自分でも、何となくわかったつもりの理屈で試行錯誤していましたが、Netscapeでは画像が表示されなかったりして、悩んでいました。 ブラウザでの違いはどのように対応したらよいでしょうか？