鬼門：罫線付きテーブル

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

• 名簿データは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での対応なので、読み込みは少々遅くなるようです。