画像を２つ横に並べる方法と、文字の回りこみの方法又はサイトを案内して下さい

質問

現在、サイドバーのフリーエリアに付けている画像のことで質問します。

これらの画像を２つ横に並べる方法、又は、文字の回りこみの挿入タグの載っているサイトを教えて下さい。

『　<script type="text/javascript" src="○○○.js"></script><script language="JavaScript" src="http://○○jp/flash/<%url>"></script>　』　の横に　『　<a href="リンク先ＵＲＬ"target="_blank"><img src="画像ＵＲＬ" border="0"></a>　』　を並べる方法
と
『　<div &align><iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://○○○.html" name="MainFrame">Iフレームを使用しています。画像が正しく見えない場合はブラウザを代えていただくかなどしてください。<br>「<a href="http://○○jp/">web素材はっぴーフリー</a>」 「<a href="http://○○com/~kmid/">押し花とアイコン</a>」</iframe></div>　』　の横に　『　<script type="text/javascript" src="○○○.js"></script><script language="JavaScript" src="http://○○jp/flash/<%url>"></script>　』　を並べる方法

『　<script type="text/javascript" src="○○○.js"></script><script language="JavaScript" src="http://○○jp/flash/<%url>"></script>　』　の　横への文字の回りこみの方法
　↑
イメージ的には、『　<a href="リンク先ＵＲＬ"target="_blank"><img src="画像ＵＲＬ" border="0" align="left"style="padding:5px;"></a>文字文字文字文字　』のような感じにならないのでしょうか？

これらは可能なのでしょうか？

可能ならばこれらが載っているサイトを教えて頂きたいのですが、お願いします。

回答No.2

345itati · ベストアンサー

<div style="float: left;"><script type=～中略～<%url>"></script></div><div style="float: left;"><a href="リンク先ＵＲＬ"target="_blank"><img src="画像ＵＲＬ" border="0"></a></div>

と、float要素を使って回り込みを指定すれば良い。
文字の回り込みも、<script>を汎用ブロックレベル要素<div>でくくって、<div>にfloat要素を使えば出来ます。。。。

<div style="float: left"><script type=～中略～<%url>"></script></div>テキストテキストテキスト

ブラウザによっては下のボックスに影響が出るので、下に来るボックスにはclear: both;を指定しないとレイアウトが崩壊するので注意。

参考
→http://www.tagindex.com/stylesheet/box/float.html

補足

345itatiさん、ありがとうございます。
参考ＵＲＬ、実は、回り込ませるのに検索し見たのですがその時は、サイドバーで使えないのかと思ってパスしてしまっていました。
しかし、現在、お陰さまで、あやふやですが、なんとか解ってきました。

未だ、回り込み解除の『clear: both;』の使い方がまだよく解っていませんが、タグの最後に<br style='clear:both'>でも良いのでしょうか？

また、『時計のボックス』の横に『文字を書いて』、『文字の下に下側に画像を置く』方法は、下記の方法で間違っていないでしょうか？これらの説明を見させて頂いて自分は下記のように理解したのですが…自分のブログでは一応、正常に表示されている感じですが…正解でしょうか？

<div style="float: left;"><div &align><iframe allowTransparency="true" frameborder="0" scrolling="no" width="121" height="127"src="http://blog4.fc2.com/h/happyfree/file/t-tamacup.html" name="MainFrame">Iフレームを使用しています。画像が正しく見えない場合はブラウザを代えていただくかなどしてください。<br>「<a href="http://free.hippy.jp/">web素材はっぴーフリー</a>」&ensp;「<a href="http://homepage2.nifty.com/~kmid/">押し花とアイコン</a>」</iframe></div></div><div style="float: left;">←睡眠時にクリックすると目をこすります♪　<a href="リンクＵＲＬ
"target="_blank"><img src="画像ＵＲＬ" border="0"></a>　<a href="リンクＵＲＬ" target="_blank"><img src="画像ＵＲＬ"></a> </div><br style='clear:both'>

