こんにちは。
シーサイドレーベルweb担当の飯野です。
今回は、H2タグなどの使用時に
画像を使わずCSSで見出しを
デザインする方法について解説します。
最近はホームページをスマホ対応にさせる為に
なるべくシンプルなデザインにしている
サイトが多い印象を受けます。
画像を使って表現するのもデザインの幅は広がりますので良いですが、
今までシンプルなデザインも画像を使っていた部分などを、
CSSでデザインするというのは、読み込み速度も上がりますので
オススメです。
いくつかパターンをご紹介しますので
ご参考になさって頂ければと思います。
シンプルですが、下線を引いているだけですね。
線の色や太さを変えるだけでも、印象が変わると思います。
|
1 2 3 4 |
.des1{ border-bottom:3px solid #00C; margin-bottom:40px; } |
border-bottomで設定してあげているだけです。
ちなみに、marginは、下にスペースを開けたかったので
これからご紹介する全てのコードに入っています。
こちらもとてもシンプルです。
左に罫線設定してあげているだけです。
|
1 2 3 4 5 |
.des2{ border-left:5px solid #00C; padding-left:10px; margin-bottom:40px; } |
border-leftで線の太さやスタイル、色を指定しています。
padding-leftでスペースを入れてあげると、罫線と出だしの文字の間に
スペースが出来ますので、見やすくなりますね。
こちらは、背景色をグラデーション設定してあげています。
注意点がありまして、古いブラウザでは対応していない場合があります。
対処方法は別の機会にご紹介出来ればと思ってます。
|
1 2 3 4 5 6 7 8 9 10 11 |
.des3{ color:#fff; padding-left:10px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #82bcea), color-stop(0.50, #408fd3), color-stop(0.50, #1375ca), color-stop(1.00, #3c669c)); background: -webkit-linear-gradient(top, #82bcea 0%, #408fd3 50%, #1375ca 50%, #3c669c 100%); background: -moz-linear-gradient(top, #82bcea 0%, #408fd3 50%, #1375ca 50%, #3c669c 100%); background: -o-linear-gradient(top, #82bcea 0%, #408fd3 50%, #1375ca 50%, #3c669c 100%); background: -ms-linear-gradient(top, #82bcea 0%, #408fd3 50%, #1375ca 50%, #3c669c 100%); background: linear-gradient(to bottom, #82bcea 0%, #408fd3 50%, #1375ca 50%, #3c669c 100%); margin-bottom:40px; } |
backgroundがいくつもずらりと書かれていると思いますが、
これがグラデーションの設定になってます。
ちなみに簡単にグラデーションを設定出来るジェネレーターがあります。
今回はこちらのGrad3というジェネレーターを
使わせて頂きました。
⇒ Grad3
色を選ぶとコードが吐き出されるので、コピペして使います。
こちらも背景色はグラデーションを設定してあります。
そして、角丸設定を行ってます。
古いブラウザでは対応していない場合がありますのでお気をつけ下さい。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.des4{ color:#fff; padding-left:10px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #7cff7f), color-stop(0.50, #4a944b), color-stop(0.50, #2c7a2d), color-stop(1.00, #52d352)); background: -webkit-linear-gradient(top, #7cff7f 0%, #4a944b 50%, #2c7a2d 50%, #52d352 100%); background: -moz-linear-gradient(top, #7cff7f 0%, #4a944b 50%, #2c7a2d 50%, #52d352 100%); background: -o-linear-gradient(top, #7cff7f 0%, #4a944b 50%, #2c7a2d 50%, #52d352 100%); background: -ms-linear-gradient(top, #7cff7f 0%, #4a944b 50%, #2c7a2d 50%, #52d352 100%); background: linear-gradient(to bottom, #7cff7f 0%, #4a944b 50%, #2c7a2d 50%, #52d352 100%); border-radius: 10px; margin-bottom:40px; } |
背景色のグラデーションは説明させて頂きましたので、
角丸部分を説明します。
角丸はborder-radiusで設定できます。
数値を変更すると、丸くなる部分が変わりますので、
色々試してみて下さいね。
こちらも、先ほどのデザインとほぼ同じです。
背景色にグラデーションを使っていて、角丸設定しています。
違いは、部分的に角丸にしているという所です。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.des5{ color:#fff; padding-left:10px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #ea4945), color-stop(1.00, #9f0000)); background: -webkit-linear-gradient(#ea4945, #9f0000); background: -moz-linear-gradient(#ea4945, #9f0000); background: -o-linear-gradient(#ea4945, #9f0000); background: -ms-linear-gradient(#ea4945, #9f0000); background: linear-gradient(#ea4945, #9f0000); border-radius: 10px 10px 0 0;/* 左上→右上→右下→左下の順 */ margin-bottom:40px; } |
border-radiusで、10px 10px 0 0;と書いてありますが、
左から順番に
・左上の角丸設定
・右上の角丸設定
・右下の角丸設定
・左下の角丸設定
となっていますので、それぞれ数値を変えれば、
結構色々なパターンを作る事が出来ます。
こちらは、囲みボックスの回りに影を付けたデザインです。
こちらも古いブラウザでは表示されないこともあります。
|
1 2 3 4 5 6 7 8 |
.des6{ padding-left:10px; background: #9CC; border:2px solid #fff; box-shadow:rgba(173, 173, 173, 0.65098) 0px 0px 5px 2px; -webkit-box-shadow:rgba(173, 173, 173, 0.65098) 0px 0px 5px 2px; -moz-box-shadow:rgba(173, 173, 173, 0.65098) 0px 0px 5px 2px; } |
影の設定はbox-shadowの部分です。
影の設定もジェネレーターがありますので、
簡単に設定出来ます。
今回はこちらのジェネレーターを使わせて頂きました。
以上、CSSでの見出しデザインを６個ご紹介させて頂きました。
こちらにデモページを用意しましたので
ご参考になさって下さい。
【 デモページ 】
今回ご紹介させて頂いたコードを元に色々組み合わせたりすれば、
デザインパターンは結構出来ると思います。
ご自身で様々なパターンを見つけてみて下さいね。
では、また来週お会いしましょう。
●３年ぶりに帰ってきた「藤田哲也の個別コンサルティング」
