前おき

お問い合わせフォームとか会社概要の会社情報の部分とか、
あとグルメサイトとか予約サイトの店舗詳細みたいなところのやつとかもそうかな。
ああいった、定義リストみたいな感じのものって、
みんなどんなHTML要素使ってるんですかね～？

ちなみにわたしは、フォームはdiv 地獄 & legend labelを組み込んでいく派
会社情報みたいな定義リストっぽいものはdl dt dd 派（そのままや）。
tableは本当の表に対してのみ使いたいものです。（表と定義リストの差ってなんでしょう？）
~~…なつかしいな～　ガラケーサイト延々のtr積んで作ってたの…~~

ところで、1つのサイトに上記で書いたような定義リストというか、2カラムリストがいくつか必要になってきたとき、
タイトル部分の幅に困ったことありませんか？

デフォルトで設定していたカラム幅が、なんかここではしっくりこない…みたいな。
…わたしがヘタなだけかな……。

そんなこんなで、これをこうしたらなんとかなるんやないか？とふと思いついたからやってみたよ。

要件

2カラムレイアウト
タイトル部分のコンテンツ量にあわせて、幅をいい感じに可変
項目の数はその時によるので、数には縛られない

という内容のもと、GridLayoutを使って組んでいきます。
HTMLはdl dt dd。　同じコンテナ-コンテンツ関係を作れれば、なんでもいいのですが、
liの子要素にdiv * 2とか、tr th td とかの組み方だと1項目のときしかタイトル部分の幅がいい感じにできないな…。

注意

GridLayoutを使います。が、使い方的にInternetExplorerではバグがあります。
1カラムで表示になるので、そんなに困ったことにはならないですが、
2カラム表示にはならないです。

やり方

なにはともあれHTMLを作ります。


<dl>
  <dt>項目1</dt>
  <dd>項目1の内容</dd>
  <dt>項目の2個め</dt>
  <dd>項目2の内容</dd>
  <dt>項目3もつけておいたんだってばよ～</dt>
  <dd>項目3の内容</dd>
</dl>

項目名部分がいろんな文字数ですね。

で、CSSの設定


dl {
  display: grid;
  grid-template-columns: minmax(min-content, 23%) auto;
}

grid-template-rows　を書かないことで項目数に縛られなくしました。
知らないだけで、grid のコンテンツ個数に縛られないやり方あるのかな？

※ちなみに、前述のIE NGはここに由来します。
IEのGridLayoutは
grid-template-columns grid-template-rows が必須となります。

そして、ポイントは minmax(min-content, 23%)。
（並び替えをしていないので、）奇数番目のコンテンツ（＝dt）の幅が、

最小: 全該当コンテンツの最小長
最大: コンテナの23%幅

になります。

あとがき

さてさて、いくつかの定義リストには適応させてみましたが、
拡張してく中で、どうなのですかね？不便がでてきたらまた考えましょう。

この仕様を適応させる前は
項目の幅を固定にしたり、リストごとに設定して、
FlexLayoutにして各項目ごとにコンテナを持たせてやってました。

<dl>
  <dt>項目1</dt>
  <dd>項目1の内容</dd>
</dl>
<dl>
  <dt>項目の2個め</dt>
  <dd>項目2の内容</dd>
</dl>
<dl>
  <dt>項目3もつけておいたんだってばよ～</dt>
  <dd>項目3の内容</dd>
</dl>


dl { display: flex; }
dt { width: 10em; }
dd { flex: 1; }

どっちが使いまわしいいかな～？

ということで、
なんか、こんな考え方もいけるのかな？というご参考になれば。

GridLayoutで、DefineListをいい感じに書いてみた

前おき

要件

注意

やり方

あとがき