web屋の備忘録

ホームページ制作、webマーケティング、技術資料など

*

Hタグの見出しをCSSでかっこ良くデザインする

      2016/01/12

Hタグの見出しデザインは、CSSで見栄え良く!

(1)サンプル1(チェックマークの見出し)

サンプル1(チェックマークの見出し)

/**---------------------------------------------------------------
チェックマークの見出し
---------------------------------------------------------------**/
.headline_chk {
	position:relative;
	padding-left:30px;
	border-bottom:2px solid #ccc;
	font-weight: bold;
	font-size: 22px;
	line-height: 38px;
}
 
.headline_chk:after, .headline_chk: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);
}
 
.headline_chk: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
}

(2)サンプル2(矢印マークの見出し)

サンプル2

/**---------------------------------------------------------------
矢印マークの見出し
---------------------------------------------------------------**/
.headline_arrow {
	position:relative;
	padding-left:30px;
	border-bottom:2px solid #ccc;
	font-weight: bold;
	font-size: 22px;
	line-height: 38px;
}
 
.headline_arrow: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;
}
 
.headline_arrow:after{
	content:'';
	height:2px;
	width:10px;
	display:block;
	background:#00A8FF;
	position:absolute;
	top:15px;
	left:0px;
}

(3)サンプル3(ボーダーを利用した見出し1)

サンプル3

/**---------------------------------------------------------------
ボーダーを利用した見出し1
---------------------------------------------------------------**/
.headline1 {
	position:relative;
	padding:9px;
	padding-left:15px;
	font-weight: bold;
	font-size: 18px;
	background-color: #333;
	color: #fff;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
 
.headline1: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;
}

(4)サンプル4(ボーダーを利用した見出し2)

サンプル4

.headline2 {
	position:relative;
	padding:9px;
	padding-left:15px;
	font-weight: bold;
	font-size: 18px;
	background: linear-gradient(to bottom, #FCFCFC 0%, #FCFCFC 50%, #F2F2F2 50%, #F2F2F2 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
	border: 1px solid #CCCCCC;
	color: #333;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
 
.headline2:before{
	content:'';
	height:25px;
	width:2px;
	display:block;
	position:absolute;
	top:5px;
	left:4px;
	background-color:#fff;
	border-left: 4px solid #CC0000;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}

(5)サンプル5(ボーダーを利用した見出し3)

サンプル5

/**---------------------------------------------------------------
ボーダーを利用した見出し3
---------------------------------------------------------------**/
.headline3 {
	position: relative;
	margin: 0 0 1.5em;
	padding: 0.8em;
	background: #7FC8E2;
	color: #fff;
	font-size: 1.143em;
	font-weight: bold;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
 
.headline3:after{
	position: absolute;
	bottom: -15px;
	left: 10%;
	z-index: 90;
	margin-left: -15px;
	border-top: 15px solid #7FC8E2;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 0;
	content: "";
}

 - HTML・CSS