ブロックとブロックの間にだけ線を引き、端には線を引かない表示例

複数個のブロックを並べている状況で、ブロックとブロックの間にだけ区切り線を引きたいことがあります。例えば下記のようにです。

上記では、段落と段落の間にだけ破線が引かれています。

ブロックの上や下に線を引くのは（枠線を描く）borderプロパティを使えば簡単ですが、それだと端っこにも余計な線が引かれてしまいます。
ブロックとブロックの間にだけ線を引き、端には線を引かないでおく簡単なCSSの書き方を以下にご紹介致します。

ブロックの下に区切り線を引くが、最終ブロックの後にだけは引かないようにする方法

最後のブロックにだけ特別なclass名を割り振るような面倒なことをしなくても、「最後の要素」だけを対象に装飾できる記述方法を使えば短いCSSで簡単に装飾ができます。この方法だとHTML側に工夫が要らないので、HTML側でブロックの数を変更しても、CSSの修正が要らないメリットがあります。

①HTMLでは単にブロックを並べるだけ（HTMLソース）

まずは、HTMLソースを記述しておきます。説明は特に要らないと思いますが、単にブロックを並べるだけです。ここでは段落を作るp要素を3つ並べておきました。全体はdiv要素で囲んでいます。

<div class="sample1">
   <p>1つ目の段落ですよ。</p>
   <p>2つ目の段落ですよ。</p>
   <p>3つ目の段落ですよ。</p>
</div>

どのp要素が最後なのかを判別するために、全体を何らかの要素で囲んでおく必要があります。上記のようにdiv要素で囲んでおけば良いでしょう。CSS装飾対象にするためにclass名を加えてあります。
次に、これら対してCSSで装飾を追加しましょう。

②CSSでブロックの下にだけ枠線を引く（CSSソース1）

次に、ブロックの下にだけ枠線を引くCSSソースを記述します。対象は、class名「sample1」の内側にあるp要素です。

.sample1 p {
   border-bottom: 1px dashed gray; /* 下端に「灰色1pxの破線」を引く */
   padding-bottom: 1em;            /* コンテンツ下端と枠線までの余白量 */
   margin-bottom: 1em;             /* 下側の枠線より外側の余白量 */
}

これもあまり説明は要らないでしょうが、p要素に対する枠線の下部(border-borrom)に、灰色(gray)で太さ1pxの破線(dashed)を引いています。
ただし、これだけだと「ブロックとブロックの間」だけでなく「最後のブロックの下」にも線が引かれてしまいます。

また、「ブロック(段落)の下端」と「下線」との間に隙間を設けるべく、padding-bottomプロパティに値「1em」を指定して、1行分の余白を設けています。
さらに、「下線」と「次のブロック」との間にも隙間を設けるべく、margin-bottomプロパティの値にも同様に「1em」を指定して、1行分の余白を設けています。

③ただし、最後のブロックだけは装飾対象から外すようCSSを書く（CSSソース2）

最後に、最後のブロックの下には枠線を引かないようにするCSSを加えます。CSSでは、「最後の子要素」を示す :last-child という疑似クラスがありますので、これを使えば簡単です。

.sample1 p:last-child {
   border-bottom: none;
   padding-bottom: 0;
}

先程のCSSソースで、すべてのp要素の下側に灰色1pxの破線を引いているのですから、最後の子要素に限ってその装飾を取り消す装飾を書けば良いのです。
こうすると、最後のブロックの下には線が引かれなくなるので、結果としてブロックとブロックの間にだけ線が引かれることになります。

※下線を引かないのなら、「ブロックの下端」と「下線」との間の余白も不要なので、padding-bottomプロパティの値を「0」にしています。

ブロックの上に区切り線を引くが、先頭ブロックの前にだけは引かないようにする方法

さて、先程は「ブロックの下」に線を引く方法で区切り線を設けましたが、「ブロックの上」に線を引く方法でも構いません。（当たり前ですが）
線を上に引くか下に引くかは、その他の装飾との兼ね合いなどで（楽に書ける方を）選べば良いでしょう。

線を下に引く場合には、「最後の要素」だけを対象に装飾できる記述方法を活用しました。逆に、線を上に引くなら「最初の要素」だけを対象に装飾できる記述方法を使えば済みます。

❶HTMLでは単にブロックを並べるだけ（HTMLソース）

まずは、HTMLソースを記述しておきます。これはclass名を除いて先程のHTMLソースと同じです。段落を作るp要素を3つ並べておき、その全体をdiv要素で囲んでいるだけです。

<div class="sample2">
   <p>1つ目の段落ですよ。</p>
   <p>2つ目の段落ですよ。</p>
   <p>3つ目の段落ですよ。</p>
</div>

どのp要素が先頭なのかを判別するために、全体を何らかの要素で囲んでおく必要があります。上記のようにdiv要素で囲んでおけば良いでしょう。CSS装飾対象にするためにclass名を加えてあります。
次に、これら対してCSSで装飾を追加しましょう。

❷CSSでブロックの上にだけ枠線を引く（CSSソース1）

次に、ブロックの上にだけ枠線を引くCSSソースを記述します。対象は、class名「sample2」の内側にあるp要素です。

.sample2 p {
   border-top: 1px dashed gray; /* 上端に「灰色1pxの破線」を引く */
   padding-top: 1em;            /* コンテンツ上端と枠線までの余白量 */
   margin-top: 1em;             /* 上側の枠線より外側の余白量 */
}

これもあまり説明は要らないでしょうが、p要素に対する枠線の上部(border-top)に、灰色(gray)で太さ1pxの破線(dashed)を引いています。
ただし、これだけだと「ブロックとブロックの間」だけでなく「先頭のブロックの上」にも線が引かれてしまいます。

また、「ブロック(段落)の上端」と「上線」との間に隙間を設けるべく、padding-topプロパティに値「1em」を指定して、1行分の余白を設けています。
さらに、「上線」と「次のブロック」との間にも隙間を設けるべく、margin-topプロパティの値にも同様に「1em」を指定して、1行分の余白を設けています。

❸ただし、先頭のブロックだけは装飾対象から外すようCSSを書く（CSSソース2）

最後に、先頭のブロックの上には枠線を引かないようにするCSSを加えます。CSSでは、「最初の子要素」を示す :first-child という疑似クラスがありますので、これを使えば簡単です。

.sample2 p:first-child {
   border-top: none;
   padding-top: 0;
}

先程のCSSソースで、すべてのp要素の上端に灰色1pxの破線を引いているのですから、先頭の子要素に限ってその装飾を取り消す装飾を書けば良いのです。
こうすると、先頭のブロックの上には線が引かれなくなるので、結果としてブロックとブロックの間にだけ線が引かれることになります。

※上端に線を引かないのなら、「ブロックの上端」と「上線」との間の余白も不要なので、padding-topプロパティの値を「0」にしています。

先頭だけを指す:first-child疑似クラス、末尾だけを指す:last-child疑似クラス

上記でご紹介した2つの方法での表示例を以下に並べておきます。どちらの方法で作成しても、表示結果はまったく同じです。

このように、複数の要素が並んでいる際に「先頭だけ」や「末尾だけ」を対象にして装飾できる :first-child疑似クラス や :last-child疑似クラス を使うと、やたらとHTML側にclass名を割り振らなくてもCSS側だけで柔軟に装飾が作れます。

ぜひ、活用してみて下さい。

(更新日：2020年05月07日)