Web

コピペで簡単！CSSで作る装飾アイディア14個

: 2014/12/11
: Jomo
: CSS,; Tips,; web

モバイルファーストやらフラットデザインやらで、画像で装飾するよりも、チャチャッとCSSで装飾することが多くなりましたよね！というわけで、よく使いそうなもの（じゃないのも混じってますが）をいつでも簡単にコピペできるようにまとめてみました。

CSSで飾りを作るポイント

CSSで飾りを作るのに欠かせないのは、疑似要素とposition、transformの扱い。逆にココさえ押さえておけば、自分なりに色々な飾りが作れると思います！

疑似要素:before & :after

CSS装飾にとっても便利な疑似要素:before & :after。それぞれにcontent:””;を指定することで、親要素に対して擬似的に要素を作り出します（そのままですね…）。これを使えば最高２つの要素が飾りとして機能するので、要素そのものの他に罫線や図形を加えて華やかにすることができるようになります。

positionは親要素にrelative、疑似要素にabsolute

作り出した疑似要素は、親要素に対して絶対配置（absolute）を指定して位置を調整することが多いです。このとき親要素にrelative指定をして、絶対配置の起点を親要素にすることを忘れないようにしましょう。うっかり指定しないと、疑似要素がトンチンカンな場所に飛んでいって「できない…」と悩む原因になります。

transformでバリエーションを

ただの四角でも、transform-rotateで菱形になったり、矢印を作れたりします。あとは他の要素との組み合わせ方で色々な演出ができるので、表現の幅が広がりますよ！

見出し系の装飾

それではさっそく、見出しの装飾から！

クラシック系二重線

テキストが中央合わせの、シングルページサイトなどに合いそうな飾りです。疑似要素のbefore:、after:にそれぞれborder-topとborder-bottomを指定し、topとmargin-topで縦中央になるように調整しています。

demo

HEAD LINE

HTML

<div class="double">
	<h2>HEAD LINE</h2>
</div>

</div>

CSS

.double{
	width:100%;
	text-align:center;
}
.double h2{
	position:relative;
	display:inline-block;
}
.double h2:before, .double h2:after{
	content:"";
	display:block;
	width:200px;
	height:4px;
	border-top:1px solid #111;
	border-bottom:1px solid #111;
	position:absolute;
	top:50%;
	margin-top:-2px;
}
.double h2:before{left:-224px;}
.double h2:after{right:-224px;}

.double{

width:100%;

text-align:center;

}

.double h2{

position:relative;

display:inline-block;

}

.double h2:before, .double h2:after{

content:"";

display:block;

width:200px;

height:4px;

border-top:1px solid #111;

border-bottom:1px solid #111;

position:absolute;

top:50%;

margin-top:-2px;

}

.double h2:before{left:-224px;}

.double h2:after{right:-224px;}

クラシック系飾り罫

こちらもテキスト中央合わせのモノに合います。あまり使わないけど…１個無駄なspanも使いますし…。菱形のspanはtransform:rotate(45deg);で。疑似要素を使えば、もっと複雑な飾りも作れます。

demo 2

HEAD LINE

HTML

<div class="ornament">		
	<h2><span></span>HEAD LINE</h2>
</div>

</div>

CSS

.ornament{
	width:100%;
	text-align:center;
}
.ornament h2{
	position:relative;
	display:inline-block;
	padding:24px 64px;
}
.ornament h2:before, .ornament h2:after{
	content:"";
	display:block;
	width:50%;
	height:4px;
	border-top:1px solid #111;
	position:absolute;
	top:0;
}
.ornament h2:before{left:-24px;}
.ornament h2:after{right:-24px;}
.ornament h2 span{
	display:block;
	width:4px;height:4px;
	border:2px solid #111;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	position:absolute;
	top:-4px;
	left:50%;
	margin-left:-4px;
}

.ornament{

width:100%;

text-align:center;

}

.ornament h2{

position:relative;

display:inline-block;

padding:24px 64px;

}

