HTMLでのマークアップについて

解決済

質問者：sun2moon
質問日時：2010/10/20 04:44
回答数：2件

HTMLでのマークアップについて

次のような画面イメージのHTMLページを作成したいと思っています。

======= 画面イメージ =======
売れ筋商品

スーパー安井「*」 10:00 ～ 20:00
安いですよ。
・大根
・玉ねぎ
・レンコン

魚活「*」 10:00 ～ 19:00
うちの魚は新鮮です！
・マグロ
・アジ

西友「*」 24時間営業
安いは、愛だ
・ジーンズ
・コロッケ
・あんぱん
=============================
※お店の名前の右にある「*」の所に、そのお店のアイコン画像を表示したいです。

まずはHTMLでマークアップしようかと思ったのですが、
「お店の名前」、「お店のアイコン画像」、「営業時間」、「キャッチコピー」の部分を
どのようにマークアップするのが作法なのかよくわからなくて困っています。

<h1>売れ筋商品</h1>
<h2>スーパー安井</h2>
<img src="yasui.gif" />
10:00 ～ 20:00
<p>安いですよ。</p>
<ul>
<li>大根</li>
<li>玉ねぎ</li>
<li>レンコン</li>
</ul>

<h2>魚活</h2>
... ...

※お店の名前、営業時間、キャッチコピーの表示は、異なるスタイル(フォント、背景など)を
適用したいと思っています。

アドバイスよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： naokita
回答日時：2010/10/20 14:06

<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で１行目を横並びにする。２行目で解除
アイコンは「スーパー安い」の手前に背景で設置した方が簡単

- 0
- 件

通報する

この回答へのお礼

naokitaさん
回答ありがとうございます。

1つの<dt>に対して複数の<dd>を指定できるのですね。
下記サイト(HTML5)も読んでみましたが、パズルにピースがはまったような感覚を持ちました。
http://www.html5.jp/tag/elements/dd.html

HTMLのみならず、CSSも苦手なので、表示を思い通りにできるか不安ですが、
<dl>要素でマークアップしてみたいと思います。

どうもありがとうございました。

通報する

お礼日時：2010/10/20 20:42

No.1

回答者： yyr446
回答日時：2010/10/20 13:16

　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. …

- 0
- 件

通報する

この回答へのお礼

yyr446さん
回答ありがとうございます。

店名、アイコン画像、営業時間の部分ですが、私も最初<h2>で囲っていました。
ただ、セマンティックス的にはどうなのかと考えてみて、
「店名」は見出しでいいとしても、「営業時間」はたまたま店名の横に表示するだけであって、
単なる付属情報のような位置付けなので、どうマークアップすべきか悩んでいました。

バリデーションサイトのご紹介ありがとうございます。
文法チェックだけではなく、マークアップのアドバイスもしてくれるみたいですね。

どうもありがとうございました。

通報する

お礼日時：2010/10/20 20:41

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！