- ベストアンサー
ホームページ作成 画像の回り込み
添付した画像をご覧下さい。 上が、私がいつも作成していて起きてしまう現象、 下が理想です。 以前、下のやり方が書いてあるサイトがあったのですが忘れてしまいました。 この下のやり方の方法をどなたか教えて頂けませんでしょうか？ 画像は右側、文章は左側、で、中央揃えって感じです。
- レンタルサーバ・ASP
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞以前、下のやり方が書いてある 十数年以上前のやり方でしょう。 今は、alignは、推奨しない( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/conform.html#deprecated )、もう使わないほうがよい。使うべきではない属性です。 ⇒Alignment( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html#adef-align ) 1999年勧告のHTML4.01仕様書の時点です。XHTML1.1やまもなく勧告を迎えるHTML5では、ありません。 現在では、HTMLは次のように書きますが divはclassを使って文書構造を示すために使う ⇒7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) せっかくですので、新しいとは言っても13年前の仕様ですが、現在のウェブ標準です。 ウィンドウ幅を変えても利用できますし、スマホでも利用できる。 <body> <div class="header"><!-- この文書のheader --> <h1>見出し</h1> <p>header部分の記事</p> </div> <div class="section"><!-- この文書の本文 --> <div class="figure" style="width:420px;"><!-- 挿絵figure --> <img src="[URL}" width="420" height="314"> <p class="figcaption"><!-- 挿絵のcaption --> 参考 </p> </div> <h2>本文見出し</h2> <p>添付した画像をご覧下さい。</p> <p>上が、私がいつも作成していて起きてしまう現象、下が理想です。</p> <p>以前、下のやり方が書いてあるサイトがあったのですが忘れてしまいました。この下のやり方の方法をどなたか教えて頂けませんでしょうか？</p> <p>画像は右側、文章は左側、で、中央揃えって感じです。 </p> </div> <div class="footer"><!-- footer --> <h2>文書情報</h2> </div> </body> [HTML5]だと <body> <header> <h1>見出し</h1> <p>header部分の記事</p> </header> <section> <figure style="width:420px;"> <img src="[URL]" width="420" height="314"> <figcaption> 参考 </figcaption> </figure> <h2>本文見出し</h2> <p>添付した画像をご覧下さい。</p> <p>上が、私がいつも作成していて起きてしまう現象、下が理想です。</p> <p>以前、下のやり方が書いてあるサイトがあったのですが忘れてしまいました。この下のやり方の方法をどなたか教えて頂けませんでしょうか？</p> <p>画像は右側、文章は左側、で、中央揃えって感じです。 </p> </section> <footer> <h2>文書情報</h2> </footer> </body> そして、スタイルシートで body{background-color:gray;} p{text-indent:1em;} div.header,div.section,div.footer{ margin:0 auto; background-color:silver; width:60%; padding:5px 10px; } div.figure{ background-color:white; padding:5px; float:right; margin-left:10px; text-align:center; } と書きます。 以下全文です。 ★Another HTML-lint 5( http：//www.htmllint.net/html-lint/htmllint.html ) のDATA入力(右上)で確認済みのHTML4.01strictです。 ★タブは＿に置換してあるので戻してください。 ★http:は、http：(全角)に置換してあるので戻す。 <!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:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- body{background-color:gray;} p{text-indent:1em;} div.header,div.section,div.footer{ margin:0 auto; background-color:silver; width:60%;min-width:480px; padding:5px 10px; } div.figure{ background-color:white; padding:5px; float:right; margin-left:10px; text-align:center; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"><!-- この文書の本文 --> ＿＿<div class="figure" style="width:420px;"><!-- 挿絵figure --> ＿＿＿<img src="http：//multimedia.okwave.jp/image/questions/14/146465/146465.jpg" width="336" height="251" alt="中央配置した文書内で画像の周囲にテキストを回りこませたい。"> ＿＿＿<p class="figcaption"><!-- 挿絵のcaption --> ＿＿＿＿参考 ＿＿＿</p> ＿＿</div> ＿＿<h2>本文見出し</h2> ＿＿<p>添付した画像をご覧下さい。</p> ＿＿<p>上が、私がいつも作成していて起きてしまう現象、下が理想です。</p> ＿＿<p>以前、下のやり方が書いてあるサイトがあったのですが忘れてしまいました。この下のやり方の方法をどなたか教えて頂けませんでしょうか？</p> ＿＿<p>画像は右側、文章は左側、で、中央揃えって感じです。 </p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (1)
CSSで外枠のパディングを設定すると内側に余白ができます。
お礼
ご回答ありがとうございます。 あまりHP作成には詳しくないので、もう少し詳しく教えていただけますでしょうか？ 参考サイト等ありましたら、教えてください。 お願いいたします。
お礼
詳しく教えていただき本当にありがとうございます。 試してみます。