■ Webデザインを学ぶ【初級/後編】,  ◎ レイアウトを学ぶ

レイアウト基本練習-①

基本を練習してみましょう。ワイヤーフレームで書き出して解説します。

同じパターンを繰り返すので、クラスセレクタを利用します。
[code] <div class="item"> <!– この中に要素を入れます –> </div> [/code]
ここで上記の解説図の仕様ですが、画像とテキストをどのように関連付けるかは様々です。商品名は、「h3」か「h4」あたりの見出しで指定してもいいかもしれません。html5からは、一つのセクションに何度でも同見出しが登場してもよいことになりました。また、項目リストや定義リストで関連させるのも意味があり、推奨します。特に決まりはなく、たくさんの公式サイトを確認しましたが、記述の仕方はほんとうにそれぞれ異なり、正解はないと思います。デザイナー・コーダーの考え方それぞれでいいと思います。
最も簡単な方法は画像を「p」で格納してimg(画像飲み)をfloatさせます。すると、画像だけが浮遊した状態になるので、うまくいくと思います。
[code]
.item img{float:left;}
[/code]
これだけで左へフロートしてしまいます。「.item」は、clearが必要です。

わたしは、個人的に「定義リスト」で定義するようにしています。この要素の中では、写真がメインだと捉えているからです。「dt」の中に写真を配置し、テキストは「dd」の中で記述します。「ul」で記述しているサイトも多いようです。

[code]
<dl>
<dt><img src="画像のパス"></dt>
<dd>画像の説明</dd>
</dl>
[/code]
【参考レイアウト】

あまおう
800円
甘くて美味しい
あまおう
800円
甘くて美味しい
あまおう
800円
甘くて美味しい
display: table

CSS3では、floatを使わず「display: table-cell」が利用できます。テーブル(表)を思い浮かべ、画像をセルの中に画像を入れるだけですね。clearが不要なので便利だと思います。

複雑なセル組は、ちょっと無理っぽい感じかな。適材適所に使うといいですね。

[code]<style>
.chigo01 ul {
display: table;
}
.chigo01 li{
display: table-cell;
vertical-align: middle;
/*くっ付いてしまうので画像よりちょっと大きめ・・*/
width:160px;
}
</style>[/code]
【HTML】
[code]
<div class="chigo01">
<ul>
<li><img src="画像のパス"></li>
<li><img src="画像のパス"></li>
<li><img src="画像のパス"></li>
<li><img src="画像のパス"></li>
</ul>
</div>
[/code]