2009/09/13

レイアウトテスト

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

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

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

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

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


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

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


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


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


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


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



このまえここに入ってるシングル買っちゃったしなー。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)

0 件のコメント: