フォトスタンド風画像枠

ブログでスタイルシート

トップ  > ブログでスタイルシート

注意事項

現在の楽天ブログでは、記事入力の中に改行コードがあると、自動的に改行するタグ（BRタグ）が付加されます。 テキストだけの場合には、このほうが便利なのですが、スタイルシートでレイアウトした場合、ブラウザでの表示が崩れます。
そのため、サンプルHTMLも自動的に改行が入るのを前提にしています。 見づらかったり、編集しづらかったりしますが、現在の仕様上仕方がありません。 ここのサンプルは、楽天ブログで利用できるHTMLを使っています。なお、楽天ブログの「トップ自由欄」や「フリーページ」で利用するときに「自動改行なし（<BR>タグで指定）」のモードで編集する場合には、タグの途中とかでない限り、どこに改行を入れてもかまいません。
他のブログサイトでも、そのまま使えますが、利用できるHTMLに制限がある場合、うまく表示されないことがあります。もし、スタイルシートを別ファイルで指定できるのであれば、タグのstyle属性をclassやidに変更して指定したほうがスマートです（楽天ブログではこれができません）。

画像に枠を付ける

TABLEタグを使って画像に額縁のような枠を表示します。IMGタグのsrc="..."には画像のURLをalt="..."のところには代替テキストをいれてください。

サンプルHTML
<table style="border:outset 6px pink"> <tr><td style="border:inset 4px pink"><img src="..." alt="..."> </td></tr> </table>
ブラウザ表示

TABLEタグの「outset 6px pink」の6pxを変えると枠が太くなって見えます。TDタグの「border:inset 4px pink」の4pxを変えると高さが高くなるように見えます。pinkは色の指定ですのでお好みで変えてください。画像と枠の間に隙間をあけてフォトスタンド風にしてみます。

サンプルHTML
<table style="border:outset 6px pink"> <tr><td style="border:inset 4px pink;padding:10px"><img src="..." alt="..."> </td></tr> </table>
ブラウザ表示

TDタグで「padding:10px」となっている10px（10ピクセル）を変えると上下左右の隙間の幅が変わります。この場合、画像と枠の隙間は背景色または背景画像が表示されます。これだと都合の悪いときにはTABLEタグに背景色を設定します。

サンプルHTML
<table style="border:outset 6px pink;background-color:white"> <tr><td style="border:inset 4px pink;padding:10px"><img src="..." alt="..."> </td></tr> </table>
ブラウザ表示

中央に寄せて表示する

上のサンプルの場合、表示する位置は指定していないので、左寄せとなっています。レイアウト的には中央にあるほうがよいことが多いので、中央寄せをしてみます。

サンプルHTML
<table style="border:outset 6px pink;background-color:white;margin:0 auto 0 auto"> <tr><td style="border:inset 4px pink;padding:10px"><img src="..." alt="..."> </td></tr> </table>
ブラウザ表示

あまり使わないかもしれませんが、枠の中に２つの画像を入れてみます。HTMLが複雑になって見づらくなってきます。

サンプルHTML
<table style="border:outset 6px pink;background-color:white;margin:0 auto 0 auto"> <tr><td style="border:inset 4px pink;padding:10px"> <div style="float:left;margin-right:10px"> <img src="..." alt="..."> </div> <div style="float:right"> <img src="..." alt="..."> </div> <br style="clear:both"> </td></tr> </table>

ブラウザ表示

DIVタグ「float:left;margin-right:10px」の10pxは画像と画像の間の隙間を設定しています。

２つ横に並べる

上の例では、枠の中に２つの画像を並べましたが、今度は枠付きの画像を横に２つ並べます。レイアウトは左右に２分割してそれぞれを中央寄せにしてみます。

サンプルHTML
<div style="float:left;width:45%"> <table style="border:outset 6px pink;background-color:white;margin:0 auto"> <tr><td style="border:inset 4px pink;padding:10px"><img src="..." alt="..."> </td></tr> </table> </div> <div style="float:right;width:45%"> <table style="border:outset 6px pink;background-color:white;margin:0 auto"> <tr><td style="border:inset 4px pink;padding:10px"><img src="..." alt="..."> </td></tr> </table> </div> <br style="clear:both">
ブラウザ表示

左右の画像の幅が違っていて、画像の位置がいまいちな場合には、「float:left;width:45%」「float:right;width:45%」の45%になっているところを調整してください。左右を足したときに100%を超えないようにしてください。ここでは、念のためfloatがずれないように90%になるようにしてますが、必ずしもそうする必要はなく、ブラウザで確認してちゃんと出ていればよいと思います。


Copyright© 2006 finky. All Rights Reserved.

© Rakuten Group, Inc.
Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
    Share by: