[HTML][CSS] フッタによくある区切り記号をシンプルなHTMLで表示させる

ご存知の方には大したネタではありませんが、フッタなどによく見られるリンクの区切り記号を付けるとき、シンプルに実装できますよ、という話です。

こんなやつです↓

（宮内庁のホームページより）

デザイナーさんにもよりますが、この縦棒「|」が、

• 先頭にも付く
• 先頭には付かない
• 末尾にも付く
• 末尾には付かない

場合があり、さらに

• 折り返しても同じ体裁をとる

のが前提ですので、結構面倒臭いや、どうせこんなところ更新頻度も低いから直書きしたろ〜
という場合も多いのでは？
でも、ちょっとテクニックを知っていればすごく簡単に実装できるのです。

まずは、ルールを決める

当たり前ですが、ルール化してコーディングするわけですので、まずはデザインからルールを決めましょう。

上記の例で言うと、

• リンク要素の右側に縦棒「｜」が付く
• ただし、最初の要素には左側にも縦棒「｜」が付く

が、ルールです。
この場合、

• リンク要素の左側に縦棒「｜」が付く
• ただし、最後の要素には、右側にも縦棒「｜」が付く

という解釈もできますが、これは右端で折り返した場合にどう表示させるかにもよりますので、後述します。

HTML

HTMLの書き方は選択の余地はあまりありません。
いかにシンプルに、美しく書くか。です。

CSS

CSSのポイントは２つです。

• 区切り記号を表示させる
• 先頭or末尾の場合の処理をする

区切り記号を表示させる

区切り記号は、「content」を使って表示させます。
また、上記で決めたルールの、要素の右側（前）に付けるか、左側（後）に付けるかによって、:before、:afterの擬似要素で調整します。

先頭or末尾の場合の処理をする

要素が先頭or末尾だったら付ける、付けないの処理は、:nth-child()や:first-child、:nth-last-of-type()や:nth-last-childなどの擬似要素で指定します。

※ E:nth-last-of-type(n)の場合は、「その種類の要素」の何番目に適用させるか、E:nth-last-child(n)の場合には「要素の種類に関係なく」後ろからn番目のE要素に適用、という違いがありますので、将来的な要素の追加（例えば、liが入れ子になる場合）なども考慮に入れて指定する必要があります。

折り返しも考慮する

折り返した場合にどう表示するかも考えておきたいポイントです。
例えば

リンク | リンク | リンク | リンク | リンク |
リンク | リンク | リンク

このようなデザインであれば、

• リンク要素の右側に縦棒「｜」が付く
• ただし、最後の要素には縦棒「｜」が付かない

というルールであれば、折り返してもそのまま適用されるので問題ありません。
ところが、ありがちなデザインですが、

| リンク | リンク | リンク | リンク | リンク |
| リンク | リンク | リンク |

このような場合は、どの位置で折り返すかの判断ができないので、単純なリストでは管理できなそうです。
この場合は、

• 折り返す位置にクラスを設置して例外的な処理をする
  （例えば、基本左側に「｜」を付けるが、折り返し位置のクラスには右側に「｜」を付ける）
• 2つのul(上下の行)を用意して、それぞれのulにルールを適用させる
  （この場合でも、文言や中の要素数によっては折り返してしまうので、都度調整が必要になる）

といった処理が必要になります。
特にCMSなどで構築する場合には、シンプルなHTMLのほうが構築しやすいというメリットがありますので、あらかじめデザインの作成段階でデザイナーの方にメンテナンス不要なデザインを依頼すると良いかもしれませんね。