monolog...

旧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をしてみます。

今までの写真掲載方法

今まで、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属性を利用

写真の間隔がやや拡がった以外は、見事にほぼ同じレイアウトになっています。早速、次回からはこのclass属性を使わせていただこうと思います。

なお、.float-left属性と.float-right属性を組み合わせて、左右交互に写真をFloatingさせることも出来るようです。

Test2：.float-left属性と.float-right属性を交互に使用

旧Ganesha's monologue（by P_BLOG）より移転転記。（2009-12-13）

ニュースでも報道されたが、夕方雨上がりにきれいな虹が出たので撮っておいた。ちょうど代官山アドレスタワーと絡んで良い感じ。本当はこの外側にも薄い虹が出て二重の虹になっていたのだが、外側の虹はごく薄かったのでうまく写らなかった。今から考えてみると、ISO感度を下げて撮った方が良かったかな。