ｄｉｖが続いてしまっていますが問題ありませんか？

また、『ブラウザによっては下のボックスに影響が出るので・・・・』と言うのが怖いので、間違って理解しているようでしたら指摘して下さい。

回答No.5

345itati

#2です。
ざっと見た感じでは無理に入れる必要も無いかな～^^;とか思えますが。clear: both; を入れた方がいいというのは、#3で書いた通りで、ブラウザによってはこれによって下に来る要素の位置がずれてしまう事がある為です。
これでWin IEで崩れませんって事なら、FirefoxやOperaはまず大丈夫だと思います。個人的に、MacIEで崩れそうな気がしないでもないけど・・・。
多分、今のまま(clear: both;は入れない)で構わないかと。。。

<div &align>は、恐らくプログラムがHTMLが吐き出す時に、<div style="text-align:left">に置き換えるのでしょうね。

//個人的に、フリーエリアで<p>要素内に<div>を入れるのはちょっと・・・まずい気がします(深く考えなくても大丈夫といえばいいけど、本体は・・・・

お礼

なんとなく怖い返答＾＾；
今の自分の頭には、理解できる土壌が出来ていないのかもしれません。
書かれていることを解るまで熟読します。

それから、先日・・・と言うかかなり前、１１月２２日の『相互リンク・・・』http://okwave.jp/qa2555942.htmlと言う質問に対し答えて頂いた意味が、先日わかりました。
この所、解らない所は質問をしないで、検索に明け暮れていたら、ホームページ作成とかいう所あたりに載っていました。
今思えば２２日の、あの時点で『メモ帳　アップロード』と検索すればたくさんあったのだとわかりました。
ちなみに、http://www.k3.dion.ne.jp/~shindo/No2.htmこんな感じのものを探していました。
あの時は345itatiさんの解答が全くわからなく失礼をしました。
自分の理解能力に問題があったようですｗｗ

若干ですがレベルは上がってきています。ですが、理解するのに一つ一つ時間が掛かるのが現状です。なんとなくわかってきている感じがするのでわかるまでこれらを熟読します

回答No.4

345itati

又もや#2です。。。
実際表示されるブログのソースを直接見て(HTML編集画面ではなく、実際のブログ部分)、回り込みを指定しているボックスが入っている親要素のclassを確認して下さい。
↓みたいな感じになっているかと。。。

<div class="***">
<div style="float: left;"><div &align>～以下略

***がclassにあたります。恐らくサイドバーのボックス全てに共通のclassが使われているはずですので(デザイン上)、よ～く見ていけば、どれがサイドバーのボックス指定か分かるはずです。
ただし、HTMLとCSSの構成がしっかり分かってないと泥沼化しそうな気もします・・・。テンプレによっては枠線とか余白を考慮して多重に入れ子になっているので。。。

補足

☆ブログのソースを見ました
ctrl＋Ｆで≪div style="float: left≫を検索した所、

<div class="menuBlockHead"><div class="menuHeadText">・ユ・遙シ・ィ・・「</div></div>
<div class="menuBlockBody">
<div class="menuText">
<style="text-align:left">

</style>
<!-- 。reearea、ホテ讀ヒHTML、ャツ衄、オ、・゛、ケ。」 -->
<p class="plugin-freearea" style="text-align:left">
<div style="float: left;"><div style="text-align:left"><iframe allowTransparency="true" frameborder="0" scrolling="no" width="121" height="127"src="http://blog4.fc2.com/h/happyfree/file/t-tamacup.html" name="MainFrame">I・ユ・・シ・爨ネヘム、キ、ニ、、、゛、ケ。」イ霖・ャタオ、キ、ックォ、ィ、ハ、、セ・遉マ・ヨ・鬣ヲ・カ、螟ィ、ニ、、、ソ、タ、ッ、ォ、ハ、ノ、キ、ニ、ッ、タ、オ、、。」<br>。ヨ<a href="http://free.hippy.jp/">webチヌコ爨マ、テ、ヤ。シ・ユ・遙シ</a>。ラ 。ヨ<a href="http://homepage2.nifty.com/~kmid/">イ。、キイヨ、ネ・「・、・ウ・・/a>。ラ</iframe></div></div><div style="float: left;">「ォソ醂イサ・・・・・
ですが、
『<div style="float: left;"><div &align>』がありません…。(>_<)
なぜ無いのでしょう(◎o◎)アレ？

