飲食店のWebサイトで、2段組のテキストメニューの下部にキャプション付きの写真を並べるということで組みましたが、フロートに翻弄され気味で、知識があればもっとスマートな記述になるのではないかと思って、他の方のご意見を聞きたいです。下にソースを載せますので、全体的に何か気がつくことがあればご指摘よろしくお願いします。
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を使う方法でちょっと再考してみます。
みんなの回答 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>
素直にテーブル使えば良いのに
テーブル、もしくはul、liにしない理由は何かあるのでしょうか?
関連するトピックス