個別記事のページです

2015年1月 3日(土)
このエントリーをはてなブックマークに追加

CSS3を使ってかっこいい見出しを作る

ホームページでテーマごとに話を区切ったり項目ごとに付けたりなどで重宝する見出しですが、
見出しのデザインに困る方もいらっしゃるのではないかと思います。


面倒だと、とりあえず背景色を塗りつぶして見出しっぽく見せています。
ださい見出しの例


勿論、フリー素材でかっこいい見出し画像を配布しているサイトも沢山ありますが、
画像だとCSSで読み込むのが手間だと感じることも。


そこで今回はCSS3だけで簡単にかっこよく、特に企業サイトに最適な見出しの作り方をご紹介します。


まずは土台となる見出しの現状を確認

■html

<h2 class="title">ホームページ作成の最新情報</h2>


■CSS。見出しとは思えないシンプルさ。

.title{
font-size:16px;
line-height:16px;
color:#333;
letter-spacing:2px;
padding:12px 12px 8px 12px;
background:#0FF;
}


htmlは触らずに、CSSにどんどん設定を増やして見出しを作っていきます。


見出しの背景色を大幅チェンジ

まずは見出しの色をグラデーションにして印象を大きく変えました。
(色が薄めなので少し分かりにくいかもしれません...)
グラデーションを付けた見出し


CSSはbackgroundの記述を変更しただけ。

.title{
font-size:16px;
line-height:16px;
color:#333;
letter-spacing:2px;
padding:12px 12px 8px 12px;
background: -webkit-linear-gradient(#ffffff, #F6F6F6);
}


上に色の付いた線を付ける

次に、見出しっぽさを出すために上に実線を付けます。
劇的に見出しっぽくなった

これだけでも、かなり見出しっぽくなってきました。


CSSにはborder-topの記述を追加しただけ。

.title{
font-size:16px;
line-height:16px;
color:#333;
letter-spacing:2px;
padding:12px 12px 8px 12px;
background: -webkit-linear-gradient(#ffffff, #F6F6F6);
border-top: 3px solid #023793;
}


下線を付けて見出し感をプラス


ワンポイント付けて見出しのデザインをおしゃれに

CSSには更にborder-bottomの記述を追加しただけ。

.title{
font-size:16px;
line-height:16px;
color:#333;
letter-spacing:2px;
padding:12px 12px 8px 12px;
background: -webkit-linear-gradient(#ffffff, #F6F6F6);
border-top: 3px solid #023793;
border-bottom: 1px solid #E0E0E0;
}


3ステップでかっこいい雰囲気の見出しが完成しました!


しかも今回も3ステップ!
むしろ以前投稿した"デザインが苦手でもCSSなら3ステップでボタンが作れる"よりも更に簡単です。


ホームページにかっこいい見出しを入れたいけど画像で用意するのも面倒だし、
でもそれなりにきちっと見せたい...などお悩みの方は是非お試しください。

書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