Movatterモバイル変換

[0]ホーム
URL:

コリス

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

サイト構築 -CSS

  • Xでシェアする
  • Facebookでシェアする
  • はてなでブックマークする
  • Raindropに保存する

Post on:2022年3月8日

sponsorsr

要素間の区切り線をレスポンシブ対応にする時、どのように実装していますか？

flexboxで実装すると、1つのコードでコンテンツに合わせて伸縮し、デスクトップもスマホにも対応、スクリーンサイズに合わせて垂直・水平にも切り替えるのにも対応できます。さらに、区切り線をグラデーションや破線にするのも簡単です。

CSS flexboxでレスポンシブ対応の区切り線を実装する巧妙で素晴らしいテクニックを紹介します。

レスポンシブ対応の区切り線を実装するテクニック

Flexbox Dynamic Line Separator
by Ahmad Shadeed

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

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

セクション間の区切り

セクション間の区切り

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

スマホでの表示

スマホでは、水平になる

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

HTML
1
2
3
4
5
6
7
8
9
<sectionclass="section">
    <divclass="section__item section__item--start">
        <!--Content-->
    </div>
  
    <divclass="section__item section__item--end">
        <!--Content-->
    </div>
</section>

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

CSSは、flexboxで実装します。

CSS
1
2
3
4
5
6
7
8
9
10
.section{
    display:flex;
    gap:1rem;
    max-width:700px;
    margin:2remauto;
}
 
.section__item{
    flex:1;
}

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

デモのキャプチャ

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

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

CSS
1
2
3
4
5
6
7
8
9
10
.section{
    display:flex;
    align-items:center;
    gap:1rem;
    /* other styles */
}
 
.section__item{
    flex:1;
}

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

デモのキャプチャ

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

区切り線の実装

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

CSS
1
2
3
4
.section:before{
    content:"";
    border:1pxsolid#d3d3d3;
}

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

デモのキャプチャ

小さい四角？？？

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

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

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

正方形ができる仕組み

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

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

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

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

CSS
1
2
3
4
5
.section:before{
    content:"";
    border:1pxsolid#d3d3d3;
    align-self:stretch;
}

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

デモのキャプチャ

縦方向に伸ばされる

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

CSS
1
2
3
.section__item--start{
    order:-1;
}

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

デモのキャプチャ

並び順を変更する

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

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.section{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
 
.section:before{
    content:"";
    border:1pxsolid#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の区切り線にしたい場合は、下記のようになります。

CSS
1
2
3
4
5
.section:before{
    content:"";
    border:0.5pxsolid#d3d3d3;
    align-self:stretch;
}

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

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

CSS
1
2
3
4
5
6
.section:before{
    content:"";
    align-self:stretch;
    border:1pxsolid#d3d3d3;
    border-image:linear-gradient(45deg,#3f51b5, #cddc39) 1;
}

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

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

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

破線の区切り線

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

CSS
1
2
3
4
5
.section:before{
    content:"";
    border:1pxdashed#d3d3d3;
    align-self:stretch;
}

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

破線の区切り線

破線の区切り線

これを行う別の方法

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

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
/* On small sizes */
.section:before{
    content:"";
    height:2px;
    background-color:lightgrey;
}
 
@media(min-width:700px){
    .section:before{
        width:2px;
        height:150px;
    }
}

実際の動作はデモページでご覧ください。

See the Pen
Flexbox Dynamic Line Separator by Ahmad Shadeed (@shadeed)
onCodePen.

終わりに

この記事があなたのお役に立てれば幸いです。
コメントや提案があれば、@shadeed9までお願いします。

sponsors

Related Posts

関連記事が見つかりませんでした。

  • Xでシェアする
  • Facebookでシェアする
  • はてなでブックマークする
  • Raindropに保存する

top of page

  • ワードプレステンプレート

Sponsors

  • Eagle
  • 1Password ソースネクストだけの3年版
  • 広告掲載募集中
coliss

Recnet Entry

Pickup Entry

Recommend

top of page

Category

Blog Info

当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。
©2025 coliss
[8]ページ先頭
©2009-2025 Movatter.jp