*

ウェッブ制作

Width =px

ホーム > UL・OL・DLリストとテーブル・メニュー概要 >
ulリスト表・汎用型 MENU 

列数と列幅に自由に対応した汎用型ulリスト表を作るCSSの記述・display:flex

要約:共通のCSSに列数を変えるCSSを1つ追加するだけで列幅が自由に設定出来ます。

注:1列の表には、対応していません。

☆ 列幅を変えたい → 4.列幅が異なる3列表。

☆ 特定の列を指定 → 5.特定行・特定列の指定。

☆ ul li リストは、Defaultで修飾記号が付くので以下のcssを入れて下さい。

1.リスト表のサンプル事例

1)4列のリスト・サンプル

  • ひらがな
  • カタカナ
  • 英・大文字
  • 英・小文字
  • あいうえお
  • アイウエオ
  • AIUEO
  • aiueo
  • かきくけこ
  • カキクケコ
  • KAKIKUKEKO KAKIKUKEKO
  • kakikukeko

1行目で列全体のボックスに2つのcssを記述するのがポイント。
2つ目の指定で列数を決める。class名の区切りは、半角スペース。

2)3列のリスト・サンプル

  • ひらがな
  • カタカナ
  • 英・大文字
  • あいうえお
  • アイウエオ
  • AIUEO
  • かきくけこ
  • カキクケコ
  • KAKIKUKEKO KAKIKUKEKO

2.上記4列と3列のリスト・サンプルの共通css

  • 行番
  • 説 明
  • 1-2
  • ul li形式のリスト全体をclass名:list_flexのボックスとし、幅を100%に。但し、ページデザインによって100%では、表がはみ出すので適宜変更して下さい。97%前後が良いかと。
  • 3-5
  • 行(ul)に、display:flex;、flex-wrap: wrap;でテキストの折り返しが可能で複数行で表示される。
  • 6-7
  • 列(li)幅の指定。全幅100%の場合25%は4列、20%は5列、33%は3列のように
    レスポンシブ・サイトの場合は、%数値の和が97%程度に、100%だとサイトの設計幅より小さいWindowで見た時、右端の罫線が切れる。
  • 8
  • box-sizing・ボックスサイズの算出方法を指定。 border-box・パディングとボーダーを幅と高さに含める、content-box・パディングとボーダーを幅と高さに含めない(初期値)。
  • 10-12
  • 1行目を列見出しとして、フォントウェイトをボールド、テキストを中央寄せ。
    1行目を見出しにしたくない場合は、この3行を削除下さい。
  • 13-14
  • 最初の列から最後の列まで上部罫線を引く
  • 15-16
  • 最終行の各列に下部罫線を引く
  • 17-18
  • 最初の列から最後の列まで左罫線を引く
  • 19-20
  • 最終行の各列に右罫線を引く

5行目 flex-wrap:のプロパティ

nowrap:フレックスアイテムは折り返されず、1行で表示される。

wrap:フレックスアイテムは折り返され、複数行で表示される。

wrap-reverse:フレックスアイテムは折り返され、複数行で表示。但し、wrapとは逆に、下から上に折り返される。

縦罫線について(2017/9/24追記)

Internet Explorerの場合、消えた罫線の左の列のサイズが長いと右罫線が消える現象が出ます。解消するには、17行目の後にz-index:100;を挿入して下さい。


3.列数を決めるcss

(100)を(作成する列数)で割った値を、%で指定。%数値の和は100以下に


4.列幅が異なる3列表(例:1列目:20%、2列目:30%、3列目:50%)、以下のcssを最後に追加

  • ひらがな
  • カタカナ
  • 英・大文字
  • あいうえお
  • アイウエオ
  • AIUEO
  • かきくけこ
  • カキクケコ
  • KAKIKUKEKO KAKIKUKEKO

追加するcss

※ このサンプル表での実コーディングでは、レスポンシブル対応させたので、列の%数値をマイナス1づつし3列で97%です。他の表より少し幅が短いです。レスポンシブ対応の場合、97%でもWIndowの幅がパソコンとタブレットの切れ目(メディアクエリー)781から806の幅だと右端が切れました。


5.特定行・特定列の指定(例示:2行目の3列目)

  • ひらがな
  • カタカナ
  • 英・大文字
  • 英・小文字
  • あいうえお
  • アイウエオ
  • AIUEO
  • aiueo
  • かきくけこ
  • カキクケコ
  • KAKIKUKEKO KAKIKUKEKO
  • kakikukeko

列を特定するためのclassを1つ追加(例:line_2_col_3

特定する列のcss(line_2_col_3)


補足

1)共通css7行目 width:25%; はそのままでOK、列数記述のcssを共通cssの最後に入れることで有効になります。

2)ブラウザの古いバージョンへ対応したい場合

以下のCSSを共通cssの4行目以降に記述下さい。

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)