CSSで区切り線を実装するのは、flexboxが簡単で便利！レスポンシブ対応の区切り線を実装するテクニック

サイト構築 -CSS

Post on:2022年3月8日

はじめに

UIをデザインしているときに、セクション間に区切りを加えたことはありますか？

セクション間の区切り

幅が小さいビューポートのスマホでは、この区切りは水平になります。

スマホでは、水平になる

このUIの構造をHTMLで見てみましょう。

<section class="section">
    <div class="section__item section__item--start">
        <!-- Content -->
    </div>
  
    <div class="section__item section__item--end">
        <!-- Content -->
    </div>
</section>

</div>

</div>

</section>

sectionで内包し、2つの子アイテムがあります。この子アイテム間に、区切り用のラインを配置します。

CSSは、flexboxで実装します。

.section {
    display: flex;
    gap: 1rem;
    max-width: 700px;
    margin: 2rem auto;
}

.section__item {
    flex: 1;
}

.section {

display: flex;

gap: 1rem;

max-width: 700px;

margin: 2rem auto;

}

.section__item {

flex: 1;

}

子アイテム間に1remのギャップを与え、また2つの子アイテムは親の50％を占めるようにしました。この結果は、下記のようになりました。

2つの子アイテムを親の50％に、ギャップは1rem

次に、2つの子アイテムを縦方向の中央揃えにしたいので、親にalign-itemsを定義します。

.section {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* other styles */
}

.section__item {
    flex: 1;
}

.section {

display: flex;

align-items: center;

gap: 1rem;

/* other styles */

}

.section__item {

flex: 1;

}

align-items: center;を追加したので、2つの子アイテムは中央に配置されました（わかりやすくするために赤線を追加）。align-itemsが区切り線と何の関係があるのか、と思われるかもしれません。大丈夫です、続けましょう。

2つの子アイテムを縦方向の中央揃えに

区切り線の実装

区切り線は擬似要素として実装したかったので、下記のCSSを記述しました。

.section:before {
    content: "";
    border: 1px solid #d3d3d3;
}

.section:before {

content: "";

border: 1px solid #d3d3d3;

}

このCSSでどのように表示されると思いますか？

小さい四角？？？

ん？この小さい四角は何？
疑似要素はすべての辺から1pxのボーダーしかないため、その結果は2*2の正方形になります。

ここに少し注目してみましょう、このCSSの小技の核心です。

正方形は、四辺のボーダーに同じカラーを使用することで生まれます。色が変えると、下記のようになります。

小さい四角ができる仕組み

なぜ区切り線が小さい四角になるのか

align-items: center;を追加して子アイテムを縦方向の中央揃えにしたため、flexboxが子アイテムを伸縮するデフォルトの動作（この場合、縦方向に伸ばす）がなくなりました。

伸縮するデフォルトの動作をリセットするために、擬似要素のalign-selfをstretchにする必要があります。

.section:before {
    content: "";
    border: 1px solid #d3d3d3;
    align-self: stretch;
}

.section:before {

content: "";

border: 1px solid #d3d3d3;

align-self: stretch;

}

これで下記のように表示されます。

縦方向に伸ばされる

次に、flexアイテムの間に区切り線が表示されるように、並び替えます。

.section__item--start {
    order: -1;
}

.section__item--start {

order: -1;

}

期待通り、flexアイテムの間に区切り線が配置されました。

並び順を変更する

すべてのスクリーンサイズで動作させるには、flex-direction: column;をスマホ用に、flex-direction: row;を大きなスクリーン用に追加します。

.section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section:before {
    content: "";
    border: 1px solid #d3d3d3;
    align-self: stretch;
}

@media (min-width: 700px) {
    .section {
        align-items: center;
        flex-direction: row;
    }
}

.section {

display: flex;

flex-direction: column;

gap: 1rem;

}

.section:before {

content: "";

border: 1px solid #d3d3d3;

align-self: stretch;

}

@media (min-width: 700px) {

.section {

align-items: center;

flex-direction: row;

}

flex-directionを変更すると、区切り線がどうなるかは下記をご覧ください。

flex-directionを変更すると、区切り線が変わる

これはflexboxのビヘイビアなので、魔法のように動きます。

flex-direction: row;を設定すると、クロス軸が垂直になり、擬似要素は垂直方向に伸びるようになります。

flex-direction: row;だと、垂直方向の伸びる

そして、flex-direction: column;を設定すると、クロス軸が水平になり、疑似要素は水平方向に伸びます。

flex-direction: column;だと、水平方向の伸びる

この実装の素晴らしい点は、widthやheightを指定する必要がないことです。区切り線のborderはflexboxで勝手に伸び縮みします。

区切り線の太さ

borderの値は4方向に寄与するので、希望する太さの0.5倍にする必要があります。たとえば、1pxの区切り線にしたい場合は、下記のようになります。

.section:before {
    content: "";
    border: 0.5px solid #d3d3d3;
    align-self: stretch;
}

.section:before {

content: "";

border: 0.5px solid #d3d3d3;

align-self: stretch;

}

グラデーションの区切り線

これは私がこのborderテクニックを選ぶ理由の一つです。border-imageでグラデーションを使用することができます。

.section:before {
    content: "";
    align-self: stretch;
    border: 1px solid #d3d3d3;
    border-image: linear-gradient(45deg, #3f51b5, #cddc39) 1;
}

.section:before {

content: "";

align-self: stretch;

border: 1px solid #d3d3d3;

border-image: linear-gradient(45deg, #3f51b5, #cddc39) 1;

}

グラデーションの区切り線も簡単に実装できます。

グラデーションの区切り線

破線の区切り線

borderを使用すると、破線の区切り線にすることも可能です。

.section:before {
    content: "";
    border: 1px dashed #d3d3d3;
    align-self: stretch;
}

.section:before {

content: "";

border: 1px dashed #d3d3d3;

align-self: stretch;

}

この通り、破線の区切り線も簡単です。

破線の区切り線

これを行う別の方法

もし、この実装を考えるのに時間がかかっていなければ、widthとheightを使用した可能性があります。下記が悪い解決策だとは言いませんが、当たり前のように使用していた実装方法から一歩踏み出して、UIの問題を解決する別の方法を考えるのは良いことだと思います。

/* On small sizes */
.section:before {
    content: "";
    height: 2px;
    background-color: lightgrey;
}

@media (min-width: 700px) {
    .section:before {
        width: 2px;
        height: 150px;
    }
}