先日、とある案件でこのようなメニューを組むことがありました。

これが意外に苦戦をしましたので、その解決法を残しておこうと思います。

はじめにやったこと

まず、2カラムのメニューを作るためのcssを記述しました。

ul{
  display: flex;
  flex-wrap: wrap;
}
li{
  width: 50%;
  border-bottom: 1px solid #999;
}
li:nth-last-child(-n+2){
 border-bottom: 0;
}
a{
  display: block;
  padding: 8px 10px;
}

これでメニューの形ができます。

最後から2番目までの要素の下ボーダーを消すために：nth-last-child(-n+2)という風にしています。

demo

しかしこれだと2つ目のメニューで不具合があります。下から2段目の右側の要素の下ボーダーがありません。

最後から2番目までの下ボーダーを消すという処理をしたため、要素の数が奇数の場合、下から2段目の右側の要素も下ボーダーが消えてしまうのです。

解決するためにやったこと

なんとかして要素の数が偶数の時と奇数の時でスタイルを分けれないかと思っていた時、以前、複数のnth-child系の擬似要素を組み合わせて要素の個数によってスタイルを変えることのできる書き方を聞いたことを思い出しました。

ということでこのように書き換えました。

ul{
 　display: flex;
 　flex-wrap: wrap;
}
li{
 　width: 50%;
　　border-bottom: 1px solid #999;
}
li:nth-child(odd):last-child,
li:nth-child(odd):nth-last-child(2),
li:nth-child(even):last-child{
　　border-bottom: 0;
}
a{
 　display: block;
 　padding: 8px 10px;
}

するとすべての要素に下ボーダーが表示されます。

demo

どういうことをしているかというと、

• :nth-child(odd):last-child・・・奇数番目かつ最後の要素（カテゴリー2のリスト5）
• :nth-child(odd):nth-last-child(2)・・・奇数番目かつ最後から2番目の要素（カテゴリー1のリスト7）
• :nth-child(even):last-child・・・偶数番目かつ最後の要素（カテゴリー1のリスト8）

をそれぞれ指定しています。

こうすることで最初のdemoで下ボーダーのなかったカテゴリー2のリスト4の位置に当たるような要素には影響しないようにスタイルを付けることができるようになります。

まとめ

nth-child系の擬似要素は最初の要素や最後の要素を指定するのに使うことが多いかと思いますが、組み合わせることで条件の絞り込みのような使い方ができます。
これ以外でも使えるやり方があるかと思いますので、いろいろ試してみるとおもしろそうだと思います。

CSSでどうにかできるということを知らないと、こういったスタイルは要素ごとにクラスをつけることで対処することになると思いますが、そうするとその度にクラス名をつけたり、更新時にクラスを付け外ししたりしないといけなかったりして効率が悪くなります。
そもそもCMSだとクラスをつけることもできないですしね。

不要なクラスをつけることで発生する可読性や更新性の悪いマークアップを避けるためにもこういったテクニックを活用していくのがよいと思います。

WordPressのコンタクトフォームプラグイン「MW WP Form」で年数のセレクトボックスの選択肢に現在の年数まで入れるようにカスタマイズしたので、やったことをメモとして残しておこうと思います。

きっかけ

お問い合わせフォームなどでたまに見かける年数のセレクトボックス。生年月日がいい例でしょうか。
年数のセレクトボックスって数が多いし、要件によっては毎年増やさないといけなかったりするので、大変だなと常々思っていました。

この間、案件でたまたま実装する機会があったので、フィルターフックって実はやったことなくて試してみたかったし、ちょうどいいからやってしまおうとなったわけです。

やったこと

やったこととしてはMW WP Formのフックを使って、セレクトボックスの選択肢に年数をループで設定するだけです。

まず、管理画面でフォームを作成します。

[mwform_select name="year"]年

フォームを作成したら、functions.phpで選択肢を設定します。
MW WP Formには「 mwform_choices_mw-wp-form-xxx 」というフィルターフックが用意されていて、これで選択肢を設定できます。

function add_years($years,$atts) {
  if ( $atts['name'] == 'year' ) { // 選択肢を入れるname属性
    $start_year = 1900;
    $end_year = date("Y");
    foreach (range($start_year, $end_year) as $year) {
      $years[$year] = $year;
    }
  }
  return $years;
}
// xxxにはフォームのIDが入ります。
add_filter( 'mwform_choices_mw-wp-form-xxx', 'add_years', 10, 2 );

最初の年数から現在の年数までを$yearsという配列に格納して、一覧にしています。
これでセレクトボックスの中に1900年から2018年までが格納されているはずです。

追加でやったこと

さらに内容によっては真ん中あたりの値から始めたい場合もあるかと思いますので、初期値も設定します。
初期値を設定するのは「mwform_value_mw-wp-form-xxx」 というフィルターフック を使います。

function my_mwform_value( $value, $name ) {
  if ( $name === 'year' ) { // 設定したいname属性
    $value = 1988; //初期値に設定したい年数を入れる。
    return $value;
  }
  return $value;
}
// xxxにはフォームのIDが入ります。
add_filter( 'mwform_value_mw-wp-form-xxx', 'my_mwform_value', 10, 2 );

これで初期値が指定した年数になっているはずです。

デモページはこちら

まとめ

フィルターフックの解説はプラグイン制作者さんの公式サイトに詳しく書かれていたので、対応としてはそれほど難しくなかったのですが、phpに不慣れなこともあり、思うように値をとれるようになるまでが大変でした。

調べている中でいろいろなフィルターフックの活用方法が出てきたので、他の案件でお問い合わせフォームの仕様を詰めるときに参考にできるかなと思いました。
また、プライベートでもいろいろ試してみようと思います。

参考：
https://2inc.org/blog/2013/10/13/3743/
https://2inc.org/blog/2013/11/07/3832/