INDEX    RSS    ADMIN

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

写真(画像)に文字を回り込ませる最も簡単な方法

最近よく多用している技の一つを紹介しておきます。
写真(画像)に文字を回り込ませる最も簡単な方法です。

以前はTableタグを使って作っていましたが、けっこう面倒でした。
"div" (ボックス要素)とスタイルシートの "float" (回り込み)を使って作る方が
分かりやすくて簡単です。
もっと早く気付けば良かったと後悔しています。(笑)

■divを横に並べて作ります。
ここにテキストが回り込みます。
○○○○○○○
○○○○○○○

--回り込みを解除--


<div style="float: left; margin-right: 15px; left; margin-left: 0px;">
<img src="画像のURL" alt="" border="0" />
</div>
<div>
ここにテキストが回り込みます。<br />
○○○○○○○<br />
○○○○○○○<br />
</div>
<p style="clear: both;">--回り込みを解除--</p>

ここにテキストが回り込みます。
○○○○○○○
○○○○○○○

--回り込みを解除--


<div style="float: right; margin-right: 15px; left; margin-left: 0px;">
<img src="画像のURL" alt="" border="0" />
</div>
<div>
ここにテキストが回り込みます。<br />
○○○○○○○<br />
○○○○○○○<br />
</div>
<p style="clear: both;">--回り込みを解除--</p>

ここにテキストが回り込みます。
○○○○○○○
○○○○○○○

--回り込みを解除--


<div style="float: left; margin-right: 15px; left; margin-left: 0px;">
<img src="画像のURL" alt="" border="0" />
</div>
<div style="float: left; margin-right: 15px; left; margin-left: 0px;">
<img src="画像のURL" alt="" border="0" />
</div>
<div>
ここにテキストが回り込みます。<br />
○○○○○○○<br />
○○○○○○○<br />
</div>
<p style="clear: both">--回り込みを解除--</p>


FC2ブログ以外でもこの方法で大丈夫だと思います。
"float" が理解できるとウェブサイトの枠組みもスタイルシートで作れるようになります。
基本はここで紹介している方法と同じなのでむずかしく考える必要はありません。

前に似たようなヒナ型を作って紹介しましたが今思うと意味が分かりません。(笑)
Tableタグは表を作る時だけ使用することをおすすめします。

Tableタグ → div要素に変更するメリットです。
スタイルシートを触り始めた頃の記事なのにツボを抑えていたので驚きです。
サイト(ブログ)の表示速度
スポンサーサイト

コメント

非公開コメント

プロフィール

nano

Author : nano
ホームページ作成からウェブニュースまでインターネットに関連した記事を不定期で更新中。IT技術の進化とともに便利になるサービスやシェア・フリーソフト、アフィリエイトサービス、ホームページ作成ツールなどについて書いてます。情報は遅れています(笑)

はてなブクマの人気エントリ

最近のトラックバック

最近のコメント一覧

タグクラウド

Archive Calendar

Sun Mon Tue Wed Thu Fri Sat
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -

バックナンバー

モバイル

携帯電話でQRコードを解析すると外出先からも簡単にブログを見ることが出来ます。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。