見出しのはなし

投稿日 2014/01/28

こんにちは、新年になってからだいぶ経ってしまいましての更新になってしまい、すみません…

numamaです。

本年も何とぞよろしくお願い致します。

今日は、見出しの話を少ししたいと思います。

 

ここのところ、レスポンシブなサイトについて考える機会が多くなってきた中で、

意外に難しいのが見出しのデザインかなと思うようになりました。

背景画像をボンと敷いてデザインできていたものが、そうではなくなっている気がします。

最近のレスポンシブなサイトを見ていても、グラデーションの背景画像で…というサイトはあまり見掛けないような…?

大体がシンプルなCSSのみのボーダーの装飾や、ちょっとしたアイコン画像が付いているとか、

太字なだけとか、余白で見出しを演出したりなどもありますね。

もし、見出しを画像で作ったり、

装飾にこだわりたい時は、見出しの文章量込みでデザインしながらページ作りということになるんでしょうか。

 

そんなことを考えながら…

レスポンシブで、CSSのみで、でも少し装飾がしてある…そんな見出しが作りたい…と思いながら

見つけたのがこのサイト…!

兵庫三菱自動車販売グループ

レスポンシブで作られているのですが、CSSでできそうでできない…!と悩んでいたデザインを、CSSで再現してありました!

こういう見出しです!

試乗車・展示車|兵庫三菱自動車販売グループ

 

どうやって再現しているのかというと…疑似要素を使うんですね。

:beforeとか、:afterってやつです!

これらの要素は応用がきくので色んなデザインができちゃいます!

疑似要素については先人の方々が沢山記事をあげています。

私自身のメモ代わりにご紹介を!

LIG/まだまだある!疑似要素と疑似クラスでできること

CSSの疑似要素を使った見出しデザイン

もうCSSで簡単なアニメーションもできてしまいますし、もはやアート…?なんて思ってしまいます。

ブラウザによっては上手く表示されないものもあるので気をつけねばですが!

 

ではでは、この辺で!

 

関連する記事

トラックバック

コメント

コメントする