箇条書きを表形式で表示
やりたいこと
olやulを使った箇条書きを表形式で表示するスタイルシートを考える．具体的には，以下の箇条書きを3×3の表形式にする．
この箇条書きを
- 項目1
- 項目2
- 項目3
- 項目4
- 項目5
- 項目6
- 項目7
- 項目8
- 項目9
こんな表形式にする．
- 項目1
- 項目2
- 項目3
- 項目4
- 項目5
- 項目6
- 項目7
- 項目8
- 項目9
箇条書きのhtmlは以下の通り．
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
<li>項目5</li>
<li>項目6</li>
<li>項目7</li>
<li>項目8</li>
<li>項目9</li>
</ol>
方針
親要素のolと子要素のliの幅をうまく指定して，3項目毎に折返し表示ができれば，表形式に見えるのではないだろうか．ブロック要素の中での折返しにはフレックスボックス（display: flex;）かインラインブロック（display:inline-block;）を使おう．
フレックスボックス
まず，display: flexを使ってみる．
- 親要素である
olにdisplay: flex;とflex-wrap: wrap;を指定 - 子要素の
liの幅は3.5em - 親要素
olの幅は10.5em（3.5em*3要素） - 奇数行の背景色は
nth-childで指定
<html>
<head>
<style>
ol{
display: flex;
flex-wrap: wrap;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 10.5em; /* 3.5em*3要素 */
}
li{
list-style-type: none;
width: 3.5em;
padding: 1px 0 1px 0; /* 上下に詰まった感じがするので1px空ける */
}
li:nth-child(n+1):nth-child(-n+3), /* 1番目から3番目までと */
li:nth-child(n+7){ /* 7番目以降は背景色を付ける */
background: #dcdcdc;
}
</style>
</head>
<body>
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
<li>項目5</li>
<li>項目6</li>
<li>項目7</li>
<li>項目8</li>
<li>項目9</li>
</ol>
</body>
</html>
このように表示する．
- 項目1
- 項目2
- 項目3
- 項目4
- 項目5
- 項目6
- 項目7
- 項目8
- 項目9
インラインブロック
次に，display: inline-box;を使ってみる．display: inlineではwidthが指定できないのでinline-boxを使う．
liにdisplay: inline-block;を指定- 子要素の
liの幅は3.5em - 親要素
olの幅は10.5em（3.5em*3要素） - ブロック要素の間に空白が発生するので，
ol要素にletter-spacing: -0.4em;を指定 - 奇数行の背景色は
nth-childで指定
<html>
<head>
<style>
ol{
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 10.5em; /* 3.5em*3要素 */
letter-spacing: -0.4em; /* ブロック要素の間の空白をなくす */
}
li{
display: inline-block; /* display: inline; は width 指定不可 */
list-style-type: none;
width: 3.5em;
padding: 1px 0 1px 0; /* 上下に詰まった感じがするので1px空ける */
letter-spacing: normal; /* -0.4emを解除 */
}
li:nth-child(n+1):nth-child(-n+3),
li:nth-child(n+7){
background: #dcdcdc;
}
</style>
</head>
<body>
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
<li>項目5</li>
<li>項目6</li>
<li>項目7</li>
<li>項目8</li>
<li>項目9</li>
</ol>
</body>
</html>
このような表示になる．
- 項目1
- 項目2
- 項目3
- 項目4
- 項目5
- 項目6
- 項目7
- 項目8
- 項目9
表形式なら
ちなみに，tableタグを使う場合は以下の通り．
<html>
<head>
<style>
table{
border-collapse: collapse;
border: none;
}
tr{
border: none;
}
td{
width:3.5em;
border: none;
}
tr:nth-child(2n+1){
background:#dcdcdc;
}
</style>
</head>
<body>
<table>
<tr>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
</tr>
<tr>
<td>項目4</td>
<td>項目5</td>
<td>項目6</td>
</tr>
<tr>
<td>項目7</td>
<td>項目8</td>
<td>項目9</td>
</tr>
</table>
</body>
</html>
このような表示になる．
| 項目1 | 項目2 | 項目3 |
| 項目4 | 項目5 | 項目6 |
| 項目7 | 項目8 | 項目9 |
実行環境
- xalan-j 2.7.2
- openJDK 1.8.0_121
- FreeBSD 11.0