見出しのCSSデザインの例

見出しのCSSデザインです。

H2の見出しデザイン

このような見出しを作るCSSは以下の通りです。

h2{
border-bottom: 1px solid #CCCCCC;
border-left: 7px solid #999999;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 1em;
padding: 0.6em 0.8em;
}

H3の見出しデザイン

H3は以下の通り。

h3:before{
background: none repeat scroll 0 0 #999999;
content: "";
height: 14px;
left: 4px;
position: absolute;
top: 4px;
width: 14px;
}
h3{
font-size: 1.18em;
font-weight: bold;
margin: 0 0 2em;
padding: 0 0.5em 0 1.6em;
position: relative;
}

H4の見出しデザイン

H4は以下の通り。

h4{
background: none repeat scroll 0 0 #EEEEEE;
border-bottom: 1px solid #999999;
border-top: 1px solid #999999;
font-weight: bold;
font-size: 1.16em;
margin-bottom:2em;
padding: 0.8em;
}

H5の見出しデザイン

H5は以下の通り。

h5{
border-bottom: 2px solid #999999;
font-weight: bold;
font-size: 1.14em;
margin-bottom:2em;
padding: 0 0.8em 0.5em;
}