|
|
|
HOME > HTML & CSSパーツ > CSSで装飾した見出しサンプル > 見出しサンプル６ |
|
見出しサンプル６ |
|
|
|
|
|
|
|
|
|
薄いグレーの背景に#ccccccで枠を付けています。 |
|
文字の前に見出し用のアイコンを置く設定にしています。 |
|
サンプルはH3ですが、H2でも同じように使用できます。 |
|
|
|
|
|
サンプル |
|
|
|
|
|
|
|
|
|
|
使用している画像 |
|
画像をご利用になる場合は、右クリックで |
|
 |
|
「名前を付けて画像を保存」でご自身のパソコンに保存して |
|
10.gif |
|
からご使用下さい。※リンクでの使用は禁止です。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
カラーバリエーション |
|
|
|
|
|
|
|
|
|
 |
 |
 |
デザインに合わせて、ご自由に変更して下さい。 |
|
 |
 |
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
設置方法 |
|
|
|
|
|
 CSS(スタイルシート）記述例 |
|
|
|
|
div.menu{
width: 600px; /* 見出しの幅 */
margin-bottom: 10px;
padding: 3px 4px;
background-color: #ebebeb;/*背景の色 画像に変更もできます*/
line-height: 27px;
border: solid 1px #cccccc; /* 枠の線 */
}
div.menu h3 {
margin: 0;
padding-top: 3px ;
padding-left:16px;
background: url(bar/10.gif) no-repeat 0px 5px; /* 見出しの背景 */
font-size: 120%; /* 見出しの文字サイズ */
color:#111111;/*文字の色*/
line-height: 100%;
}
|
|
|
|
|
|
|
|
|
HTML記述例 |
|
|
|
|
<div class="menu">
<h3>見出しサンプル６</h3>
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HOME
