|
|
|
HOME > HTML & CSSパーツ > CSSで装飾した見出しサンプル > 見出しサンプル５ |
|
見出しサンプル５ |
|
|
|
|
|
|
|
|
|
見出しに付箋のようなマークを付ける。 |
|
文字の下に点線を付ける設定。 |
|
サンプルはH3ですが、H2でも同じように使用できます。 |
|
|
|
|
|
サンプル |
|
|
|
|
|
設置方法 |
|
|
|
|
|
 CSS(スタイルシート）記述例 |
|
|
|
|
h3{
font-size:120%;
border-left: 8px solid #000066;/*文字の横に付箋のようなマークを入れる*/
border-bottom:dotted 1px #cccccc;/*文字の下に点線を入れる設定*/
width:600px;/*h3の横幅*/
line-height: 27px;/*h3の高さ設定*/
padding-left: 5px;
color:#333333; /*文字の色*/
margin-top: 1.0em;
margin-bottom: 0px;
}
|
|
|
|
|
border-left:8px solid #000066; ⇒8px 付箋のマークの太さ #000066 色 |
|
border-bottom:dotted 1px #cccccc; ⇒ dotted を solidに変えれば、直線になります。 |
|
|
|
|
|
HTML記述例 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HOME