.ornament h2:before, .ornament h2:after{

content:"";

display:block;

width:50%;

height:4px;

border-top:1px solid #111;

position:absolute;

top:0;

}

.ornament h2:before{left:-24px;}

.ornament h2:after{right:-24px;}

.ornament h2 span{

display:block;

width:4px;height:4px;

border:2px solid #111;

-webkit-transform:rotate(45deg);

transform:rotate(45deg);

position:absolute;

top:-4px;

left:50%;

margin-left:-4px;

}

丸付き罫線

両端に丸をつけるだけで飾りっぽくなります。もちろん下付きも簡単にできます。

demo 3

HEAD LINE

HTML

<div class="circle">
	<h2 class="circleDot">HEAD LINE</h2>
</div>

</div>

CSS

.circle{
	width:100%;
	text-align:center;
}
.circle h2{
	position:relative;
	display:inline-block;
	padding:16px 40px;
	border-top:2px solid #111;
}
.circle h2:before, .circle h2:after{
	content:"";
	display:block;
	width:8px;
	height:8px;
	border-radius:50%;
	background:#111;
	position:absolute;
	top:-5px;
}
.circle h2:before{left:-4px;}
.circle h2:after{right:-4px;}

.circle{

width:100%;

text-align:center;

}

.circle h2{

position:relative;

display:inline-block;

padding:16px 40px;

border-top:2px solid #111;

}

.circle h2:before, .circle h2:after{

content:"";

display:block;

width:8px;

height:8px;

border-radius:50%;

background:#111;

position:absolute;

top:-5px;

}

.circle h2:before{left:-4px;}

.circle h2:after{right:-4px;}

マルチボーダー風

透明度のある疑似要素をずらして重ね、マルチボーダー風に。色を任意で変えれば、印象が変わります。

demo 4

Head Line

HTML

<h2 class="multi">Head Line</h2>

1	<h2 class="multi">Head Line</h2>

CSS

h2.multi{
	padding:6px 0;
	border-bottom:8px solid #ABDEF7;
	position:relative;
}
h2.multi:before, h2.multi:after{
	content:"";
	display:block;
	height:8px;
	position:absolute;
	bottom:-8px;
}
h2.multi:before{
	width:20%;
	left:8%;
	background:rgba(255,255,255,0.7);
}
h2.multi:after{
	width:30%;
	left:12%;
	background:rgba(87,176,224,0.6);
}

h2.multi{

padding:6px 0;

border-bottom:8px solid #ABDEF7;

position:relative;

}

h2.multi:before, h2.multi:after{

content:"";

display:block;

height:8px;

position:absolute;

bottom:-8px;

}

h2.multi:before{

width:20%;

left:8%;

background:rgba(255,255,255,0.7);

}

h2.multi:after{

width:30%;

left:12%;

background:rgba(87,176,224,0.6);

}

パワポ的装飾

使いどころは分かりませんが…こんな感じにもなりますよーということで。

demo 5

Head Line

HTML

<h2 class="ppt">Head Line</h2>

1	<h2 class="ppt">Head Line</h2>

CSS

