列数と列幅に自由に対応した汎用型ulリスト表を作るCSSの記述・display:flex
クラスを1つ追加し、1行目をタイトル形表示(太字、中央配置)にしない制御
要約:共通のCSSに列数を変えるCSSを1つ追加するだけで列幅が自由に設定出来ます。
注:1列の表には、対応していません。
☆ 列幅を変えたい → 4.列幅が異なる3列表。
☆ 特定の列を指定 → 5.特定行・特定列の指定。
☆ ul li リストは、Defaultで修飾記号が付くので以下のcssを入れて下さい。
1 |
ul, li {list-style-type:none;} |
1.リスト表のサンプル事例
1)4列のリスト・サンプル
- ひらがな
- カタカナ
- 英・大文字
- 英・小文字
- あいうえお
- アイウエオ
- AIUEO
- aiueo
- かきくけこ
- カキクケコ
- KAKIKUKEKO KAKIKUKEKO
- kakikukeko
1 2 3 4 5 6 7 8 9 10 11 |
<div class="list_flex list_flex_4col"> <!-- 2つ目のcssがポイント --> <ul> <li>ひらがな</li><li>カタカナ</li><li>英・大文字</li><li>英・小文字</li> </ul> <ul> <li>あいうえお</li><li>アイウエオ</li><li>AIUEO</li><li>aiueo</li> </ul> <ul> <li>かきくけこ</li><li>カキクケコ</li><li>KAKIKUKEKO KAKIKUKEKO</li><li>kakikukeko</li> </ul> </div> |
1行目で列全体のボックスに2つのcssを記述するのがポイント。
2つ目の指定で列数を決める。class名の区切りは、半角スペース。
2)3列のリスト・サンプル
- ひらがな
- カタカナ
- 英・大文字
- あいうえお
- アイウエオ
- AIUEO
- かきくけこ
- カキクケコ
- KAKIKUKEKO KAKIKUKEKO
1 2 |
<div class="list_flex list_flex_3col"> <!-- 上記4列の4列目を削除しただけなので省略 --> |
2.上記4列と3列のリスト・サンプルの共通css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.list_flex{ width: 100%;} .list_flex ul{ display: flex; flex-wrap: wrap;} .list_flex li { width: 25%; /* %指定で列を自由に設定可能 */ box-sizing: border-box; padding-left:5px;} .list_flex ul:first-child li { font-weight:bold; text-align:center; padding:0;} .list_flex li:nth-child(n+1) { border-top: 1px solid #000;} .list_flex ul:last-child li { border-bottom: 1px solid #000;} .list_flex li:nth-child(n+1) { border-left: 1px solid #000;} .list_flex li:last-child { border-right: 1px solid #000;} |
5行目 flex-wrap:のプロパティ
nowrap:フレックスアイテムは折り返されず、1行で表示される。
wrap:フレックスアイテムは折り返され、複数行で表示される。
wrap-reverse:フレックスアイテムは折り返され、複数行で表示。但し、wrapとは逆に、下から上に折り返される。
縦罫線について(2017/9/24追記)
Internet Explorerの場合、消えた罫線の左の列のサイズが長いと右罫線が消える現象が出ます。解消するには、17行目の後にz-index:100;を挿入して下さい。
補足:1行目をタイトル行にしたくない場合、3つ目のCSSを入れることで同一サイト内でヘッダー有無がコントロール出来る。その場合、「divボックス」に3つ目のクラスを追加する。class名:no_head
1 |
<div class="list_flex list_flex_3col no_head"> |
CSSの記述:「list_flex」の後に記述ください。
1 2 3 4 |
.no_head ul:first-child li { font-weight:normal; text-align:left; padding:5px;} |
3.列数を決めるcss
1 2 |
.list_flex_4col li{width:25%;} /* 4列にする */ .list_flex_3col li{width:33%;} /* 3列にする */ |
(100)を(作成する列数)で割った値を、%で指定。%数値の和は100以下に
4.列幅が異なる3列表(例:1列目:20%、2列目:30%、3列目:50%)、以下のcssを最後に追加
- ひらがな
- カタカナ
- 英・大文字
- あいうえお
- アイウエオ
- AIUEO
- かきくけこ
- カキクケコ
- KAKIKUKEKO KAKIKUKEKO
1 2 |
<div class="list_flex list_flex_235"> <!-- 以下略、上記3列表と同一です --> |
追加するcss
1 2 3 |
.list_flex_235 li:first-child {width: 20%;} .list_flex_235 li:nth-child(2) {width: 30%;} .list_flex_235 li:last-child {width: 50%;} |
※ このサンプル表での実コーディングでは、レスポンシブル対応させたので、列の%数値をマイナス1づつし3列で97%です。他の表より少し幅が短いです。レスポンシブ対応の場合、97%でもWIndowの幅がパソコンとタブレットの切れ目(メディアクエリー)781から806の幅だと右端が切れました。
5.特定行・特定列の指定(例示:2行目の3列目)
- ひらがな
- カタカナ
- 英・大文字
- 英・小文字
- あいうえお
- アイウエオ
- AIUEO
- aiueo
- かきくけこ
- カキクケコ
- KAKIKUKEKO KAKIKUKEKO
- kakikukeko
列を特定するためのclassを1つ追加(例:line_2_col_3
1 |
<div class="list_flex list_flex_4col line_2_col_3"> |
特定する列のcss(line_2_col_3)
1 2 3 4 |
.line_2_col_3 ul:nth-child(2) li:nth-child(3){ background-color: #f00; color:#fff; } |
補足
1)共通css7行目 width:25%; はそのままでOK、列数記述のcssを共通cssの最後に入れることで有効になります。
2)ブラウザの古いバージョンへ対応したい場合
以下のCSSを共通cssの4行目以降に記述下さい。
1 2 3 4 |
display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; |
3)同一のサイトやページ内で列幅や列数の異なる表を幾つも利用したい
(1)2.の共通CSSを「style.css」に記述する、7行目の25%はそのままでOKです。
(2)作成する表のHTML文の1行目(div)に2つ目のclass名を入れる
その場合のcssの内容を追記する位置として3つあります。
① style.css に追記 列幅と列数が違う場合は異なったclass名に。必ず、共通CSSの後に。
② 挿入するページの編集画面・カスタムフィールドより追記する
③ プラグインの利用(例: Custom CSS and JS や Zia3-JS-CSS)
レスポンシブ・サイトの場合は、%数値の和が97%程度に、100%だとサイトの設計幅より小さいWindowで見た時、右端の罫線が切れる。
1行目を見出しにしたくない場合は、この3行を削除、又は下記の補足を参照。