-

飲食店のWebサイトで、2段組のテキストメニューの下部にキャプション付きの写真を並べるということで組みましたが、フロートに翻弄され気味で、知識があればもっとスマートな記述になるのではないかと思って、他の方のご意見を聞きたいです。
下にソースを載せますので、全体的に何か気がつくことがあればご指摘よろしくお願いします。

みんなの回答 3 件

名無しさんの回答

Wordpressで構築しています。cfはclearfixのスタイルです。
2段組の右の方が左よりメニューが1つ少ない場合があります。
また、下部の写真(dd)と説明(dt)の部分は、説明テキストがいらない場合もあるのですが、この場合はdtにclassを付けて、display:none;にしても要素的に問題ないでしょうか。

<img src="images/md_beer.jpg" alt="Beer" title="Beer" width="600" height="100" class="aligncenter size-full wp-image-165" /> 
<div class="cf"> 
<dl class="pagemenu"> 
<dt>生ビール</dt><dd>500-</dd> 
<dt>ギネス缶</dt><dd>650-</dd> 
<dt>キリンラガー</dt><dd>550-</dd> 
<dt>キリンフリー</dt><dd>500-</dd> 
<dt>PRIMO(プリモ)</dt><dd>700-</dd> 
<dt>CORONA(コロナ)</dt><dd>600-</dd> 
</dl> 
<dl class="pagemenu"> 
<dt>BINTANG(ビンタン)</dt><dd>600-</dd> 
<dt>BECK(ベックス)‘S</dt><dd>600-</dd> 
<dt>BASS(バス)</dt><dd>600-</dd> 
<dt>HEINEKEN(ハイネケン)</dt><dd>600-</dd> 
<dt>ZIMA(ジーマ)</dt><dd>600-</dd> 
</dl> 
</div> 
<dl class="foodimg"> 
<dt>各種ビール</dt> 
<dd><a href="images/foodimg_beer-150x150.jpg" alt="各種ビール" title="各種ビール" width="150" height="150" class="alignnone size-thumbnail wp-image-257" /></a></dd></dl> 
<dl class="foodimg"> 
<dt>グラスビール</dt> 
<dd><a href="images/foodimg_glass-150x150.jpg" alt="グラスビール" title="グラスビール" width="150" height="150" class="alignnone size-thumbnail wp-image-258" /></a></dd></dl>
名無し

dl-dt-ddにこだわらなければもっと自由に書けるはず。

名無し

dlはレイアウト的に使いづらいよな

名無し

画像検索の結果にこだわらなければ、<img>の部分をcssの背景にしてしまう手もあるな。そうすればdlじゃなくてulでもいける。

名無し

dldtddにこだわりすぎというのがわかってきました!

名無しさんの回答

素直にテーブル使えば良いのに

名無し

レスありがとうございます。以前参考にした同じような形のページがdl-dt-ddを使っていて、テーブルという発想が出ませんでした。検討してみます。その場合はspanで金額の頭を揃えるという感じになりますかね。

名無し

td内で右揃え(必要ならpadding-rightとる)にしたら合うんじゃないですかね?

名無しさんの回答

テーブル、もしくはul、liにしない理由は何かあるのでしょうか?

名無し

レスありがとうございます。個人的にdl-dt-ddが好きで、2つの項目を並べるとなると好んで使っていました。表現の幅を狭めていたような気がします。テーブルとul-liを使う方法でちょっと再考してみます。

最終更新日:2012-11-29 (3,369 views)

関連するトピックス

ページ上部に戻る