- ベストアンサー
写真の配置
本文中に写真を配置したいと思っています。このとき、 (1)テキストで成る本文中に写真を配置し、 (2)写真の説明文を、写真の下でかつ写真の外に、写真の左右幅と同じ左右幅で5行程度付け、 (3)本文は写真の上、写真の左、説明文の下に回り込ませ、 (4)写真の上端と本文との間、写真の左端と本文との間、説明文の下端と本文の間の3箇所に、各20ピクセルの余白をとり、 (5)説明文の上端と写真下端との間に5ピクセルの余白をとる、 ようにするにはどうしたらいいでしょうか。 初めて写真を配置します。ただ写真を配置するのであれば、 <img src"tokyotower.jpg" border="2" align="right"> でいいのではないかと思いますが、ここから先が全く分かりません。 超初心者です。分かりやすく教えていただけると有り難いです。
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
色々やり方はありますが、ごく簡単なサンプルの一例です。 下記では写真と説明文をpでひとくくりにしてマークアップしてみました。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <!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"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプル</title> <link href="sample.css" type="text/css" rel="stylesheet" media="all"> </head> <body> <div id="hoge"> 本文テキストテキストテキストテキスト… <p class="photo"> <img src="images/photo.jpg" alt="代替テキスト" width="100" height="100"> 写真の説明写真の説明… </p> 本文テキストテキストテキストテキスト… </div> </body> </html> ---------------------------------------------------------------------- 【CSS】※のコメントは実際にCSSファイルとして使用する場合は必ず削除を。 ---------------------------------------------------------------------- #hoge {※←本文を置くブロック。特に本文の幅を固定せずリキッド（流動的）なら、この指定は丸ごと（#hoge {～}ごと）不要です。 width: 500px; line-height: 140%; } p.photo { float: right;※←「本文は写真の上、写真の左、説明文の下に回り込ませ」る為の指定。 width: 100px;※←「写真の説明文を（省略）写真の左右幅と同じ左右幅で」付ける為の指定。写真のimgの実際のwidthと同じにする事。 margin: 20px 0 20px 20px;※←「写真の上端と本文との間、写真の左端と本文との間、説明文の下端と本文の間の3箇所に、各20ピクセルの余白を」とる為の指定。 } p.photo img { display: block;※←「写真の説明文を、写真の下でかつ写真の外に（省略）」付ける為の指定。 margin-bottom: 5px;※←「説明文の上端と写真下端との間に5ピクセルの余白をとる」為の指定。 } ---------------------------------------------------------------------- 写真が複数あるなら、<p class="photo">～</p>は任意の場所で複数回使ってもかまいません。 また、”本文テキスト”の部分を内容に応じて適宜pでマークアップしても良いでしょう。 ※ただし、<p>本文テキスト<p class="photo">～</p>本文テキスト</p>という入れ子は文法上NGですのでご注意を。 不具合やご希望と違う箇所などありましたら補足して下さい。
その他の回答 (5)
- reverie013
- ベストアンサー率18% (26/143)
No.2です。 激しくありえない間違いに気が付いたので訂正。 皆様わかっていらっしゃるとは思いますが、 clear:left; → clear:right;です。 見直ししたつもりだったのになぁ。
- think49
- ベストアンサー率59% (285/482)
すみません。 > (2)写真の説明文を、写真の下でかつ写真の外に、写真の左右幅と同じ左右幅で5行程度付け、 を読みのがしていました。 それを踏まえて修正していくと #2 → #3 の形に。 clearfix以外は #3 の方のHTMLと大差ないので、そちらを参考にしてください。 ---- <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html lang='ja' xml:lang='ja' xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv='content-type' content='text/html; charset=utf-8' /> <meta http-equiv='content-style-type' content='text/css' /> <meta http-equiv='content-script-type' content='text/javascript' /> <title>TEST</title> <style type='text/css'> .picinfo, .picinfo dt, .picinfo dd { margin: 0px; padding: 0px; } .picinfo{ float: right; /* 写真説明ブロックを右に */ width: 500px; /* 写真説明ブロックの横幅(画像と同じ) */ margin: 20px; /* 写真説明ブロックのマージン */ } .picinfo img{ margin-bottom: 5px; /* 写真下のマージン */ } .clearfix:after { /* 回り込み解除 */ content: "."; display: block; clear: both; height: 0px; visibility: hidden; } .clearfix { min-height: 1px; } </style> </head> <body> <div class='clearfix'> 写真の上 <div class='picinfo'><img src='001.png' />写真の説明文</div> 写真の左と下 </div> </body> </html>
- think49
- ベストアンサー率59% (285/482)
HTMLはすっきり、CSSでごにょごにょ、なサンプル。 (同じような回答があるような気もしますが、もう書いてしまったので投稿します) --------- <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html lang='ja' xml:lang='ja' xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv='content-type' content='text/html; charset=utf-8' /> <meta http-equiv='content-style-type' content='text/css' /> <meta http-equiv='content-script-type' content='text/javascript' /> <title>TEST</title> <style type='text/css'> #test{ float: right; /* 画像を右に */ width: 500px; /* 画像の横幅 */ margin: 20px; /* 画像のマージン */ } .picinfo{ margin: 5px 0px; /* 画像説明ブロックのマージン */ } .clearfix:after { /* 回り込み解除 */ content: "."; display: block; clear: both; height: 0px; visibility: hidden; } .clearfix { min-height: 1px; } </style> </head> <body> <p>写真の上</p> <p class='clearfix picinfo'> <img id='test' src='001.png' /> 写真の左 </p> <p>写真の下</p> </body> </html> --------- CSSを中心に調べてみると、理解しやすいのではないかと思います。 スタイルシートリファレンス(目的別) http://www.htmq.com/style/index.shtml clearfixでfloatを解除 | d-spica http://blog.d-spica.com/entry/070307clearfix.html
お礼
レベルを遙かに超えた御回答を頂き、理解するのに時間がかかってしまい、御返事が遅くなりました。 でも、よく分かりました。 有り難うございました。
- reverie013
- ベストアンサー率18% (26/143)
う～ん。やり方の一例として、思いついたもの程度ですが↓ <p>文章A<p> <dl> <dt><img src="○○" alt="画像の代替文"></dt> <dd>画像の説明</dd> </dl> <p>文章B</p> <p>文章C</p> てな感じにマークアップして、 dl{ width:画像と同じか数px大きい幅; float:right; } dd{ margin-left:0; } 文章Cのp{//←は適切なセレクタに直して下さい clear:left; } で後余白はmarginで設定、とこんな感じで如何でしょう。 試してませんが。 問題は、文章Bに左右されてしまうところですね。 もっと良い方法がありそうだな～。 というわけで余り参考にならない情報でした。 ちなみに上記は ┌──────┐ dl部分↓ │＿文章Ａ＿＿│┏━━━━━┓ ├───┰━━┥┃_dt_画像＿┃ │文章Ｂ┃dl＿┃┣━━━━━┫ ├───┸━━┥┃_dd_説明＿┃ │＿文章Ｃ＿＿│┗━━━━━┛ └──────┘崩れて見難いかも... こんな感じの構成になる予定。
お礼
レベルを遙かに超えた御回答を頂き、理解するのに時間がかかってしまい、御返事が遅くなりました。 でも、よく分かりました。 有り難うございました。
- reggaepunc
- ベストアンサー率59% (64/108)
画像でレイアウトを指示してもらうと3秒でわかるのですが。。 文章だと理解するのに10分くらいかかりそうです。 テーブルタグを使用するのはどうでしょう？ --- <html> <meta charset="shift_jis"> <table cellpadding="20" border="2"> <tr valign="top"><td><img src"tokyotower.jpg" border="2" width="100" height="100" align="right"></td><td>文章A</td></tr> <tr valign="top"><td>文章B</td><td>文章C</td></tr> </table> </html> --- ↑これをテキストエディタで保存して拡張子を.htmlしすれば表示されます。 参考URLにスタイルシートでのサンプルを載せておきます。
お礼
レベルを遙かに超えた御回答を頂き、理解するのに時間がかかってしまい、御返事が遅くなりました。 でも、よく分かりました。 有り難うございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
レベルを遙かに超えた御回答を頂き、理解するのに時間がかかってしまい、御返事が遅くなりました。 でも、よく分かりました。 有り難うございました。