3パターンのシンプルな見出し & CSSで文字乗せ


シンプルな見出しです。矢印とひし形とドット模様の3パターンあります。
gifの300*36で作りました。
見出しはコンテンツの横幅に依存する事が多いような気がするので、難しいです。

▲3パターンのシンプルな見出し のダウンロードはこちら (1058)

当サイトで紹介している素材はすべてオリジナルのものです。個人サイトから企業サイト、ECサイト用の素材作りにも注力しています。
アイコン、ボタン、メニュー、見出し素材など、WEBサイト制作に必要な素材がすべて無料でご利用頂けます。商用利用も加工利用も自由にしていただいて構いません。是非ご利用下さい!

CSSで文字を載せるには?

■外部CSSに記述する

HTML

<p class="sample">ここに文字</p>

CSS

.sample {
background: url(imageurl.gif) 0 0 no-repeat;
width: 300px;
height: 36px;
padding: 10px 0 0 25px;
}

■インラインスタイルで記述

HTML

<p style="background: url(imageurl.gif) 0 0 no-repeat; width: 300px; height: 36px; padding: 10px 0 0 25px;">ここに文字</p>

ここに文字

こんな感じになります。他にもhead内にstyle要素を埋め込む記述方法もあります。インラインスタイル属性はメンテナンス性が悪くオススメしません。さらにXHTML1.1では非推奨となっています。外部ファイルに記述するようにしましょう。

タグ: , ,

エントリーに対するコメントがありましたらお聞かせ下さい。
以下のURLでトラックバックも受け付けております。

http://chaosmode.info/archives/435/trackback/