Webデザイン

たった2行のCSSで、ボーダー線にグラデーションを与える方法

ウェブ制作で、線にグラデーションをかけたい時がありますよね。

いちいち画像にして設置するにも面倒だし、手っ取り早くCSSで解決できないかな?

そんな方の為に、たった2行のCSSのみでグラデーションのかかったボーダー(線)を作成する方法を紹介していきますね。

サンプル

例えば、赤から黒へグラデーションをかける場合

<div style="border-bottom: 10px solid; border-image: linear-gradient(to right, red 0%, black 100%) 1;">ボーダーグラデーション</div>

実装例

ボーダーグラデーション

解説

それでは解説していきますね。

今回のCSSは、分かりやすくする為にHTMLにインラインで記載していますが、基本的にはスタイルシートに書いていただいてもちろん問題ありません

まずは、ボーダーの線幅を指定しておきましょう。(border-bottom: 10px solid;)

次に、今回の要となる「border-image」プロパティを利用します。

border-imageプロパティ

border-imageでは、linear-gradient(リニア グレイデイアント)を指定する事ができます。

linearとは線の形、gradientは「勾配・傾度」という意味で、このCSSでは「左から右へ(to right)色の変化をつける」という意味になります。

その色の変化のスタート地点を、左から0%地点を「red」左から100%の地点を「black」になるように色の変化を与えます。

%の基準点を増やしたり、色を変化(ウェブカラー指定の場合は「#+6桁の英数字」)させる事で多彩な表現をする事ができます。

border-image-sliceプロパティ

しかし、これだけではボーダーにグラデーションを与える事ができません。実は、border-image-sliceというプロパティも一緒につけてあげる必要があります。

border-image-sliceは、以下のように四角形を9つの領域に分断して、部分的に場所を指定する場合に利用します。

1 5 2
8 9 6
4 7 3

今回の場合は、整数で1〜9までの数字を1つ与えると上手く表示されるようになりますので、「1」を当てています。

線にグラデーションを当てるだけなら、どの数字でも結果は同じなので、数字に関してはあまり気にしなくて良いので、border-image-sliceの値は「1」くらいで覚えておきましょう

border-imageは一括指定プロパティ

border-image-slice?? ちょっと待って! 上のサンプルコードには、border-image-sliceなんて書いてないけど?と思われますよね。そうなんです。実はborder-imageプロパティは、一括指定プロパティと呼ばれるもので、border-imageにborder-image-sliceをくっつけて表記する事が可能です

単純にコードを書く手間が省けるというだけのメリットになります。

ですので、ボーダーにグラデーションを与えるのであれば、以下のように覚えておけば良いのではないでしょうか。

<div style="border-bottom: 10px solid; border-image: linear-gradient(to right, red 0%, black 100%) 1;">ボーダーグラデーション</div>

border-image-sliceの「1」の前には半角スペースが入っていますよ

 

完全無料のクリエイター育成講座開催中!

人物イラストの無料ダウンロードサイト公開中!

人物イラストの無料ダウンロードならMIDO-KICHI

-Webデザイン

Copyright© デザイナーブリッジ , 2020 All Rights Reserved.