画像などを使わずにCSSだけで見出しを装飾する。見出しは一般的に画像などを使って表現することが多いですが、CSSのみで表現しておくと負荷も少なく、管理更新もしやすいので非常に便利です。

CSSだけで見出しのサンプル

h3 {
	padding: 0px 0px 8px 15px;
	font-size: medium;
	font-weight: bold;
	color: #333333;
	border-bottom: 2px solid #ff3300;
}

CSSだけで見出しのサンプル

h3 {
	background:#F5F5F5;
	padding: 5px 0px 5px 15px;
	font-size: medium;
	font-weight: bold;
	color: #333333;
	border-top: 3px solid #ff3300;
	border-bottom: 1px solid #CCCCCC;
}

CSSだけで見出しのサンプル

h3 {   
    border-left: 8px solid #ff3300;
    border-bottom: 1px solid #ff3300;
    padding: 5px 0px 5px 15px;
    font-size: medium;    
    font-weight: bold;
    color: #333333;
}

CSSだけで見出しのサンプル

h3 {
	background:#F5F5F5;
	padding: 5px 0px 5px 15px;
	font-size: medium;
	font-weight: bold;
	color: #333333;
	border-bottom: 3px solid #ff3300;
	border-left: 2px solid #CCCCCC;
}

CSSだけで見出しのサンプル

h3 {
	border-left: 8px solid #ff3300;
	background:#F5F5F5;
	padding: 5px 0px 5px 15px;
	font-size: medium;
	font-weight: bold;
	color: #333333;
	border-bottom: 1px solid #CCCCCC;
}

CSSだけで見出しのサンプル

h3 {   
    border-left: 8px solid #ff3300;
    background:#F5F5F5;
    padding: 5px 0px 5px 15px;
    font-size: medium;    
    font-weight: bold;
    color: #333333;
}

CSSだけで見出しのサンプル

h3 {   
    border-left:#ff3300 8px solid;
    border-right:#cccccc 1px solid;
    border-bottom:#cccccc 1px solid;
    border-top:#cccccc 1px solid
    background:#F5F5F5;
    padding: 5px 0px 5px 15px;
    font-size: medium;    
    font-weight: bold;
    color: #333333;
}

CSSだけで見出しのサンプル

h3 {
	padding:5px 0 5px 15px;
	background: #FFCC99;
	border-bottom:1px solid #FF6600;
	border-top:1px solid #FF6600;
	font-size: medium;
	font-weight: bold;
	color:#333333;
}

CSSだけで見出しのサンプル

h3 {
	padding:5px 0 5px 15px;
	background: #EFEFEF;
	border-bottom:1px solid #FF6600;
	border-top:1px solid #FF6600;
	font-size: medium;
	font-weight: bold;
	color:#333333;
}

参考にさせて頂いたサイト

• CSSの見出しサンプル : ユージック
• [使えるCSSテクニックVol.2] CSS を使った見栄えの良い見出し | バシャログ。

CSS | HTML | 装飾 | 見出し