プロが教える店舗＆オフィスのセキュリティ対策術

画像をページ右側に並べる方法が分からず困っています。

解決済

  • 質問者：itadakemasu
  • 質問日時：
  • 回答数：4件

画像をページ右側に並べる方法が分からず困っています。

状況は次のような感じです。
（１）↓のように、画像をページ右側に１列に並べたい。
http://ja.wikipedia.org/wiki/%E8%87%AA%E5%8B%95% …
（２）float:rightとすると、画像が右から横に並んでしまう
（３）（２）を解消するために画像の下にclear:rightを挿入すると、画像は縦に並ぶが、文字の回りこみが解消されてしまう。

どのようにすれば、（１）のリンク先のように、文字の回りこみを維持しつつ、画像を縦に並べることができるのでしょうか？
ご存知の方がいらっしゃいましたら、すみませんが教えてください。

通報する

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

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

画像を(右、ないし左)に寄せて文章を流し込む時は、floatを使用します。


ただし、そのようにデザインするためにマークアップするのではなく、あくまで文書構造に従ってマークアップし、スタイルシートで外見を調整するという根本は忘れてはなりません。
14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

たとえば、
<div class="BodyText"><!-- 本文 -->
　<h2>見出し</h2>
　<p class="Fig Sub"><img><br>画像の説明</p>
　<p>記事</p>
　<p>記事</p>
　<h2>見出し</h2>
　<p class="Fig Sub"><img><br>画像の説明</p>
　<p>記事</p>
　<p>記事</p>
　<p class="Fig Main"><img></p>
</div>

　とマークアップしたうえで、スタイルシートで
div.BodyText{
　padding-left: 240px;
}
p.Sub{ width:240px; float:right;}
　などとデザインしたりします。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

通報する
お礼日時：2010/06/21 23:18

No.3

  • 回答者： metametamu
  • 回答日時：

floatとclearを使えばだいたい同じことができます。




<html>
<head>
<style type="text/css">
div{width:800px;}
.thumbnail{float:right;clear:right;background:red;}
.thumbnail img{width:200px;height:200px;}
</style>
</head>
<body>
<div>
<p class="thumbnail"><img src="" alt=""></p>
<p>文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文</p>
<p>文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文</p>
<p class="thumbnail"><img src="" alt=""></p><p>文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文</p>
<p>文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文</p>
<p>文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文</p>
</div>
</body>
</html>

IEで確認しきれていないので若干怪しい部分もありますが・・・
注意する点としては、モダンブラウザは問題ありませんがIEではfloatしてない要素(上の例だとp要素)のhaslayoutはオンにしないよう気をつける点でしょうか。やり方によっては上手く文章が大きく改行されるような見栄えになってしまうので。 ADeeeeeeeeeeeeeeeeeeeeee
    • good
    • 0
    • 件
通報する
この回答へのお礼

解決しました、ありがとうございます。
floatとclearを同じ所で指定できるんですね！

通報する
お礼日時：2010/06/21 23:18

No.2

  • 回答者： nakanaru
  • 回答日時：

僕の場合フロントページですが、


表を横に2列にして潜入してこの表の線の太さを0にして非表示します。
この表の中に画像やテキストスタイルの文章を書き込みます。

見えない表で区切ってやる方法が比較的簡単だと思っています。
実際にご指定のページをフロントページで開くと自動車の画像の全ては
見えない表で括ってありますよ。

この回答への補足

ご回答ありがとうございます。
すみません、私の説明が悪かったようで、
outbraveさんへの補足をご参照ください。

補足日時：2010/06/21 13:04
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： outbrave
  • 回答日時：

float:right をご存知方なら、ソースを見ればわかると思うのですが。



>リンク先のように、文字の回りこみを維持しつつ
どこのことでしょう？画像の横に文字は見当たらないのですが

とりあえず例を
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title></title>
<link rel="stylesheet" href="./themes/style.css" type="text/css" />
</head>
<body>
<div style="margin:0 auto">
<div style="width:600px;border:solid 1px #99cccc;float:left">
メイン
</div>
<div style="width:200px;float:left">
<div style="border:solid 1px #cccccc;margin-bottom:1em">
<div>画像1</div>
<div>文章1</div>
</div>
<div style="border:solid 1px #cccccc;margin-bottom:1em">
<div>画像2</div>
<div>文章2</div>
</div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>

この回答への補足

早速のご回答ありがとうございます。
わたしの説明が足りなかったようで、追加させていただきます。


レイアウトは次のようなものを目指しています。

文文文文文文文■■■■
文文文文文文文■画像■
文文文文文文文■■■■
文文文文文文文□□□□
文文文文文文文□画像□
文文文文文文文□□□□
文文文文文文文文文文文
文文文文文文文文文文文
文文文文文文文■■■■
文文文文文文文■画像■
文文文文文文文■■■■
文文文文文文文文文文文
文文文文


あと、掲示板のようなシステムを作っていまして、文章と画像はいろいろなパターンあるので、
ご回答のような方法だと、いろんなパターンに対応できないような気がします。

wikipediaのソースをみても画像を一括してdivで囲っているようではなさそうです。
3時間くらいいろいろと方法を探しているのですが、いい方法が見つかりません。

補足日時：2010/06/21 13:01
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報