CSSだけで作れるオシャレな枠線・区切り線デザインまとめ

枠線や区切り線は記事内で中心になるものではないですが、デザインをちょっと変えるだけでサイトの雰囲気にアクセントをつけることができます。

また特徴的な枠線にすることで読者の注意を引き、記事の大事な部分に注目してもらいやすくなるという効果もあります。

ここではCSSだけで作れるオシャレな枠線や区切り線のデザインをいくつか紹介します。気に入ったものがあればコピペして自由に使ってください。

区切り線デザイン

まずは区切り線のデザインを紹介します。

グラデーションつき区切り線

次のようなグラデーションのついた区切り線です。

この区切り線を作るにはまず次のhr要素を定義します。

<hr class="hr_grad">

そしてこのhr要素に次のCSSを適用することで作れます。

.hr_grad{
  background: linear-gradient(to right, rgba(0, 50, 200), rgba(0, 200, 50));
  background-color: gray;
  width: 270px;
  height: 10px;
  margin: auto 0;
}

このCSSコードの次の部分を変更するとグラデーションの向きや色などを変更できます。

background: linear-gradient(to right, rgba(0, 50, 200), rgba(0, 200, 50));

この部分を変更すると次のような区切り線も作れます。

(1).緑系から赤系の色にグラデーションする区切り線

CSSコード

background: linear-gradient(to right, rgba(50, 250, 0), rgba(250, 100, 0));

(2).レインボーな区切り線

CSSコード

background: linear-gradient(to right, rgba(250, 50, 50), rgba(50, 250, 50) 50%,  rgba(50, 50, 250));

シマシマ区切り線

次のように色が交互に変化するしま模様の区切り線です。

この区切り線を作るにはまず次のhr要素を定義します。

<hr class="hr_grad">

そしてこのhr要素に次のCSSを適用します。

.hr_stripe{
  background: repeating-linear-gradient(45deg, blue , blue 10px,  white 10px, white 20px);
  background-color: gray;
  width: 270px;
  height: 10px;
  margin: auto 0;
}

区切り線のしま模様の間隔や色を変えるには上のCSSの次の部分を変更してください。

background: repeating-linear-gradient(45deg, blue , blue 10px,  white 10px, white 20px);

この部分を変更すると次のような区切り線が作れます。

(1).しま間隔を狭くした区切り線

CSSコード

background: repeating-linear-gradient(45deg, blue , blue 5px,  white 5px, white 10px);

(2).３色の縞模様の区切り線

CSSコード

background: repeating-linear-gradient(45deg, red , red 10px,  white 10px, white 20px, green 20px, green 30px, white 30px, white 40px);

枠線(ボーダー)デザイン

次はコンテンツの内容を囲む枠線のデザインを紹介します。

グラデーションつき枠線

次のようにある方向にグラデーションのついた枠線です。

この枠線を作るにはまず次のようなdiv要素を定義します。

<div class="border_grad"></div>

そして次のようなCSSをこの要素に適用します。

.border_grad{
  position: relative;
  background-color: white;
  border-radius: 6px;
  width: 250px;
  height: 150px;
  margin: 10px;
}

.border_grad:after{
  position: absolute;
  content: "";
  top: -10px; bottom: -10px;
  left: -10px; right: -10px;
  background: linear-gradient(to top, rgba(0, 50, 200), rgba(0, 200, 50));
  background-color: rgba(200, 200, 200);
  border-radius: 6px;
  z-index: -1;
}

このCSSではborderプロパティは使用していません。after疑似要素を使ってdiv要素でグラデーションのついたafter疑似要素を切り抜くことで枠線を作っています。

枠線の太さは次のtop,left,bottom,rightプロパティの値で変更できます。例えば太さを6pxにしたいなら次のようにこれらのプロパティに「-6px」と指定してください。

top: -6px; bottom: -6px;
left: -6px; right: -6px;

また枠線のグラデーションの方向や色などは次の部分を変更することで変えることができます。

background: linear-gradient(to top, rgba(0, 50, 200), rgba(0, 200, 50));

この部分を変更すると次のような区切り線が作れます。

(1).左から右の方向にグラデーションする枠線

CSSコード

background: linear-gradient(to right, rgba(0, 50, 200), rgba(0, 200, 50));

(2).青から紫で斜め４５度方向にグラデーションする枠線

CSSコード

background: linear-gradient(45deg, blue, purple);

(3).カラフル枠線

CSSコード

background: linear-gradient(to right bottom, red, green 50%, blue);

しましま枠線

次のようにしましまな模様が付いた枠線です。少しオシャレな感じになります。

この枠線を作るにはまず次のようなdiv要素を定義します。

<div class="border_stripe"></div>

そしてこのように次のCSSを適用すると縞模様付きの枠線になります。

.border_stripe{
  position: relative;
  background-color: white;
  width: 250px;
  height: 150px;
  margin: 10px;
}

.border_stripe:after{
  position: absolute;
  content: "";
  top: -10px; bottom: -10px;
  left: -10px; right: -10px;
  background: repeating-linear-gradient(45deg, red , red 10px,  white 10px, white 20px);
  background-color: gray;
  z-index: -1;
}

グラデーションつき枠線の時と同じようにborderプロパティは使っていません。枠線の太さの変更もグラデーション枠線の時と同じ方法で変更できます。

枠線の縞模様の間隔や方向や色を指定するには次の部分を変更してください。

background: repeating-linear-gradient(45deg, red , red 10px,  white 10px, white 20px);

この部分を変えると次のような枠線が作れます。

(1).しま模様の間隔が狭い枠線

CSSコード

background: repeating-linear-gradient(45deg, red , red 6px,  white 6px, white 12px);

(2).３色のしま模様の枠線

CSSコード

background: repeating-linear-gradient(45deg, red , red 6px,  white 6px, white 12px, lime 12px, lime 18px, white 18px, white 24px);

注意点 - ベンダープレフィックスについて

ここで紹介した枠線ではCSS3のグラデーション関係の２つのプロパティを使っています。

• linear-gradientプロパティ
• repeating-linear-gradientプロパティ

この２つのプロパティを未対応のブラウザで機能させるには先頭に「-moz」「-webkit-」「-o-」などのベンダープレフィックスが必要です。

例えばベンダープレフィックスは次のように指定します。

background: -moz-linear-gradient(to right bottom, red, green 50%, blue);
background: -webkit-linear-gradient(to right bottom, red, green 50%, blue);
background: linear-gradient(to right bottom, red, green 50%, blue);

ここではコードが長くなりすぎるので省略しましたが、多くのブラウザに対応させたいならベンダープレフィックスをつけるのを忘れない方が良いです。

以上オシャレな枠線や区切り線のデザインをいくつか紹介しました。もし気に入ったものがあればコピー・改変して使ってください。