画像を使わずCSSで見出しをデザインする方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは。
シーサイドレーベルweb担当の飯野です。

今回は、H2タグなどの使用時に
画像を使わずCSSで見出しを
デザインする方法について解説します。

最近はホームページをスマホ対応にさせる為に
なるべくシンプルなデザインにしている
サイトが多い印象を受けます。

画像を使って表現するのもデザインの幅は広がりますので良いですが、
今までシンプルなデザインも画像を使っていた部分などを、
CSSでデザインするというのは、読み込み速度も上がりますので
オススメです。

いくつかパターンをご紹介しますので
ご参考になさって頂ければと思います。

gazo1

シンプルですが、下線を引いているだけですね。
線の色や太さを変えるだけでも、印象が変わると思います。

border-bottomで設定してあげているだけです。
ちなみに、marginは、下にスペースを開けたかったので
これからご紹介する全てのコードに入っています。

gazo2

こちらもとてもシンプルです。
左に罫線設定してあげているだけです。

border-leftで線の太さやスタイル、色を指定しています。
padding-leftでスペースを入れてあげると、罫線と出だしの文字の間に
スペースが出来ますので、見やすくなりますね。

gazo3

こちらは、背景色をグラデーション設定してあげています。
注意点がありまして、古いブラウザでは対応していない場合があります。
対処方法は別の機会にご紹介出来ればと思ってます。

backgroundがいくつもずらりと書かれていると思いますが、
これがグラデーションの設定になってます。

ちなみに簡単にグラデーションを設定出来るジェネレーターがあります。

今回はこちらのGrad3というジェネレーターを
使わせて頂きました。

Grad3

色を選ぶとコードが吐き出されるので、コピペして使います。

gazo4

こちらも背景色はグラデーションを設定してあります。
そして、角丸設定を行ってます。
古いブラウザでは対応していない場合がありますのでお気をつけ下さい。

背景色のグラデーションは説明させて頂きましたので、
角丸部分を説明します。

角丸はborder-radiusで設定できます。
数値を変更すると、丸くなる部分が変わりますので、
色々試してみて下さいね。

gazo5

こちらも、先ほどのデザインとほぼ同じです。
背景色にグラデーションを使っていて、角丸設定しています。
違いは、部分的に角丸にしているという所です。

border-radiusで、10px 10px 0 0;と書いてありますが、
左から順番に

・左上の角丸設定
・右上の角丸設定
・右下の角丸設定
・左下の角丸設定

となっていますので、それぞれ数値を変えれば、
結構色々なパターンを作る事が出来ます。

gazo6

こちらは、囲みボックスの回りに影を付けたデザインです。
こちらも古いブラウザでは表示されないこともあります。

影の設定はbox-shadowの部分です。

影の設定もジェネレーターがありますので、
簡単に設定出来ます。

今回はこちらのジェネレーターを使わせて頂きました。

box-shadowジェネレーター

以上、CSSでの見出しデザインを6個ご紹介させて頂きました。

こちらにデモページを用意しましたので
ご参考になさって下さい。

デモページ

今回ご紹介させて頂いたコードを元に色々組み合わせたりすれば、
デザインパターンは結構出来ると思います。

ご自身で様々なパターンを見つけてみて下さいね。

では、また来週お会いしましょう。

●3年ぶりに帰ってきた「藤田哲也の個別コンサルティング」

 ⇒ http://www.japan-forum.jp/sp/kojin.htm

mt

起業初年度1000万円、その後ゆるやかに年商3000万円までを目標に起業に向けて一歩を踏み出したい方向けの起業専門メルマガです。最新のノウハウを始め、セミナーや限定サービスのご案内をご希望の方は今すぐ下記フォームより、メインで使っているメールアドレスをご登録下さい。家族との時間を大切にしながら自由自在に収入を増やせる起業家になる方法を余すことなくお伝えいたします。

メールアドレス(必須)

コミュニティ