見出しのCSSデザインです。
H2の見出しデザイン
このような見出しを作るCSSは以下の通りです。
|
1 2 3 4 5 6 7 8 |
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は以下の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
h2::after { background: #2e3192 none repeat scroll 0 0; content: ""; height: 1.4rem; left: 0.3rem; position: absolute; top: 0.4rem; width: 5px; } h2 { border-bottom: 1px solid #222373; color: #222373; font-family: "ＭＳ Ｐゴシック","ＭＳ ゴシック",sans-seri; font-size: 1.5rem; font-weight: bold; margin: 0 0 1rem; padding: 0 0 0.2rem 1.2rem; position: relative; } |
H4の見出しデザイン
H4は以下の通り。
|
1 2 3 4 5 6 7 8 9 |
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は以下の通り。
|
1 2 3 4 5 6 7 |
h5{ border-bottom: 2px solid #999999; font-weight: bold; font-size: 1.14em; margin-bottom:2em; padding: 0 0.8em 0.5em; } |
