• ベストアンサー

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

添付した画像をご覧下さい。 上が、私がいつも作成していて起きてしまう現象、 下が理想です。 以前、下のやり方が書いてあるサイトがあったのですが忘れてしまいました。 この下のやり方の方法をどなたか教えて頂けませんでしょうか？ 画像は右側、文章は左側、で、中央揃えって感じです。

画像を拡大する
noname#204474
noname#204474

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

noname#204474
質問者

お礼

詳しく教えていただき本当にありがとうございます。 試してみます。

その他の回答 (1)

noname#187562
noname#187562
回答No.1

CSSで外枠のパディングを設定すると内側に余白ができます。

noname#204474
質問者

お礼

ご回答ありがとうございます。 あまりHP作成には詳しくないので、もう少し詳しく教えていただけますでしょうか？ 参考サイト等ありましたら、教えてください。 お願いいたします。

  1. カテゴリ
  2. インターネット・Webサービス
  3. インターネット接続・通信
  4. レンタルサーバ・ASP

関連するQ&A

  • ホームページ作成デザインについて

    ホームページを作りたいのですが、デザインで下の写真のように【左側の濃い画像から右側の少し薄い画像】になるようにしたいのですが何か良い方法はありませんか?回答よろしくお願い致します。

  • ホームページの作成について。

    今、ＨＰ作成中の者です。 そこで、質問です。 ＨＰのページで文字をクリックすると、その横に文や画像が出たりしますよね？文字がページの左側にあり、クリックとすると、画像が右側に出てくるような感じのものです。 そういう風にするには、どうしたら良いでしょうか。 やり方を教えていただきたいです。 よろしくお願いします。

  • ホームページの内容を、一定幅で画面中央に表示するには？

    Yahoo!などのように、ホームページ内の文字や画像などを、一定の幅に納めて画面の中央に表示するには、どうすればいいのですか？ 1x1の表を作って、その表を中央揃えにして、その表（セル）の中に文字や画像などを入れると思い通りになるのですが、背景色を付けると、色の範囲が四角になってしまいます。 理想は、画面中央に一定幅で、文字や画像を表示し、上から下まですきまなく背景色で埋めたいのですが・・・。

  • ホームページビルダー作成にて画面サイズでつまづいています

    ホームページビルダー１３でホームページを作成しているのですが、ビルダー上では画面サイズを９４０×１２００で作成していているまして、横に長い画像を使用できる画面いっぱいまで伸ばしているのですが、webブラウザーで確認すると右にかなりの余白ができてしまう状態になります。私の理想としては見る側がどんなサイズの画面でもきちんと中央を基本にしたいと思っています。 文章だと伝えづらいので、目標イメージのサイトを書きに載せました。 そのサイトを参考にいうと、トップページの家が写ってる画像が私の場合左に寄っていて、右側に四分の一程空白ができてしまうのです。 作成ページ右いっぱいに画像を広げても空いてしまいます。 どういう処理をしたら下記サイトのようにキレイにレイアウトできるのでしょうか？どなたかわかるかたいらっしゃいましたら教えてもらえると助かります。よろしくお願いします。

  • 画像を好きな位置に配置するには…

    ホームページを作成する際に、画像を好きな位置に配置するにはどうすれば良いのでしょうか？ お聞きしたいのは、例えば、画面の左側に文章を数行入力し、その右側に画像を配置するような場合です。 現在は、そのような場合、左側に文章を数行入力すると、その右側に画像を貼り付けることができない状態です。 ご教授の程、よろしくお願いします。

  • ホームページの画像の移動

    ホームページ作成ソフトを購入しようと思います。ホームページZEROでは画像の移動が自由にできますか？、右詰め・中央揃え・左詰めのほかする方法が有ったら教えた下さい。テキストボックスは自由にできます。 今はZEROの試用版でやってます

  • ホームページビルダーでの画像の回り込み

    過去にも同じような質問があるのでしょうが、見つけられないので 教えてください。 昨日ホームページビルダーを買いましたが、画像の回り込みが出来 ません。 パラグラフでやると、どうしても作業画面の両端いっぱいいっぱい になり、幅を固定出来ないため、現在はテーブル（1×1、表の幅は 650ピクセル）で作成しています。この中で、3行ほどの文章とタイ プした後、画像を入れ、まるっと右側に入れたいのですが、右側に は行くものの、どうにもこうにも先の3行の下に入ってしまいます。 どうしたら左に文章、右に画像、といった形になるのでしょうか。 インターネットでも探したのですが、同じことをやっても出来ない のです。 どうぞよろしくお願いいたします。

  • 画像の貼り付け

    ブログの新規作成投稿覧にマイピクチャーjpg保存の画像や写真を貼り付けると本文の左側に片寄り、文字は画像の右側に入力されます。このパターンを変える方法を教えて下さい。例えば文章の中とか下など好みの位置に画像や写真を自由に貼り付けたいのです。

  • ＣＧＩ（掲示板作成）に付いて

    掲示板を作成したのですが、画像と文字を上手く配置する事が出来ません。 例えば、画像がありその横に文字があるといった感じです。 今は、画像（左寄せ）があり、その下に文字（中央揃え）がある感じです。 どうすれば画像と文字の配置が上手く行くのでしょうか？ 教えて下さい。

  • WordPressで画像を用いるときに文章を回りこ

    WordPressで画像を用いるときに文章を回りこませないで表示させる方法を教えてください。 (文章)(画像)　←個人的には左記のように左側に文章を入力してその右側に画像があって文章が画像の上や下に回りこまないようにしたいと思っております。ネットで調べてみましたが、なかなかそれらしいものが見つからずに困っております。すみませんが方法をご存知の方がおられましたら教えていただければと思います。どうぞよろしくお願いいたします。 ちなみにプラグインはTinyMCE Arrangementを使用しておりますが、他のプラグインでもかまいませんので、できる方法をご存知でしたらよろしくお願いしたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する