- ベストアンサー
HTMLでのマークアップについて
- HTMLでのマークアップについてのアドバイスをお願いします。
- お店の名前やアイコン画像、営業時間、キャッチコピーをHTMLでマークアップする方法を教えてください。
- HTMLでのマークアップによるお店情報の表示方法について教えてください。
- HTML
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<dl> <dt>スーパー安井</dt> <dd><img src="yasui.gif" />10:00 ～ 20:00</dd> <dd> <p>安いですよ。</p> <ul> <li>大根</li> <li>玉ねぎ</li> <li>レンコン</li> </ul> </dd> </dl> ---------------------- CSSで dl に背景とフォント設定。 CSSで１行目を横並びにする。２行目で解除 アイコンは「スーパー安い」の手前に背景で設置した方が簡単
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
HTML 4.01 で、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> .shop {font: italic bold 100%/150% serif; background: url(image/back.gif) no-repeat fixed 50% 50%; } .............................. </style> <title>売れ筋商品リスト</title> </head> <body> <h1>売れ筋商品</h1> <h2> <span class="shop">スーパー安井</span> <img src="yasui.gif" alt="安井店"> <span class="time">10:00 ～ 20:00</span> </h2> <p class="catchcopy">安いですよ。</p> <ul class="syouhin"> <li>大根</li> <li>玉ねぎ</li> <li>レンコン</li> </ul> .............................. </body> </html> とか、 ↓で採点してもらおう。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
お礼
yyr446さん 回答ありがとうございます。 店名、アイコン画像、営業時間の部分ですが、私も最初<h2>で囲っていました。 ただ、セマンティックス的にはどうなのかと考えてみて、 「店名」は見出しでいいとしても、「営業時間」はたまたま店名の横に表示するだけであって、 単なる付属情報のような位置付けなので、どうマークアップすべきか悩んでいました。 バリデーションサイトのご紹介ありがとうございます。 文法チェックだけではなく、マークアップのアドバイスもしてくれるみたいですね。 どうもありがとうございました。
お礼
naokitaさん 回答ありがとうございます。 1つの<dt>に対して複数の<dd>を指定できるのですね。 下記サイト(HTML5)も読んでみましたが、パズルにピースがはまったような感覚を持ちました。 http://www.html5.jp/tag/elements/dd.html HTMLのみならず、CSSも苦手なので、表示を思い通りにできるか不安ですが、 <dl>要素でマークアップしてみたいと思います。 どうもありがとうございました。