箇条書き、テーブルやリストなどに行の間隔を指定して、背景色を入れることで見やすくなります。
2行間隔に背景色* Pタグ
1
2
3
4
5
6
7
8
9
1 2 3 4 5 |
<!-- HTML --> <div class="p_interval_2"> <p>1</p> <!-- 以下、略 --> </div> |
1 2 3 |
/* CSS */ .p_interval_2 p:nth-of-type(2n+2){ background-color:#cce8b5;} |
3行間隔で2番目と3番目に背景色* Pタグ
1
2
3
4
5
6
7
8
9
1 2 3 4 5 |
<!-- HTML --> <div class="p_interval_3"> <p>1</p> <!-- 以下、略 --> </div> |
1 2 3 4 5 |
/* CSS */ .p_interval_3 p:nth-of-type(3n+2){ background-color:#fff995;} .p_interval_3 p:nth-of-type(3n+3){ background-color:#cce8b5;} |
3行間隔で2番目と3番目に背景色*テーブル・タグ
1. | ||||
2. | ||||
3. | ||||
4. | ||||
5. | ||||
6. | ||||
7. | ||||
8. | ||||
9. |
1 2 3 4 5 |
<!-- HTML --> <table class="table_list t_interval_2 t_interval_3"> <tr><td>1.</td><td> </td><td> </td><td> </td><td> </td></tr> <!-- 以下、略 --> </table> |
1 2 3 4 5 6 7 8 9 |
/* CSS 背景色の設定 */ .t_interval_2 tr:nth-of-type(3n+2){ background-color:#fff995;} .t_interval_3 tr:nth-of-type(3n+3){ background-color:#cce8b5;} /* CSS テーブルの表組*/ .table_list { border-collapse: collapse; /* セル結合 */ table-layout:fixed;} /* 列幅固定 */ |
3行間隔で2番目と3番目に背景色*UL・タグ
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
1.リストの空欄には、全角スペースを挿入しています。
2.CSSの7行目以降は、全て罫線の設定です。
上記のように表示するには、下記CSSを追加ください。
1 |
ul, li {list-style-type:none;} |
3.列数や列幅を自由に作成する便利技
1 2 3 4 5 |
<!-- HTML --> <div class="ul_list u_interval_2 u_interval_3"> <ul><li>1.</li><li> </li><li> </li><li> </li><li> </li></ul> <!-- 以下、略 --> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* CSS 背景色の設定 */ .u_interval_2 ul:nth-of-type(3n+2) li{ background-color:#fff995;} .u_interval_3 ul:nth-of-type(3n+3) li{ background-color:#cce8b5;} /* CSS ULリストの表組 */ .ul_list ul{display: flex; flex-wrap: wrap;} .ul_list li:nth-child(n+1) { border-top: 1px solid #000;} .ul_list ul:last-child li { border-bottom: 1px solid #000;} .ul_list li:nth-child(n+1) { border-left: 1px solid #000;} .ul_list li:last-child { border-right: 1px solid #000;} |