現在、サイドバーのフリーエリアに付けている画像のことで質問します。
これらの画像を2つ横に並べる方法、又は、文字の回りこみの挿入タグの載っているサイトを教えて下さい。
『 <script type="text/javascript" src="○○○.js"></script><script language="JavaScript" src="http://○○jp/flash/<%url>"></script> 』 の横に 『 <a href="リンク先URL"target="_blank"><img src="画像URL" 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="リンク先URL"target="_blank"><img src="画像URL" border="0" align="left"style="padding:5px;"></a>文字文字文字文字 』のような感じにならないのでしょうか?
これらは可能なのでしょうか?
可能ならばこれらが載っているサイトを教えて頂きたいのですが、お願いします。
No.2ベストアンサー
- 回答日時:
<div style="float: left;"><script type=~中略~<%url>"></script></div><div style="float: left;"><a href="リンク先URL"target="_blank"><img src="画像URL" 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さん、ありがとうございます。
参考URL、実は、回り込ませるのに検索し見たのですがその時は、サイドバーで使えないのかと思ってパスしてしまっていました。
しかし、現在、お陰さまで、あやふやですが、なんとか解ってきました。
未だ、回り込み解除の『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. … 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="リンクURL
"target="_blank"><img src="画像URL" border="0"></a> <a href="リンクURL" target="_blank"><img src="画像URL"></a> </div><br style='clear:both'>
divが続いてしまっていますが問題ありませんか?
また、『ブラウザによっては下のボックスに影響が出るので・・・・』と言うのが怖いので、間違って理解しているようでしたら指摘して下さい。
No.5
- 回答日時:
#2です。
ざっと見た感じでは無理に入れる必要も無いかな~^^;とか思えますが。clear: both; を入れた方がいいというのは、#3で書いた通りで、ブラウザによってはこれによって下に来る要素の位置がずれてしまう事がある為です。
これでWin IEで崩れませんって事なら、FirefoxやOperaはまず大丈夫だと思います。個人的に、MacIEで崩れそうな気がしないでもないけど・・・。
多分、今のまま(clear: both;は入れない)で構わないかと。。。
<div &align>は、恐らくプログラムがHTMLが吐き出す時に、<div style="text-align:left">に置き換えるのでしょうね。
//個人的に、フリーエリアで<p>要素内に<div>を入れるのはちょっと・・・まずい気がします(深く考えなくても大丈夫といえばいいけど、本体は・・・・
なんとなく怖い返答^^;
今の自分の頭には、理解できる土壌が出来ていないのかもしれません。
書かれていることを解るまで熟読します。
それから、先日・・・と言うかかなり前、11月22日の『相互リンク・・・』http://okwave.jp/qa2555942.htmlと言う質問に対し答えて頂いた意味が、先日わかりました。
この所、解らない所は質問をしないで、検索に明け暮れていたら、ホームページ作成とかいう所あたりに載っていました。
今思えば22日の、あの時点で『メモ帳 アップロード』と検索すればたくさんあったのだとわかりました。
ちなみに、http://www.k3.dion.ne.jp/~shindo/No2.htmこんな感じのものを探していました。
あの時は345itatiさんの解答が全くわからなく失礼をしました。
自分の理解能力に問題があったようですww
若干ですがレベルは上がってきています。ですが、理解するのに一つ一つ時間が掛かるのが現状です。なんとなくわかってきている感じがするのでわかるまでこれらを熟読します
No.4
- 回答日時:
又もや#2です。
。。実際表示されるブログのソースを直接見て(HTML編集画面ではなく、実際のブログ部分)、回り込みを指定しているボックスが入っている親要素のclassを確認して下さい。
↓みたいな感じになっているかと。。。
<div class="***">
<div style="float: left;"><div &align>~以下略
***がclassにあたります。恐らくサイドバーのボックス全てに共通のclassが使われているはずですので(デザイン上)、よ~く見ていけば、どれがサイドバーのボックス指定か分かるはずです。
ただし、HTMLとCSSの構成がしっかり分かってないと泥沼化しそうな気もします・・・。テンプレによっては枠線とか余白を考慮して多重に入れ子になっているので。。。
この回答への補足
☆ブログのソースを見ました
ctrl+Fで≪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. … 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さん、何度も申し訳無いのですが、サイドバーにタグを挿入したからそのタグの最後に、3の補足で書いたように<div style="clear:both;"></div>を付ければ解決と言うことでは間違いになるのでしょうか^^;?
☆また、フリーエリアを設定する時に右側に≪[ フリーエリア ] のHTMLの編集≫と言うのがあるのですがそこに
<!-- &freeareaの中にHTMLが代入されます。 -->
<p class="plugin-freearea" &align>
&freearea
</p>
と記されています。
ココに何かつけるのでは、やはり間違いになってしまうのでしょうか?
No.3
- 回答日時:
#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. … 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="リンクURL
"target="_blank"><img src="画像URL" border="0"></a> <a href="リンクURL" target="_blank"><img src="画像URL"></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
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像を2つ横に並べる方法と、...
-
複数の要素を表示してる時だけ...
-
どの<li><a> が押されたか判別...
-
マウスオーバーのメニューについて
-
クリックで背景変更するタグ
-
「jQuery」アコーディオンメニ...
-
jqueryのsortableで一部ソート...
-
画像の表示位置
-
jQueryで画像を重ねる
-
ツリー型の目次作成
-
JavaScript で flexslider の画...
-
[急ぎ] videoタグで埋め込んだm...
-
TABLEの高さを固定したいのですが…
-
high slideをFC2ブログで
-
CSSで、左側にあるGlobalNaviga...
-
画面が真っ白になるのはどうして?
-
YES or NO形式で進んで行く、タ...
-
JavaScriptで変更した属性の元...
-
jQueryを使ってある画像を別の...
-
IFRAMEの表示/非表示を切り替え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
seleniumbasic chrome操作について
-
画像を2つ横に並べる方法と、...
-
-UWSC:IEで自動クリック-
-
【HTML、VBScript】HTAでのイベ...
-
Excel VBAに翻訳して頂けません...
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
htmlの記述で link rel=styles...
-
JSPでの画像ファイル表示
-
javascriptテキストBOX色を元に...
-
Slick.jsのオプションrtlについて
-
読み込んだQRコードをフォーム...
-
c++std::string型をTCHARに変換...
-
JavaScriptで変更した属性の元...
-
createElementで作成した要素を...
-
textareaに画像を表示したい
-
フッター上部に謎の隙間
-
jqueryのsortableで一部ソート...
-
removeEventListenerについて
-
jQueryで同じクラス名のものを...
おすすめ情報