画像と文字の位置関係(工事中）


これを、覚えると、いろいろバリエーションが広がるような気がします私。
まずは最初の画像。
森のめぐみ文字を続けるとこう。どんなものでしょうか？これって、どう？
さらに、こう。
そして、こう。

これは、画像が左で、そのまま文字は続いていきます。

タグの前に文字があったら？
しかも改行せずに続いていたらどう？さぁて？？

森のめぐみ


こんな感じ。
タグの前に文字があったら？
しかも改行せずに続いていたらどう？さぁて？？これは二回目のものの文字の続き。これが長いとどこに飛ぶ？
って、こんな感じ。

ありゃりゃ、改行入れよ！

森のめぐみ

では、タグを記載します。

＜img src="画像URL"align="画像の位置"　この後に位置の指定を入れます。
align="middle"画像の横の真ん中に文字
align="bottom"画像の横の下に文字＞
指定を入れたら＞で閉じます。タグの後、ここに文字をいれます。

＜img src="画像のURL"align="left"＞は、画像が左
＜img src="画像のURL"align="right"＞は画像が右です。

森のめぐみ画像の横の真ん中に文字だけど、改行せずに＜center＞を最初にし
次に＜img src="画像URL"align="bottom"＞文字を書いて＜/center＞で最後の文を閉じます。を並べると、こういう感じで真中に表示されます。


森のめぐみ画像横、真中文字(改行)
＜center＞を最初にし次に＜img src="画像URL"align="bottom"＞文字を書いて＜/center＞で最後の文を閉じます。を並べると、こういう感じで真中に表示されます。

一度、追加のページでやってみるといろいろ試行錯誤できます。

森のめぐみ画像の横の真ん中に文字。これ、長くなるとどうなる？行が変わるとどうなっていくの？
改行だと？
森のめぐみ画像の横の下に文字。これも、どう？文字の横でどうなる？困った問題。さてさて。
で、ここで改行。

森のめぐみは画像が右です。この後に文字を続けるとこうなるんですけど･･･？(ﾟ_｡)？(｡_ﾟ)？
ここで改行したら、続けて書けば、そのまま右にかかれますね。
これがこのまま長くなると･･･。こんな感じで記載されて、写真の横からはみ出ていくと、元の長い行に戻るのかしら。ああぁ、書くことにちょっと悩んできました。森のめぐみつらつら書いても何かいてるんだか･･･(笑)試行錯誤のページだから、とりあえずということで(笑)ここまで書いてもまだ写真からはみ出なかった。いったいどれだけかけるのかな？最初にやったときには画像が大きすぎて横にまったく文字が這いあらなかったんだけど、今回半分のサイズにしたら、ちゃんと横に書くことができて、嬉しかった(*^^*)でも、改行によって、こんなに差が出るのねぇ。タグが最初の分にないと途中で勝手に記載されるなんて･･･誰も教えてくれなかった(確かに文字の指定フォントを使うことから考えたら、文頭に入れないとそのまま続くとは予感できたんですけど･･･)今回驚きですねぇ。
© Rakuten Group, Inc.
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
    Share by: