*

ウェッブ制作・パソコン

Width =px

ホーム > HTML・CSS > CSS基本と応用 >
疑似クラスとリスト表 MENU 

疑似クラスを使って縦横のリスト表作成の事例

擬似クラス 3行1列の表

  • あいうえお
  • かきくけこ
  • さしすせそ
リスト表示の先頭と最後に適用するスタイルシート。
先頭が「firstChild」で最後が「lastChild」の指定により、右表のような簡単にリストが作成出来る。 先頭の bottom solid をdottedに
最後の top soid をdottedにするCSS。
n番目の表示を変えるCSS nth-child(n) (例)2行目の文字色を変える

擬似クラス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の記述

注) リストの ul li で横並びにする場合、見易くするため、列の<li></li>と <li></li> との間で改行をいれると、後ろに数ピクセルの微妙な空白が出来る。上記の様に改行しないこと。


CSSの記述

注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

css


例2.1番目から5番目までの指定

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H

html

css


例3.4番目から7番目までの指定

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H

html

css