おはぎ 8/30発売 との列挙する際のオススメのタグを知りたい

Question

お世話になっております。

本当に基本的な事を質問失礼します。

発売日時

おはぎ　8/30
天丼　9/1
ところてん　8/15

と列挙する際に
日付の表示がズレているのが気になっております。

こういった場合どういったタグを使うのがよろしいか伺ってよろしいでしょうか？

tableタグかな？と思ったのですがもうちょっと良さげなタグがあるような気がするため
質問失礼します。

博識な方はご返答のほどよろしくお願い申し上げます。

【【【【【【【【【【【【【【【【【追記失礼します。】】】】】】】】】】】】】】】】】】】】】

	<div class="menu4a">
		<dl id="">
			<dt>おはぎ</dt><dd>2018/07/10</dd>
			<dt>天丼</dt><dd> 2015/03/04</dd>
			<dt>ところてん</dt><dd> 2018/07/10</dd>
			<dt>ヒラメのバプールエビ風味ソース</dt><dd>2018/06/10</dd>
			<dt>麩菓子</dt><dd> 2018/05/10</dd>
		</dl>
	</div>

.menu4a{
	height:180px;overflow:auto; background-color:#ff8; line-height:1.5em;
}
.menu4a dt{display:block;float:left;width:100px;}
.menu4a dd{display:block;}

となっている場合
idで定義してもうまくいかず
manu4aのdtのwidth:100pxも効かないので
困っているのです……

あまりhtml、cssを操れず申し訳ないのですが上記お問い合わせいたします。

Answer 1

こことか？
CSS GridとFlexboxを使ってメディアクエリなしでレスポンシブにレイアウトする方法
あとはdivで囲ったりとかやり方は色々あるだけに悩みますね。
個人的にはFlexbox使います。

Answer 2

例えばこんな。
https://codepen.io/sleepzzz/pen/YOzdoJ

確かに、構造的には表にするまでもないような気がするので、僕だったらdlで組みます。
ですが、日付を揃えるために、CSS側でtableのレイアウト使ってます。
固定にしたい場合は、お好みでdtにwidth指定する感じで。

<dl class="sale-date-list">
  <div>
    <dt>おはぎ</dt>
    <dd>8/30</ddt>
  </div>
  <div>
    <dt>天丼</dt>
    <dd>9/1</ddt>
  </div>
  <div>
    <dt>ところてん</dt>
    <dd>8/15</ddt>
  </div>
</dl>

.sale-date-list {
  display: table;
}
.sale-date-list > div {
  display: table-row;
}
.sale-date-list dt {
  display: table-cell;
}
.sale-date-list dd {
  display: table-cell;
  padding-left: 1em;
}

Answer 3

構造上「表」として捉えるならテーブルを使うのが正しいマークアップです
定義としてとらえてdt-ddを1対1で設定するならccsでdtに適当な幅を与えればよいでしょう

#dl1 dt{display:block;float:left;width:100px;}
#dl1 dd{display:block;}

<dl id="dl1">
<dt>おはぎ<dt><dd>8/30</dd>
<dt>天丼<dt><dd>9/1</dd>
<dt>ところてん<dt><dd>8/15</dd>
</dl>

あとはflexとか

Answer 4

直接の回答ではありません。考え方です。

見た目が想定通りであれば”実現手段”は関係（1つだけでは）ありません。

効率的であるかどうかは気にはなりますが、多くの見ている人はhtmlソースまで気にしていません。
表現方法は１つではないので色々試してみてご自身が最もしっくりくるものを採用されてはいかがでしょうか。

Comments

[bwz61366]

>見た目が想定通りであれば手段は関係ありません。
これは意味的なマークアップを窓から放り投げてるように読めるんだけど、そこらへん実際どうです？
もしそうなら、初心者マークをつけている質問者にするべき回答ではないと思うんだけども

[m.ts10806]

この質問者さんはこれまで何度かやりとりをしてきた中で、
今回の質問内容も含めてマークアップは問題ないと判断した上での回答です。
議題的には「tableがいいと思うけど他にも良いのがあれば」なので
マークアップはクリアされている前提です。
分かりづらいようでしたら追記しますが、いかがいたしましょう。

[m.ts10806]

あくまで「手段」について言及しました。
「適当にHTML組んじゃえ」ってことではないので。
多くの人＝見ている人　で「組む側の人」ではないですが、そこは分かりづらかったですね。
回答調整します。

[moitaro]

背中を押して頂きありがとうございます。
結局使い慣れていたTableタグで対処しました……

コメント頂いた皆様ありがとうございました。
結局
＞ご自身が最もしっくりくるものを採用
でしたm(_ _)m

[m.ts10806]

「実現方法は1つではない」というところが伝わればいいかなと思って回答しました。
進んだようで何よりです。