h2.ppt{
	position:relative;
	padding:2px 48px;
	border-bottom:1px solid #62A1CB;
	font-weight:lighter;
}
h2.ppt:first-letter{color:#62A1CB;}
h2.ppt:before, h2.ppt:after{
	content:"";
	display:block;
	position:absolute;
}
h2.ppt:before{
	width:32px;height:32px;
	border-radius:50%;
	border:1px solid #ddd;
	bottom:-16px;
	left:8px;
}
h2.ppt:after{
	height:64px;
	border-left:1px solid #ddd;
	bottom:-32px;
	left:24px;
}

h2.ppt{

position:relative;

padding:2px 48px;

border-bottom:1px solid #62A1CB;

font-weight:lighter;

}

h2.ppt:first-letter{color:#62A1CB;}

h2.ppt:before, h2.ppt:after{

content:"";

display:block;

position:absolute;

}

h2.ppt:before{

width:32px;height:32px;

border-radius:50%;

border:1px solid #ddd;

bottom:-16px;

left:8px;

}

h2.ppt:after{

height:64px;

border-left:1px solid #ddd;

bottom:-32px;

left:24px;

}

リスト系装飾

list-styleの部分を、背景画像を使わずにCSSで表現します。

チェックマーク

list-styleの部分をチェックマークに。位置は、フォントサイズや行間などによって調整が必要です。

demo 6

List 1
List 2
List 3

HTML

<ul class="check">
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
</ul>

</ul>

CSS

ul.check li{
	list-style:none;
	padding-left:24px;
	position:relative;
}
ul.check li:before,
ul.check li:after{
	content:"";
	display:block;
	position:absolute;
}
ul.check li:before{
	width:16px;
	height:16px;
	border-radius:8px;
	background:#8CC4D9;
	left:0;top:2px;
}
ul.check li:after{
	border-left:2px solid #fff;
	border-bottom:2px solid #fff;
	width:6px;
	height:3px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:4px;
	top:6px;
}

ul.check li{

list-style:none;

padding-left:24px;

position:relative;

}

ul.check li:before,

ul.check li:after{

content:"";

display:block;

position:absolute;

}

ul.check li:before{

width:16px;

height:16px;

border-radius:8px;

background:#8CC4D9;

left:0;top:2px;

}

ul.check li:after{

border-left:2px solid #fff;

border-bottom:2px solid #fff;

width:6px;

height:3px;

-webkit-transform:rotate(-45deg);

transform:rotate(-45deg);

left:4px;

top:6px;

}

プラスマーク

プラスマークは、疑似要素のcontentに文字を入れて手軽に。

demo 7

List 1
List 2
List 3

HTML

<ul class="addList">
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
</ul>

</ul>

CSS

ul.addList li{
	list-style:none;
	padding-left:24px;
	line-height:1.6;
	position:relative;
}
ul.addList li:before{
	content:"+";
	display:block;
	width:16px;height:16px;
	border-radius:8px;
	background:#8CC4D9;
	color:#fff;
	line-height:16px;
	text-align:center;
	position:absolute;
	left:0;
	top:2px;
}

ul.addList li{

list-style:none;

padding-left:24px;

line-height:1.6;

position:relative;

}

ul.addList li:before{

content:"+";

display:block;

width:16px;height:16px;

border-radius:8px;

background:#8CC4D9;

color:#fff;

line-height:16px;

text-align:center;

position:absolute;

left:0;

top:2px;

}

矢印リスト

疑似要素で三角を作って配置します。

demo 8

List 1
List 2
List 3

HTML

<ul class="arrowList">
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
</ul>

</ul>

CSS

ul.arrowList li{
	list-style:none;
	padding-left:1.5rem;
	position:relative;
}
ul.arrowList li:before,
ul.arrowList li:after{
	content:"";
	display:block;
	position:absolute;
}
ul.arrowList li:before{
	width:12px;height:12px;
	border-radius:2px;
	background:#8CC4D9;
	left:0;
	top:5px;
}
ul.arrowList li:after{
	border:3px solid transparent;
	border-left-color:#fff;
	left:5px;
	top:8px;
}

ul.arrowList li{

list-style:none;

padding-left:1.5rem;

position:relative;

}

ul.arrowList li:before,

ul.arrowList li:after{

content:"";

display:block;

position:absolute;

}

ul.arrowList li:before{

width:12px;height:12px;

border-radius:2px;

background:#8CC4D9;

left:0;

top:5px;

}

ul.arrowList li:after{

border:3px solid transparent;

border-left-color:#fff;

left:5px;

top:8px;

}

矢印付きリンク

リンクの後ろにつく矢印もCSSで！ユーザービリティーもあがります。

矢印1

シンプルなライン矢印。上と右だけにborderを指定して、transformで45°回転させて矢印の先端を作ります。

demo 9

Link

HTML

<a href="" class="arrow1">Link</a>

1	<a href="" class="arrow1">Link</a>

CSS

a.arrow1{
	text-decoration:none;
	color:#62A1CB;
	display:inline-block;
	padding-right:16px;
	position:relative;
}
a.arrow1:before,
a.arrow1:after{
	content:"";
	display:block;
	position:absolute;
}
a.arrow1:before{
	border-right:1px solid #62A1CB;
	border-top:1px solid #62A1CB;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	width:8px;height:8px;
	right:0;top:50%;
	margin-top:-4px;
}
a.arrow1:after{
	width:12px;
	border-bottom:1px solid #62A1CB;
	right:0;top:50%;
}

a.arrow1{

text-decoration:none;

color:#62A1CB;

display:inline-block;

padding-right:16px;

position:relative;

}

a.arrow1:before,

a.arrow1:after{

content:"";

display:block;

position:absolute;

}

a.arrow1:before{

border-right:1px solid #62A1CB;

border-top:1px solid #62A1CB;

-webkit-transform:rotate(45deg);

transform:rotate(45deg);

width:8px;height:8px;

right:0;top:50%;

margin-top:-4px;

}

a.arrow1:after{

width:12px;

border-bottom:1px solid #62A1CB;

right:0;top:50%;

}

矢印2

transform:skewX;を使って、スピード感がありそうな矢印を作ります。

demo 10

Link

HTML

<a href="#" class="arrow2">Link</a>

1	<a href="#" class="arrow2">Link</a>

CSS

a.arrow2{
	text-decoration:none;
	color:#62A1CB;
	display:inline-block;
	padding-right:16px;
	position:relative;
}
a.arrow2:before, a.arrow2:after{
	content:"";
	display:block;
	-webkit-transform:skewX(45deg);
	transform:skewX(45deg);
	position:absolute;
	right:0;
	bottom:6px;
}
a.arrow2:before{
	width:12px;height:3px;
	background:#62A1CB;
}
a.arrow2:after{
	width:4px;height:8px;
	background:#62A1CB;
}

a.arrow2{

text-decoration:none;

color:#62A1CB;

display:inline-block;

padding-right:16px;

position:relative;

}

a.arrow2:before, a.arrow2:after{

content:"";

display:block;

-webkit-transform:skewX(45deg);

transform:skewX(45deg);

position:absolute;

right:0;

bottom:6px;

}

a.arrow2:before{

width:12px;height:3px;

background:#62A1CB;

}

a.arrow2:after{

width:4px;height:8px;

background:#62A1CB;

}

アイコン風

丸で囲われたアイコン風の矢印。

demo 11

Link

HTML

<a href="#" class="arrow3">Link</a>

1	<a href="#" class="arrow3">Link</a>

CSS

a.arrow3{
	position:relative;
	display:inline-block;
	padding:0 32px 0 16px;
	color:#fff;
	text-decoration:none;
	height:24px;
	line-height:24px;
	border-radius:12px;
	background: #62A1CB;
}
a.arrow3:before,
a.arrow3:after{
	content:"";
	display:block;
	position:absolute;
}
a.arrow3:before{
	width:16px;
	height:16px;
	background:#fff;
	border-radius:50%;
	right:4px;
	top:4px;
}
a.arrow3:after{
	width:4px;
	height:4px;
	border-right:2px solid #62A1CB;
	border-top:2px solid #62A1CB;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	right:10px;
	top:9px;
}

a.arrow3{

position:relative;

display:inline-block;

padding:0 32px 0 16px;

color:#fff;

text-decoration:none;

height:24px;

line-height:24px;

border-radius:12px;

background: #62A1CB;

}

a.arrow3:before,

a.arrow3:after{

content:"";

display:block;

position:absolute;

}

a.arrow3:before{

width:16px;

height:16px;

background:#fff;

border-radius:50%;

right:4px;

top:4px;

}

a.arrow3:after{

width:4px;

height:4px;

border-right:2px solid #62A1CB;

border-top:2px solid #62A1CB;

-webkit-transform:rotate(45deg);

transform:rotate(45deg);

right:10px;

top:9px;

}

そのほか

そのほかよく見かける飾りです。使いどころも多いと思います。

NEW!リボン

ブログなどでよくあるリボン風の表現。今回はcontentにNEWを入れて、クラス指定すれば勝手に表示される感じにしました。文書構造的にはspanとかで書いた方が良いのかな…

demo 12

HTML

<div class="new">
	<img src="img/sample01.jpg" />
</div>

</div>

CSS

.new{
	font-weight:bold;
	font-family:'Helvetica', 'sans-serif';
	position:relative;
	display:block;
	width:240px;
	height:144px;
	margin:40px;
	overflow:visible;
}
.new:before,
.new:after{
	display:block;
	position:absolute;
	left:-10px;
}
.new:before{
	content:"";
	border:6px solid transparent;
	border-top-color:#a1364f;
	border-right-color:#a1364f;
	top:32px;
}
.new:after{
	content:"NEW!";
	background:#c24760;
	color:#fff;
	padding:0 24px;
	height:24px;
	line-height:24px;
	top:8px;
	z-index:10;
}

.new{

font-weight:bold;

font-family:'Helvetica', 'sans-serif';

position:relative;

display:block;

width:240px;

height:144px;

margin:40px;

overflow:visible;

}

.new:before,

.new:after{

display:block;

position:absolute;

left:-10px;

}

.new:before{

content:"";

border:6px solid transparent;

border-top-color:#a1364f;

border-right-color:#a1364f;

top:32px;

}

.new:after{

content:"NEW!";

background:#c24760;

color:#fff;

padding:0 24px;

height:24px;

line-height:24px;

top:8px;

z-index:10;

}

紙が重なっている様な表現

ものすごく「やってる感」が出る、便利な装飾。:before・:afterで重なった紙を擬似的に表現します。

demo 13

HTML

<div class="paper">
	<img src="img/sample01.jpg" />
</div>

</div>

CSS

.paper{
	width:300px;height:300px;
	padding:8px;
	border:1px solid #eee;
	background:#fff;
	border-radius:2px;
	box-shadow:1px 1px 3px rgba(0,0,0,0.1);
	position:relative;
}
.paper:before,
.paper:after{
	content:"";
	display:block;
	width:100%;height:100%;
	border:1px solid #ddd;
	background:#fff;
	border-radius:2px;
	box-shadow:1px 1px 3px rgba(0,0,0,0.1);
	position:absolute;
	left:0;
	top:0;
	z-index:-1;
}
.paper:before{
	-webkit-transform:rotate(-5deg);
	transform:rotate(-5deg);
}
.paper:after{
	-webkit-transform:rotate(5deg);
	transform:rotate(5deg);
}

.paper{

width:300px;height:300px;

padding:8px;

border:1px solid #eee;

background:#fff;

border-radius:2px;

box-shadow:1px 1px 3px rgba(0,0,0,0.1);

position:relative;

}

.paper:before,

.paper:after{

content:"";

display:block;

width:100%;height:100%;

border:1px solid #ddd;

background:#fff;

border-radius:2px;

box-shadow:1px 1px 3px rgba(0,0,0,0.1);

position:absolute;

left:0;

top:0;

z-index:-1;

}

.paper:before{

-webkit-transform:rotate(-5deg);

transform:rotate(-5deg);

}

.paper:after{

-webkit-transform:rotate(5deg);

transform:rotate(5deg);

}

ふきだし色々

ふきだしも、疑似要素を使えば簡単です。ツールチップや見出しなどにも応用できます。線付きのふきだしは、:beforeと:after要素をずらして線を表現します。

demo 14

★

HTML

<div class="baloon1">★</div>
<div class="baloon2">★</div>
<div class="baloon3">★</div>

CSS

/*ふきだし1（ノーマル）*/
.baloon1{
	padding:4px 24px;
	display:inline-block;
	background:#000;
	color:#fff;
	border-radius:4px;
	opacity:0.7;
	position:relative;
}
.baloon1:before{
	content:"";
	display:block;
	height:8px;
	border:4px solid transparent;
	border-top:8px solid #000;
	position:absolute;
	left:50%;
	bottom:-20px;
	margin-left:-4px;
}
/*ふきだし2（枠線付き）*/
.baloon2{
	padding:4px 24px;
	display:inline-block;
	background:#fff;
	border:1px solid #ddd;
	color:#111;
	border-radius:4px;
	position:relative;
}
.baloon2:before,
.baloon2:after{
	content:"";
	display:block;
	height:8px;
	border:4px solid transparent;
	position:absolute;
	left:50%;
	margin-left:-4px;
}
.baloon2:before{
	border-top:8px solid #ddd;
	bottom:-20px;
}
.baloon2:after{
	border-top:8px solid #fff;
	bottom:-19px;
}
/*ふきだし3（丸型）*/
.baloon3{
	display:inline-block;
	position:relative;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	border-radius:50%;
	background:#62A1CB;
	color:#fff;
}
.baloon3:before{
	content:"";
	display:block;
	height:8px;
	border:4px solid transparent;
	border-top:8px solid #62A1CB;
	position:absolute;
	left:50%;
	bottom:-18px;
	margin-left:-4px;
}

/*ふきだし1（ノーマル）*/

.baloon1{

padding:4px 24px;

display:inline-block;

background:#000;

color:#fff;

border-radius:4px;

opacity:0.7;

position:relative;

}

.baloon1:before{

content:"";

display:block;

height:8px;

border:4px solid transparent;

border-top:8px solid #000;

position:absolute;

left:50%;

bottom:-20px;

margin-left:-4px;

}

/*ふきだし2（枠線付き）*/

.baloon2{

padding:4px 24px;

display:inline-block;

background:#fff;

border:1px solid #ddd;

color:#111;

border-radius:4px;

position:relative;

}

.baloon2:before,

.baloon2:after{

content:"";

display:block;

height:8px;

border:4px solid transparent;

position:absolute;

left:50%;

margin-left:-4px;

}

.baloon2:before{

border-top:8px solid #ddd;

bottom:-20px;

}

.baloon2:after{

border-top:8px solid #fff;

bottom:-19px;

}

/*ふきだし3（丸型）*/

.baloon3{

display:inline-block;

position:relative;

width:40px;

height:40px;

line-height:40px;

text-align:center;

border-radius:50%;

background:#62A1CB;

color:#fff;

}

.baloon3:before{

content:"";

display:block;

height:8px;

border:4px solid transparent;

border-top:8px solid #62A1CB;

position:absolute;

left:50%;

bottom:-18px;

margin-left:-4px;

}

まとめ

いかがだったでしょうか？ CSSで装飾ができると、画像も必要ないのでデータが軽く＆準備が楽になります。コードも案外サクッとできるものなので、色々なところで使ってみてください。
それではまた！

目次

CSSで飾りを作るポイント

疑似要素:before & :after

positionは親要素にrelative、疑似要素にabsolute

transformでバリエーションを

見出し系の装飾

クラシック系二重線

HEAD LINE

HTML

CSS

クラシック系飾り罫

HEAD LINE

HTML

CSS

丸付き罫線

HEAD LINE

HTML

CSS

マルチボーダー風

Head Line

HTML

CSS

パワポ的装飾

Head Line

HTML

CSS

リスト系装飾

チェックマーク

HTML

CSS

プラスマーク

HTML

CSS

矢印リスト

HTML

CSS

矢印付きリンク

矢印1

HTML

CSS

矢印2

HTML

CSS

アイコン風

HTML

CSS

そのほか

NEW!リボン

HTML

CSS

紙が重なっている様な表現

HTML

CSS

ふきだし色々

HTML

CSS

まとめ