テンプレート・素材カテゴリ


CSS3で色々な区切り線・罫線を作る

TOPページ > デザイン講座 > CSS3で色々な区切り線を作る

従来の区切り線(罫線)でも多少のデザインはできましたが、CSS3を使うと実に様々な区切り線・罫線を作ることができます。今回はほんの一例を紹介しますね。


グラデーション:左右へグラデーションががかかっています。

.line-01 {
  border: 0;
  background-color: #5959b3;
  background-image: -webkit-linear-gradient(left, #fff, #5959b3, #fff);
  background-image: -moz-linear-gradient(left, #fff, #5959b3, #fff);
  background-image: -o-linear-gradient(left, #fff, #5959b3, #fff);
  background-image: -ms-linear-gradient(left, #fff, #5959b3, #fff);
  background-image: linear-gradient(to right, #fff, #5959b3, #fff);
  height: 2px;
}

二重線:片方だけ太くすることができます。

.line-02 {
  background: #5959b3;
  border: 0;
  height: 2px;
}
 
.line-02:before {
  background: #5959b3;
  content: '';
  display: block;
  height: 1px;
  position: relative;
  top: -2px;
  width: 100%;
}

三重線:文字通り三重の区切り線ができます。

.line-03 {
  background: #5959b3;
  border: 0;
  height: 1px;
  position: relative;
}
 
.line-03:before,
.line-03:after {
  background: #5959b3;
  content: '';
  display: block;
  height: 1px;
  position: absolute;
  width: 100%;
}
 
.line-03:before {
  top: -2px;
}
 
.line-03:after {
  top: 2px;
}

切り取り線:区切り線の途中に文字を入れます。

.line-04 {
  border: 0;
  border-top: 1px dashed #000;
  text-align: center;
}
 
.line-04:after {
  background: #fff;
  content: 'キリトリ線';
  display: inline-block;
  padding: 0 0.5em;
  position: relative;
  top: -0.7em;
}

記号文字:区切り線の途中に記号を入れてます。

.line-05 {
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
.line-05:after {
    content: "§";
    display: inline-block;
    position: relative; 
    top: -0.7em;  
    font-size: 1.5em;
    padding: 0 0.25em;
    background: #f7fff0;
}

Recommended


スマートフォンなど多様なデバイスに対応し、使い勝手や見栄えを向上させる各種のアレンジ・テクニック。

応用テクニックやその仕組み、さらに踏み込んだ各種の情報もTIPSとして網羅。

現場のワークフローに沿ったサイト制作までを詳しく解説。プロが教える「実習」+「講義」の全30レッスン。

これからのWeb制作に必要な知識を総合的に解説。HTML5 2014年勧告候補に対応!

はじめて学ぶ人は、サイトの作り方をゼロから習得。すでに覚えた人は、「正しい」方法を復習できる。



ページトップへ