最終更新日：2016年1月19日　作成日：2008年4月19日 | コメント(0)

ぞえぞえねっと > web制作 > 見出しのサンプル集

見出しのサンプル集

web制作で必ず必要になる見出し（h1～h7のタグ）
毎回、どうしようかと悩むときもあるので、見出しのサンプル集を作成しました。

線をつけるパターン

見出しのサンプル(下線)



見出しのサンプル(下点線)



見出しのサンプル(左線)



見出しのサンプル(下線・左線)



見出しのサンプル(下点線・左線)



見出しのサンプル(上線・左線)



見出しのサンプル(上点線・左線)



見出しのサンプル(上線・下線)



見出しのサンプル(上点線・下線)



背景色をつけるパターン

見出しのサンプル（色）



見出しのサンプル（色・下線）



見出しのサンプル（色・下線・左線）



見出しのサンプル（色・上線・下線）



利用の仕方

各サンプルの下のエリアの部分をコピーして自由にお使いください。
CSSに組み込んで利用する方がいいです。
例）background:#dddddd;color:#222222;font-size:100%;font-weight:normal;padding:3px 10px 3px 10px;line-height:150%;を使う場合
h2{
background:#dddddd;
color:#222222;
font-size:100%;
font-weight:normal;
padding:3px 10px 3px 10px;
line-height:150%;
}
（別のCSSが組み込まれている場合、見え方に違う場合があります。）

各装飾を変更したい場合

各部分の英数字を変えてください。

背景色を変えたい場合

background:#dddddd;の#ddddddの部分を変える。

フォントの色を変えたい場合

color:#222222;の#222222の部分を変える。

フォントのサイズを変えたい場合

font-size:100%;の80%の部分を変える。

フォントの太さを太くしたい場合

font-weight:normal;のnormalをboldに変える。

線を変えたい場合

上線を作りたい：border-top:1px solid #999999;
右線を作りたい：border-right:1px solid #999999;
下線を作りたい：border-bottom:1px solid #999999;
左線を作りたい：border-left:1px solid #999999;
線の太さを変えたい：1pxの部分変える。
線を点線に変えたい：solidをdottedに変える。
色を変えたい：#999999の部分を変える

この記事が参考になったらSNSにお願いします。

コメントする


< Wiiスーパーファミコンクラシックコントローラー 　 光源寺 駒込大観音 十一面観音像 四万六千日 ほおずき千成り市 4月は桜がキレイ（東京都文京区） >

web制作に関係のある記事一覧

Copyright ぞえぞえねっと All rights reserved