Home  »  CSS   »   CSSで作る見出しデザイン

CSSで作る見出しデザイン

SONY DSC By: jonas.lowgren

SONY DSC By: jonas.lowgren

見出しはサイトの見た目を決める上で重要な箇所です。

印象的な見出しは、それだけでサイトを引き立ててくれます。

今回は、そんな見出しのデザインをCSSで10パターン作成してみましたので、参考にして下さい。

見出しデザイン
  1. 当ブログの見出し
  2. チェックマークの見出し
  3. 矢印マークの見出し
  4. 十字マークの見出し
  5. 円マークの見出し
  6. 円を重ね合わせた見出し
  7. フキダシの見出し
  8. ボーダーを利用した見出し１
  9. ボーダーを利用した見出し２
  10. 下線を付けた見出し
当ブログの見出し
CSS
.heading1{
	position:relative;
	padding-left:20px;
	border-bottom:2px solid #ccc;
	font-weight: bold;
	font-size: 22px;
	line-height: 38px;
}

.heading1:before{
	content:''; 
	height:12px; 
	width:12px; 
	display:block; 
	background:#00A8FF; 
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; 
	position:absolute; 
	top:-0px; 
	left:5px;
	transform:rotate(-50deg);
	-webkit-transform:rotate(-50deg);
	-moz-transform:rotate(-50deg);
	-o-transform:rotate(-50deg);
	-ms-transform:rotate(-50deg);
}
.heading1:after{
	content:''; 
	height:8px; 
	width:6px; 
	display:block; 
	background:#00A8FF; 
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; 
	position:absolute; 
	top:16px; 
	left:2px;
	transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	-ms-transform:rotate(-75deg);
}
チェックマークの見出し
CSS
.heading2{
	position:relative;
	padding-left:30px;
	border-bottom:2px solid #ccc;
	font-weight: bold;
	font-size: 22px;
	line-height: 38px;
}

.heading2:after, .heading2:before{
	content:''; 
	height:18px; 
	width:4px; 
	display:block; 
	background:#00A8FF; 
	position:absolute; 
	top:8px; 
	left:15px; 
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px; 
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
}

.heading2:before{
	height:10px; 
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg); 
	top:16px; 
	left:7px
}
矢印マークの見出し
CSS
.heading3{
	position:relative;
	padding-left:30px;
	border-bottom:2px solid #ccc;
	font-weight: bold;
	font-size: 22px;
	line-height: 38px;
}

.heading3:before{
 	content:''; 
 	height:0; 
 	width:0; 
 	display:block; 
 	border:5px transparent solid; 
 	border-right-width:0; 
 	border-left-color:#00A8FF; 
	position:absolute; 
	top:11px; 
	left:8px;
}

.heading3:after{
	content:''; 
	height:2px; 
	width:10px; 
	display:block; 
	background:#00A8FF; 
	position:absolute; 
	top:15px; 
	left:0px;
}
十字マークの見出し
CSS
.heading4{
	position:relative;
	padding-left:30px;
	border-bottom:2px solid #ccc;
	font-weight: bold;
	font-size: 22px;
	line-height: 38px;
}

.heading4:before{
	content:''; 
	height:15px; 
	width:3px; 
	display:block; 
	background:#00A8FF; 
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; 
	position:absolute; 
	top:-3px; 
	left:8px;
}

.heading4:after{
	content:''; 
	height:3px; 
	width:13px; 
	display:block; 
	background:#00A8FF; 
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; 
	position:absolute; 
	top:1px; 
	left:5px;
}
円マークの見出し
CSS
.heading5{
	position:relative;
	padding-left:30px;
	border-bottom:2px solid #ccc;
	font-weight: bold;
	font-size: 22px;
	line-height: 38px;
}

.heading5:before{
	content:''; 
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px; 
	height:12px; 
	width:12px; 
	display:block; 
	position:absolute; 
	top:13px; 
	left:5px; 
	background-color:#00A8FF;
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
}
円を重ね合わせた見出し
CSS
.heading6{
	position:relative;
	padding-left:30px;
	border-bottom:2px solid #ccc;
	font-weight: bold;
	font-size: 22px;
	line-height: 38px;
}

.heading6:before{
	content:''; 
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px; 
	height:12px; 
	width:12px; 
	display:block; 
	position:absolute; 
	top:14px; 
	left:7px; 
	background-color:#6B0CE8;
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	filter:alpha(opacity=50);
	-moz-opacity:0.50;
	-khtml-opacity: 0.50;
	opacity:0.50;
	z-index: 1;
}

.heading6:after{
	content:''; 
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px; 
	height:15px; 
	width:15px; 
	display:block; 
	position:absolute; 
	top:7px; 
	left:2px; 
	background-color:#00A8FF;
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
}
フキダシの見出し
CSS
.heading7{
	position:relative;
	padding:9px;
	font-weight: bold;
	font-size: 18px;
	background-color: #51A2C1;
	color: #fff;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}

.heading7:before{
	content:''; 
	height:0; 
	width:0; 
	display:block; 
	border:13px transparent solid; 
	border-right-width:0; 
	border-left-color:#51A2C1; 
	position:absolute; 
	top:25px; 
	left:15px;
	transform:rotate(-270deg);
	-webkit-transform:rotate(-270deg);
	-moz-transform:rotate(-270deg);
	-o-transform:rotate(-270deg);
	-ms-transform:rotate(-270deg);
}
ボーダーを利用した見出し１
CSS
.heading8{
	position:relative;
	padding:9px;
	padding-left:15px;
	font-weight: bold;
	font-size: 18px;
	background-color: #51A2C1;
	color: #fff;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}

.heading8:before{
	content:''; 
	height:25px; 
	width:2px; 
	display:block; 
	position:absolute; 
	top:5px; 
	left:4px; 
	background-color:#fff;
	border-left: 4px solid #fff;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
ボーダーを利用した見出し２
CSS
.heading9{
	position:relative;
	padding:9px;
	padding-left:15px;
	font-weight: bold;
	font-size: 18px;
	background-color: #ccc;
	border: 1px dashed #51A2C1;
	border-left: 5px solid #51A2C1;
}
下線を付けた見出し
CSS
.heading10{
	position:relative;
	padding:9px;
	padding-left:0px;
	font-weight: bold;
	font-size: 18px;
}

.heading10:before{
	content:''; 
	height:15px; 
	width: 100%;
	display:block; 
	position:absolute; 
	top:18px; 
	left:0px; 
	background-color:#ccc;
	filter:alpha(opacity=20);
	-moz-opacity:0.20;
	-khtml-opacity: 0.20;
	opacity:0.20;
	box-shadow: 0px 3px 3px 3px rgba(255,255,255, 0.3) inset;
}

Related Posts

icon-categoryCSS icon-tag,

divider

Trackback URL

http://webnonotes.com/css/heading_sample/trackback/

No Comments Yet

Post a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>