疑似クラスを使って縦横のリスト表作成の事例
擬似クラス 3行1列の表
- あいうえお
- かきくけこ
- さしすせそ
リスト表示の先頭と最後に適用するスタイルシート。
先頭が「firstChild」で最後が「lastChild」の指定により、右表のような簡単にリストが作成出来る。 先頭の bottom solid をdottedに
最後の top soid をdottedにするCSS。
n番目の表示を変えるCSS nth-child(n) (例)2行目の文字色を変える
先頭が「firstChild」で最後が「lastChild」の指定により、右表のような簡単にリストが作成出来る。 先頭の bottom solid をdottedに
最後の top soid をdottedにするCSS。
n番目の表示を変えるCSS nth-child(n) (例)2行目の文字色を変える
1 2 3 4 5 |
<ul class="list"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> </ul> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.list {list-style-type:none;} .list li { border:solid 3px #999; border-top-style:none; border-bottom-style:dotted; width:100px; height:25px; padding-top:5px; padding-left:5px; } .list li:first-child{ border-top-style:solid; } .list li:last-child{ border-bottom-style:solid; } .list li:nth-child(2) { color:#ff0000;} |
擬似クラス4行4列の表
tableタグを使えば簡単に表が作成出来る。一方、tableタグではスマホ表示などレスポンシブウェブとしては、デザインが崩れる場合がある。そこでtableを使わず列を横並びにするため、divやul liタグでdisplay:inline-block;とすることで横並びが出来る。
- お品書き
- 松
- 竹
- 梅
- にぎり寿司
- 2,500円
- 1,800円
- 1,500円
- ちらし寿司
- 2,000円
- 1,500円
- 1,000円
- お好み寿司
- 3,000円
- 2,500円
- 2,000円
HTMLの記述
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="hikaku_box"> <ul class="hikaku"> <li>お品書き</li><li>松</li><li>竹</li><li>梅</li> </ul> <ul class="hikaku"> <li>にぎり寿司</li><li>2,500円</li><li>1,800円</li><li>1,500円</li> </ul> <ul class="hikaku"> <li>ちらし寿司</li><li>2,000円</li><li>1,500円</li><li>1,000円</li> </ul> <ul class="hikaku"> <li>お好み寿司</li><li>3,000円</li><li>2,500円</li><li>2,000円</li> </ul> </div> |
注) リストの ul li で横並びにする場合、見易くするため、列の<li></li>と <li></li> との間で改行をいれると、後ろに数ピクセルの微妙な空白が出来る。上記の様に改行しないこと。
CSSの記述
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
#hikaku_box {width:100%;} #hikaku_box ul { border-top:solid 1px #000; border-left:solid 1px #000; border-right:solid 1px #000;} #hikaku_box ul:first-child {background-color:yellow; } #hikaku_box ul:last-child { border-bottom:solid 1px #000; } .hikaku li {display:inline-block; border-left:solid 1px #000; text-align:center;} .hikaku li:first-child {width:33%; border-left:none;} .hikaku li:nth-child(2) {width:22%;} .hikaku li:nth-child(3) {width:22%;} .hikaku li:last-child {width:22%;} |
注1) 2行目3行目で各々nth-child(n)で記述しているが、行が多い場合は、範囲を指定する記述方法がある。→参考サイト
注2)スマホ対応を考慮し、列幅は各々パーセント指定している。パーセントの合計を100%にすると罫線によって幅をはみ出して表が崩れるので、上記の表では罫線分5Pixel考慮し、パーセントの合計を99%にしている。
擬似クラス nth-child()
比較的よく利用されそうなnth-child()を以下に記述
例1.2番目から最後までの指定
- A
- B
- C
- D
- E
- F
- G
- H
html
1 2 3 |
<ul class="nth_1"> <li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li><li>H</li> </ul> |
css
1 |
.nth_1 li:nth-child(n+2){background-color:yellow;} |
例2.1番目から5番目までの指定
- A
- B
- C
- D
- E
- F
- G
- H
html
1 2 3 |
<ul class="nth_2"> <li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li><li>H</li> </ul> |
css
1 |
.nth_2 li:nth-child(-n+5){background-color:yellow;} |
例3.4番目から7番目までの指定
- A
- B
- C
- D
- E
- F
- G
- H
html
1 2 3 |
<ul class="nth_3"> <li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li><li>H</li> </ul> |
css
1 |
.nth_3 li:nth-child(n+4):nth-child(-n+7){background-color:yellow;} |