Article ID : 82
Test (Floating Style)
旧Ganesha's monologue(by P_BLOG)より移転転記。(2009-12-13)
この記事のTESTは、移転転記前のP_BLOG上で行われたものですから、現在の表示結果とは異なります。(2009-12-13)
P_BLOGのtext_decoration.cssに用意されているclass属性のTestをしてみます。今までほとんど活用していなかったclass属性を指定すると、どのように表示されるのかを確認することで、今後のBlog表現の幅を拡げたいと思います。
まず、今回はFloating StyleのTestをしてみます。
いろいろTestをしていくうちに、全部記録していってもごちゃごちゃしてかえって役にたたない気がしてきたので、私が気に入ったモノに絞って記録していこうと思います。
今までの写真掲載方法
今まで、text-decoration.css内にFloating Styleのclass属性が用意されていることに気付いていなかったので、自分でタグ内にstyle属性を記述してFloatingさせていました。例えばこんな感じです。
<クロヒカゲ>
撮影日時:2009/05/04
撮影場所:川崎市多摩区 生田緑地
画像サイズ:360×270
撮影機器:RICOH R8
Memo:
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<クロヒカゲ>
撮影日時:2009/05/04
撮影場所:川崎市多摩区 生田緑地
画像サイズ:360×270
撮影機器:RICOH R8
Memo:
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
ソースを覗いていただくと分かりますが、img要素やp要素内に自分でstyle属性を記述してFloatingさせているので、結構面倒くさいです。ところが、text-decoretion.cssには、Floating Styleとして3つのclass属性が予め用意されていました。
- .float-left
- .float-right
- .float-clear
上記のうち、.float-left属性を使えば、今までと同じような写真掲載が可能になるようです。
Test1:.float-left属性と.float-clear属性を利用
<クロヒカゲ>
撮影日時:2009/05/04
撮影場所:川崎市多摩区 生田緑地
画像サイズ:360×270
撮影機器:RICOH R8
Memo:
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<クロヒカゲ>
撮影日時:2009/05/04
撮影場所:川崎市多摩区 生田緑地
画像サイズ:360×270
撮影機器:RICOH R8
Memo:
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
写真の間隔がやや拡がった以外は、見事にほぼ同じレイアウトになっています。早速、次回からはこのclass属性を使わせていただこうと思います。
なお、.float-left属性と.float-right属性を組み合わせて、左右交互に写真をFloatingさせることも出来るようです。
Test2:.float-left属性と.float-right属性を交互に使用
<クロヒカゲ>
撮影日時:2009/05/04
撮影場所:川崎市多摩区 生田緑地
画像サイズ:360×270
撮影機器:RICOH R8
Memo:
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<クロヒカゲ>
撮影日時:2009/05/04
撮影場所:川崎市多摩区 生田緑地
画像サイズ:360×270
撮影機器:RICOH R8
Memo:
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
トラックバック (0)
< No Trackbacks >
コメント (0)
< No Comments >