2006年12月12日

画像の配置(1)

文章中に画像を配置すると、思うように配置されないことがあります。

例えば。<img src="http://*****" >の後に、改行しないで文字を続けた場合。
(*****には、画像のアドレスが入ります。)


 iPod nanoケース ホワイト (OZIO)icon

このように、文字の下のラインと画像の下のラインが揃います。
画像がメインで、文字がおまけなら、これでも構わないかもしれませんね。

文章中に画像を入れたい場合は、文字列の中央ラインと画像の中央ラインが揃っているほうがきれいに見えます。

例えばこんな感じ。

ベル Merry Christmas ベル

という具合に、下揃えの場合と、

ベル Merry Christmas ベル

という具合に、中央揃えの場合と、どちらが収まりよく感じますか?


画像と文字列を中央のラインで揃えるには、imgタグの中に赤字を追加します。
<img src="http://***" style="vertical-align:middle;">

これを使うと、行頭記号がうまく収まります。

  point_01[1].gif 小見出し1
  point_01[1].gif 小見出し2

という具合です。

最初の画像でやると、中央揃えはこんな感じになります。
 iPod nanoケース ホワイト (OZIO)icon


ここまでは、画像と文字列を中央で揃える話でしたが、画像の上のラインに文字列を揃えることもできます。

 iPod nanoケース ホワイト (OZIO)icon

<img src="http://***" style="vertical-align:top;">
さっきはmiddle(中央)でしたが、今回はtop(上)と書けばいいのです。


※この方法では、画像の横に文字は1行しか入りません。
 画像の横に文章を流し込む方法については、また別の機会に。

[今回お世話になったサイト]
  • A Trial Product's 素材置き場
      目に優しくて使いやすいアイコンがたくさんあります

  • Web Essence
      可愛らしいWeb素材とテンプレートを配布している素材屋さんです



  • ↓参考になったら、クリックで応援してね!↓


    この記事へのコメント
    こんにちは。
    画像の配置についてのカスタマイズを
    参考にさせて頂きました。
    ももさんの、いつも細かいところまで
    配慮したカスタマイズのアイデアは、
    大変参考になります!
    今後とも、よろしくお願いしますね。
    Posted by Miranda at 2007年05月21日 15:45
    ◆Mirandaさん
    参考になりましたか! 
    そう言っていただけると、とても励みになります。
    私自身初心者なので、端折ってしまうとわからなくなりますから(笑)、丁寧を心掛けているんです。
    Posted by もも@管理人 このアイコンは投稿者が真の管理人であることを証明します at 2007年05月22日 04:44
    コメントを書く
    お名前: [必須入力]

    メールアドレス:

    ホームページアドレス:

    コメント: [必須入力]

    ※ブログオーナーが承認したコメントのみ表示されます。
    この記事へのトラックバックURL
    http://blog.seesaa.jp/tb/29476801
    ※言及リンクのないトラックバックは受信されません。

    この記事へのトラックバック
    以下の書籍がきっと参考になります