ホームページ作成　画像の回り込み

解決済

質問者：kikitaizou
質問日時：2013/08/18 14:01
回答数：2件

添付した画像をご覧下さい。
上が、私がいつも作成していて起きてしまう現象、
下が理想です。

以前、下のやり方が書いてあるサイトがあったのですが忘れてしまいました。

この下のやり方の方法をどなたか教えて頂けませんでしょうか？

画像は右側、文章は左側、で、中央揃えって感じです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2013/08/18 16:54

＞以前、下のやり方が書いてある

十数年以上前のやり方でしょう。

　今は、alignは、推奨しない( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )、もう使わないほうがよい。使うべきではない属性です。
　⇒Alignment( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　1999年勧告のHTML4.01仕様書の時点です。XHTML1.1やまもなく勧告を迎えるHTML5では、ありません。

　現在では、HTMLは次のように書きますが
divはclassを使って文書構造を示すために使う
　　⇒7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　せっかくですので、新しいとは言っても13年前の仕様ですが、現在のウェブ標準です。
　ウィンドウ幅を変えても利用できますし、スマホでも利用できる。
<body>
　<div class="header">
　　<h1>見出し</h1>
　　<p>header部分の記事</p>
　</div>
　<div class="section">
　　<div class="figure" style="width:420px;">
　　　<img src="[URL}" width="420" height="314">
　　　<p class="figcaption">
　　　　参考
　　　</p>
　　</div>
　　<h2>本文見出し</h2>
　　<p>添付した画像をご覧下さい。</p>
　　<p>上が、私がいつも作成していて起きてしまう現象、下が理想です。</p>
　　<p>以前、下のやり方が書いてあるサイトがあったのですが忘れてしまいました。この下のやり方の方法をどなたか教えて頂けませんでしょうか？</p>
　　<p>画像は右側、文章は左側、で、中央揃えって感じです。 </p>
　</div>
　<div class="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">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<div class="figure" style="width:420px;">
＿＿＿<img src="http：//multimedia.okwave.jp/image/questions/14/146465/146465.jpg" width="336" height="251" alt="中央配置した文書内で画像の周囲にテキストを回りこませたい。">
＿＿＿<p class="figcaption">
＿＿＿＿参考
＿＿＿</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>