レイアウトテスト

前の記事で用いたツールは、やっぱりまだレイアウトが変だった。この記事ではレイアウトの方法をいろいろ試してみてみる。という訳でここは単なる実験場ですので、読み飛ばして下さい。

基本方針は、[写真]、[リンク]、[本文]の3つの構成要素を、DIV要素で包んで並べる。DIV要素が2つあるとき、全体のDIV要素を作りその中にこのDIV要素二つを入れる。二つのうち一つ最初の要素にはfloat属性で右または左を指定し、必ず幅を指定する。

#1 現段階のもの。[写真] DIV要素と [リンク] DIV要素でDIV要素を構成し、これと[本文]DIV要素でまたDIV要素を構成する。

構造は、＜＜1:250px　＜1-1:60px 写真＞ ＜1-2:リンク＞　＞ ＜2:本文＞ ＞

Sat Sep 12 01:37:57 +0000 2009
ryokan

このまえここに入ってるシングル買っちゃったしなー。Superfly - Box Emotions - http://bit.ly/4vjuUC #iTunes

本文が長いと、[写真] + [リンク] DIV要素の下の空白に置かれることになる。

#2 では長いのを先にレイアウトすればよいだろう。本文を右にレイアウトする。
＜　＜1:60px 写真＞ 　＜3: リンク＞　＜2: 50% 本文＞ ＞

このまえここに入ってるシングル買っちゃったしなー。Superfly - Box Emotions - http://bit.ly/4vjuUC #iTunes

Sat Sep 12 01:37:57 +0000 2009
ryokan

これは良さそうに見える。しかし、本文が短い場合は、本文の下にリンク部分がくる。ここでは本文の領域をわざと大きくしている。

このまえここに入ってるシングル買っちゃった。

Sat Sep 12 01:37:57 +0000 2009
ryokan

#3 ここまでやったら次の形式も結果が見えているようなものだ。
＜　＜1:60px 写真＞ 　＜2 : ＜2-1: 200px リンク＞　＜3: 本文＞ ＞＞

Sat Sep 12 01:37:57 +0000 2009
ryokan

このまえここに入ってるシングル買っちゃったしなー。Superfly - Box Emotions - http://bit.ly/4vjuUC #iTunes

#4: 3要素はやめて、リンクを本文に付加する形にする。[本文短くしています。]

ryokan: このまえここに入ってるシングル買っちゃったしなー。Superfly - Box Emotions - http://bit.ly/4vjuUC (Sat Sep 12 01:37:57 +0000 2009)

これはうまく行っているように見える。ただ文字数をもっと長くしたらどうだろう。

ryokan: このまえここに入ってるシングル買っちゃったしなー。Superfly - Box Emotions - http://bit.ly/4vjuUC #iTunes Superfly! Superfly! Superfly! Superfly! Superfly! Superfly! (Sat Sep 12 01:37:57 +0000 2009)

確かに写真の下に余った分が流し込まれるのだけど、この場合はそれほど変な感じもしない。

最後の方法をとろうかと思います。

記： 実際に変換して作った結果。http://tweether.appspot.com/ (今は動きません )

ryokan: 毎日新聞にはこんな記事も http://bit.ly/8M3nY (> @hoshibay) RT @mainichijpedit: 岡田外相、外務省での記者会見を全メディアに開放です。 http://bit.ly/15HHCM (Sat Sep 19 04:12:00 +0000 2009)