簡単！シンプルで綺麗【見出しの作り方】

tatuo — Mon, 12 Oct 2009 05:51:27 +0000

サイト制作をしていて、簡単に見出しを綺麗にすることって意外と
難しいですよね。headerに使用する画像ならば、多少時間はかかっても
良いのですが、見出しの画像まで作っていると非常に手間がかかります。

【今回、CSSを用いて簡単に、シンプルではありますが、どんなサイト
デザインにも合いそうなものを紹介します。】既に既出の部分もあるでしょうが、備忘録と言うことで。

全て画像は用いていません。CSSでコントロールしてますので、シンプルにまとまっています。逆にシンプルだからこそ新鮮にうつります。

baseとなる、CSSはこちらになります。お使いのスタイルシートにでも張りつけて、ご自分のお好みに
合わせて細かく調整してみてください。

h2{
margin: 0 0 1.7em 0;
padding: 0.1em 10px;
border-top: 0px solid #000;
border-right: 0px solid #000;
border-bottom: 1px solid#000;
border-left: 2px solid #000;
background: #fff;
font-size: 1.4em;
font-weight: bold;
line-height: 1.4em;
color: #000;
}

簡単な説明だけしておきます。
borderの部分は、枠のことです。値を大きくすれば太くなります。

font-size　文字の大きさ
line-height　高さ

一度全部の値を変更してみて、ご自分で確認してみると分かりやすいと思います。

破線や、点線で表現しようと思えば、borderの部分を変更すれば可能。

dashed(破線)
dotted(点線)

backgroundの部分に、好きな色を指定すれば、下記のようにも変更できます。
若干青みをかけてます。

アイデア次第では、他にも色々面白そうな見出しが作れると思いますので、是非挑戦してみてください。

WordPress【ワードプレス】初心者の部屋～使い方知っとこ？ » css

簡単！シンプルで綺麗【見出しの作り方】

見出し関連記事一覧