ぽちろぐ

繰り返しデータで表組みを作れるCSS、display:flexが便利だけどIEに対応していない件。

鬼門:罫線付きテーブル

例えば名簿のように一覧ページと個別ページを表形式で表示したい時、どうしますか?

  • 名簿データはCSV形式で保存されています。内容はふりがな・氏名・会社等です。まあ、ここでは個人情報保護とかは考えないでください。あくまで例ですから。データ数は1000件ぐらいだとします。
  • WordPressの「ツール」「インポート」「CSV」でCSVデータを一気に読み込み、個人ごとのページを作成します。ここまではかんたんです。
  • ふりがなはカスタムフィールド「furigana」として読み込むことにします。
  • 一覧ページにはふりがなと氏名をふりがな順に掲載し、個人ページへのリンクを張ります。
  • 1つめの方法は、CSVデータを使ってHTML編集します。リンクは、手作業ですね。
  • 2つめの方法はpage-meibo.phpというテンプレートを作ります。<dl>〜</dl>をループさせれば良いわけですね。

データ数が数百以上、しかも以後の追加・削除があることを考えると2の方法しかありえません!

page-meibo.phpのようにpage-●●.phpというのは、「●●」というslugのページに自動的に適用されるテンプレートです。category-●●.phpも使えます。

<div class=”memberlist-float clearfix”><!–//clearfixはフロート対策です。//–>
<?php
$args = array(
‘category_name’ => ‘meibo’, //meiboというカテゴリーのデータを集めます。
‘posts_per_page’ => 1000, //最大数1000に設定しています。
‘orderby’ => ‘meta_value’,’meta_key’ => ‘furigana’,order => ‘ASC’); //furiganaをキーに並べ替えをしています。
$my_query = new wp_query( $args ); //上記条件で新しいクエリーを作っています。
while ( $my_query->have_posts() ) : $my_query->the_post(); //ループを作りました。
?>
<dl>
<dt><?php echo get_post_meta($post->ID , ‘furigana’ ,true); ?></dt><!–//カスタムフィールドfuriganaを呼び出しています。//–>
<dd><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></dd><!–//氏名をリンク付きで呼び出しています。//–>
</dl>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>

これを並べるにはdlをブロック要素にしてフロートさせれば良いわけですね、かんたんです!style.cssに以下を追加します。

.memberlist-float dl {
display : block;
width : 150px;
float : left;
}


いしげこういち
石毛幸一
いまがわまさお
今川正夫
いわきまさみ
岩鬼正美
うんりゅうだいごろう
雲竜大五郎
かみしもさゆうた
上下左右太
きたみつお
北満男
きょうすかずなお
香車一直
さとなかかよ
里中加代
さとなかさとし
里中智
さわだきょうた
沢田京太
しらぬいまもる
不知火守
たかしろともあき
高代智秋
たこたたこ
蛸田蛸
たにつごろう
谷津吾朗
どいがきしょう
土井垣将
とくがわいえやす
徳川家康
とのまかずと
殿馬一人
どもんごうすけ
土門剛介
なぎさけいいち
渚圭一
ほほえみさんたろう
微笑三太郎
やまおかてつじ
山岡鉄司
やまださちこ
山田サチ子
やまだたろう
山田太郎

さて、これに罫線を追加します。

.memberlist-floatline dl {
display : block;
width : 119px;
float : left;
border : 1px solid #666;
border-collpase : collpase;
}


いしげこういち
石毛幸一
いまがわまさお
今川正夫
いわきまさみ
岩鬼正美
うんりゅうだいごろう
雲竜大五郎
かみしもさゆうた
上下左右太
きたみつお
北満男
きょうすかずなお
香車一直
さとなかかよ
里中加代
さとなかさとし
里中智
さわだきょうた
沢田京太
しらぬいまもる
不知火守
たかしろともあき
高代智秋
たこたたこ
蛸田蛸
たにつごろう
谷津吾朗
どいがきしょう
土井垣将
とくがわいえやす
徳川家康
とのまかずと
殿馬一人
どもんごうすけ
土門剛介
なぎさけいいち
渚圭一
ほほえみさんたろう
微笑三太郎
やまおかてつじ
山岡鉄司
やまださちこ
山田サチ子
やまだたろう
山田太郎

罫線付きボックスにborder-collpase : collpaseは利きませんね。さらになるべく詰め込もうとwidth119pxにしたらガタガタになってしまいました!

floatでは隣のボックスの「高さ」を揃えてくれません!

こんな時に使えるのがdisplay : flexです。

display : flex

どうもまだ確定していないプロパティのようですが、SafariやChrome、edgeではちゃんと動いてくれます。

.memberlist {
display : flex; //<dl>を囲む要素にflexを指定します。
-js-display: flex; //後述
flex-wrap : wrap; //ボックス左端で折り返します。
margin : 0;
padding : 0;
border-left : 1px solid #999; //外側のボックスの左・上に罫線を引いておきます。
border-top : 1px solid #999;
}

.memberlist dl {
width : 120px;
border-bottom : 1px solid #999; //dl要素は下・右の罫線を付けます。
border-right : 1px solid #999;
padding : 10px;
margin : 0;
}
.memberlist dl:nth-child(5n) {
width : 119px; //外側要素につけた罫線の幅だけ、折り返す位置のボックスサイズを小さくします。
}


いしげこういち
石毛幸一
いまがわまさお
今川正夫
いわきまさみ
岩鬼正美
うんりゅうだいごろう
雲竜大五郎
かみしもさゆうた
上下左右太
きたみつお
北満男
きょうすかずなお
香車一直
さとなかかよ
里中加代
さとなかさとし
里中智
さわだきょうた
沢田京太
しらぬいまもる
不知火守
たかしろともあき
高代智秋
たこたたこ
蛸田蛸
たにつごろう
谷津吾朗
どいがきしょう
土井垣将
とくがわいえやす
徳川家康
とのまかずと
殿馬一人
どもんごうすけ
土門剛介
なぎさけいいち
渚圭一
ほほえみさんたろう
微笑三太郎
やまおかてつじ
山岡鉄司
やまださちこ
山田サチ子
やまだたろう
山田太郎

IEに対応させたい

display : flexはWindows10のedgeは対応していますが、IEは全滅のようです。

しかし探せばなんでもあるものですね。

https://github.com/10up/flexibility/blob/master/dist/flexibility.js

IEでdisplay : flexが使えるようになります。少々設定が必要です。

  • まず、header.phpでflexibility.jsを読み込みます。
    <script src=”<?php bloginfo(‘template_directory’); ?>/js/flexibility.js”></script>
  • display : flex;を指定した要素に以下を付け加えます。
    -js-display: flex;

古いIEの透明PNG対応等と同じようにjsでの対応なので、読み込みは少々遅くなるようです。

この記事は2016/04/25に公開され、18 views読まれました。

コメントする

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Jpeg画像を添付できます。

繰り返しデータで表組みを作れるCSS、display:flexが便利だけどIEに対応していない件。 - ぽちろぐ EOS R6II・R10・GR III・α7IIIの実体験お散歩カメラブログ。

Copyright©ぽちろぐ, All Rights Reserved.