☆345itatiさん、何度も申し訳無いのですが、サイドバーにタグを挿入したからそのタグの最後に、３の補足で書いたように＜div style="clear:both;"＞＜/div＞を付ければ解決と言うことでは間違いになるのでしょうか＾＾；？

☆また、フリーエリアを設定する時に右側に≪[ フリーエリア ] のHTMLの編集≫と言うのがあるのですがそこに
<!-- ＆freeareaの中にHTMLが代入されます。 -->
<p class="plugin-freearea" &align>
&freearea
</p>
と記されています。
ココに何かつけるのでは、やはり間違いになってしまうのでしょうか？

回答No.3

345itati

#2です。
ブログだと、サイドバーのボックス自体(フリーエリアとして使える親ボックス)にclear: both;を指定すればいいはずです。
これはCSS編集で、サイドバーのボックスに当たる部分の<div>要素のclassを探し出して、その部分にclear: both;を書き加えれば宜しいかと。。。
(普通は指定する必要が無いはずですが、WinIEやMacIEでは下に来るブロックレベル要素が、float: left;を引きずってレイアウトが壊れてしまうことがあるので)

><br style='clear:both'>
これは誤りです。<br>はインライン要素である為、ブロックレベル要素にしか使えないclearプロパティは使えません。
つまり、下に来るボックス(<div>や<p>のようなブロックレベル要素)は回り込みを解除しておかないと、表示がずれる可能性があるので回り込みを解除した方がいいという意味です。。。

ブロックレベル要素<div>は入れ子に出来ますので、<div>が続いている事については、この記述で構いません。

補足

345itatiさん、毎回、すいません。

CSSと言うのがいまいち理解していないらしく、サイドバーのボックスに当たる部分の<div>要素のclassと言うのを探し出すことが出来ないのですが…、HTMLの編集の際に、
<div style="float: left;"><div &align><iframe allowTransparency="true" frameborder="0" scrolling="no" width="121" height="127"src="​http://blog4.fc2.com/h/happyfree/file/t-tamacup.html"​ name="MainFrame">Iフレームを使用しています。画像が正しく見えない場合はブラウザを代えていただくかなどしてください。<br>「<a href="​http://free.hippy.jp/">web​素材はっぴーフリー</a>」 「<a href="​http://homepage2.nifty.com/~kmid/">​押し花とアイコン</a>」</iframe></div></div><div style="float: left;">←睡眠時にクリックすると目をこすります♪　<a href="リンクＵＲＬ
"target="_blank"><img src="画像ＵＲＬ" border="0"></a>　<a href="リンクＵＲＬ" target="_blank"><img src="画像ＵＲＬ"></a> </div>＜div style="clear:both;"＞＜/div＞ こうしてもダメでしょうか？
＜div style="clear:both;"＞＜/div＞をつけたのですが・・・。

clear:both;が解らなくてclear:both;で検索して、http://ae8586.blog52.fc2.com/blog-entry-81.htmlで見たのですが…もしかして自分全然解っていないのかも…。ヤバイ
お手数ですがもう一度解答お願いします。

回答No.1

fake-tang

・テーブルレイアウトにする
・style="float:left;"

http://www.htmq.com/index.htm
ここにいつも通っています。

お礼

ありがとうございます。お気に入りに登録して参考にさせていただきます。