• Home
  • Web制作
  • 【CSS】borderを2色で彩る！スタイリッシュなWebデザインを実現する方法

【CSS】borderを2色で彩る！スタイリッシュなWebデザインを実現する方法

schedule
Tags: CSS

はじめに

Webサイトの見た目を大きく左右する要素の一つに「border」があります。要素を区切ったり、強調したりと、様々な役割を担っていますね。

しかし、CSSで指定できるborderの色は基本的には一色です。ありきたりな単色のborderでは、せっかくのWebデザインもどこか味気ないものになってしまいがちです。

そこで今回は、CSSを使ってborderを2色で表現し、Webサイトをより魅力的に見せる方法をご紹介いたします。

なぜborderを2色にする必要があるのか？

2色で表現されたborderは、単色にはない洗練された印象や奥行きをWebサイトに与え、ユーザーの視線を惹きつけます。

例えば、以下のような効果が期待できます。

  • サイトの印象をガラリと変える
    • 暖色と寒色を組み合わせることで、サイトにメリハリが生まれます。
    • ブランドカラーを2色使用することで、統一感のあるデザインを実現できます。
  • 要素をより効果的に強調する
    • 重要な要素の周囲に2色のborderを施すことで、ユーザーの注意を引きつけられます。
  • シンプルながらも印象的なデザインを実現する
    • 背景や画像をシンプルにする代わりに、borderを2色にすることで、物足りなさを解消できます。

このように、borderを2色にすることには、Webサイトのデザインを向上させる様々なメリットがあると言えるでしょう。

2色のborderの実装方法

それでは、具体的な実装方法を見ていきましょう。

2色のborderの実現には、主に以下の2つの手法があります。

  1. 擬似要素を用いる方法
  2. グラデーションを用いる方法

それぞれの方法について、詳しく解説していきます。

1. 擬似要素を用いる方法

擬似要素とは、要素の特定の状態を表す仮想的な要素のことです。この擬似要素を利用することで、要素に本来は存在しない子要素を表現できます。

2色のborderを実現する上で、::beforeや::afterといった擬似要素を用いる方法は一般的です。具体的には、要素自身に1色目のborderを設定し、擬似要素に2色目のborderを設定します。そして、擬似要素の位置を調整することで、2色のborderを作り出すことができます。

例えば、異なる色のborderを設定したい場合は、以下のようなCSSを記述します。

.example1 {
  position: relative; /* 擬似要素の配置に必要 */
  border-bottom: 10px solid blue;
}

.example1::before {
  content: "";
  position: absolute;
  bottom: -10px; /* borderの幅分だけずらす */
  left: 0;
  width: 50%;
  height: 10px; 
  background-color: red; /* 2色目のborderの色 */
}
Sample

上記のコードでは、.example1クラスを持つ要素に対して、下部に赤のborderを設定しています。そして、::before擬似要素を用いることで、下部のborderに重なる形で赤い線を引いています。

あわせて読みたい
【CSS擬似要素】知られざる装飾テクニックでWebデザインを次のレベルへ

2. グラデーションを用いる方法

CSSのlinear-gradient()関数を使用すると、要素に対して線形グラデーションをかけることができます。これを利用することで、2色で構成されたborderを表現することも可能です。

例えば、要素の左が青、右が赤のborderを設定したい場合は、以下のようなCSSを記述します。

.example2 {
  position: relative;
}

.example2::before {
  position: absolute;
  content: "";
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(
    to right,
    blue 0%, blue 50%,
    red 50%, red 100%);
}
Sample

上記のコードでは、backgroundプロパティにlinear-gradient()関数を指定することで、borderにグラデーションを適用しています。

あわせて読みたい
【CSSグラデーション】初心者さんもOK！Webページを彩るテクニックを徹底解説！

まとめ

今回は、CSSを使ってborderを2色で表現する方法をご紹介しました。

擬似要素やグラデーションを活用することで、単色のborderよりもさらに豊かな表現が可能になります。

今回の内容を参考に、ぜひWebサイトのデザインに2色のborderを効果的に取り入れてみてください。

関連記事