リスト要素分割

HTML と compact 属性

HTML では、ol や ul 、dl でリストを表す。このとき、リストは縦１列に並ぶので、横に長い画面では空白が多くできる。 この空白がもったいない、横並びができればいいのに、もちろん折り返しの列数を決めておきたい、このように思う人は多い。 私もその一人である。

昔はこれらリストに compact という属性があり、コンパクトな表示になるようにブラウザで調整するものだった。 しかしこの compact 属性は非推奨とされ、事実ほとんどのブラウザでは compact 属性は無視されていた。

jQuery と easyListSplitter

その後、jQuery とプラグインを組み合わせてリストを分割表示できる手法が開発された。 あらかじめ横の列を指定すれば、縦に複数列のリストが実現できる。 このようなプラグインのなかでは easyListSplitter が知られている。 次は easyListSplitter を用いて表示した複数列リストである。まずは ul を使った例を表示する。

将棋の駒の種類

次に ol を使った例を表示しようとしたが、うまくいかない。研究中である。

この方法の問題は、jQuery と easyListSplitter の双方に依存することだ。 事実、このような複数列リストは、jQuery の 3.3.1 では動作しない。上記表示は jQuery の 2.2.4 を使った結果だ。

CSS の利用 ― とにかく横に並べる

最近は、Cascading Style Sheet (以下、CSS) を使う方法が主流である。以下、いくつか例を述べる。 まず、とにかく横に並べるだけ並べる場合を述べる。これには、CSS のクラスに inline-block 属性を指定すればよい。

将棋の駒の種類

• 王将
• 飛車
• 角行
• 金将
• 銀将
• 桂馬
• 香車
• 歩兵

html

<ul class="nav">
	<li>王将</li>	<li>飛車</li>	<li>角行</li>	<li>金将</li>	<li>銀将</li>	<li>桂馬</li>	<li>香車</li>	<li>歩兵</li>
</ul>

css

	ul.nav li{  display: inline-block}

この場合、display: inline-block を適用したことにより、リストのマーク・は消えてしまう。横並びにするときはメニューやナビゲーションで使うことがほとんどだから、 問題ないだろう。

CSS の利用 ― 折り返す

一方で、決まった列数や決まった幅で折り返しをするなら、別の方法を使わなければならない。ここでは省略する。

参考

• jQuery の使い方（www.yamamo10.jp）

まりんきょ学問所 ＞ コンピュータの部屋 ＞ jQuery 手習い ＞ リスト要素分割