読了時間: 644(約4,045文字)

[CSS]アニメーションを使った見出しデザイン13個!! 動く見出しで差を付ける!! スマホ対応

komikan0108

この記事の対象となる方

  • CSSに興味のある方
  • 見出しでブログを魅力的にしたい方
  • デザインが好きな方
  • 新しいものに興味がある方

この記事をまとめようと思ったきっかけ

見出しのデザインというのはとても重要です。

実際に、多くの見出しデザインを考えている方がいますよね。

CSSはデザインをする上でとても重要で、CSS3が出るまでは静的なものがほとんどでしたが、擬似セレクタ、transitionやanimationが追加されてからというもの、CSSのみで動的なサイトを作ることが可能になってきました。

今回はアニメーションを使用した見出しをいくつか作ってみましたので、ぜひ参考にしてみてください。


今夜はクリスマス!!

m14とありますが、ここは自由に変更していいですし、見栄えが良さそうな順から書いてるので、数字は特に気にしないで下さい。

:beforeと:afterで左上に色の違う四角形を2つ作り、その位置を@keyframesで入れ替えています。仕組みはとてもシンプルですが、少し動きが加わるだけで、ちょっと印象が変わるということが、わかりやすい見出しだと思います。

 

 

今夜はクリスマス!!

右から矢印があらわれて、ぐっと伸びてまた戻ります。親要素をoverflow:hiddenにし、三角形を一つ作り半分を隠します。その三角形を@keyframesで右から移動させると同時、height:1pxのボックスを右から伸ばします。

シンプルながら色々と応用が効きそうな感じでした。矢印がぐるっと一周するのも面白いなと思います(作れってな)。

 

今夜はクリスマス!!

これは星をイメージしてみました。そのままですね。

アニメーションとしては、やっぱりそんな難しくないです。:beforeと:afterで星を作って、ひとつを固定してtransformで360度回転し、もうひとつを回転させながら適当に移動させます。

@keyframesの内容をもっと凝ったものにすれば、面白い動きになるでしょう。

星は一応「utf-8」なら文字化けしないと思うんですが、どうですかね。見出しとしては、ブログなんかでわりといい感じかなと思います。

 

冬景色

冬景色というのは、なんとも微妙ですね。これから夏がくるというのに(笑)

これは、わりと綺麗な見出しに仕上がった気がします。アニメーションを使った見出しの場合、こういう、なんというか淡い感じというか、スタイリッシュ(?)なものがかっこいいのではないかと思いますね(僕のセンスがないだけ)。

アニメーション的には、これも簡単で、@keyframesを使って、:beforeと:afterで作ったheight:1pxのボックスをそれぞれ左右に流しています。親要素をoverflow:hiddenにすることで。はみ出していくのを見えなくしてるんですね。

 

冬景色

色違いです。意外と気に入ったので、僕の好きな青色で作りました。厳密には天色ですね。カラーコードは#2ca9e1です。見出し的には、男女という感じがしますかね。ピンクと青で。僕は青が好きです。

 

冬景色

上の2つの元となった見出しですね。先にこれを作りました。上下ともに、左右から伸びてくるだけのシンプルなアニメーションです。上の2つは消えていきますが、これもこれで面白いかと思います。

 

紙と髪と神と上

「」が右下と左上で入れ替わるアニメーションですね。文系の見出しにいいかなと思い、作りました。もう少し工夫してもよかったけど、それはまたぼちぼちとしようかなと思います。

一定時間で右下と左上でくるっと回るとか、色が変わるとか、そういうのも面白いと思うので、興味のある方はぜひ作ってみて下さい。

 

さくら乱れし宵闇に

十字架を両サイドに配置して、transformで360度回転させた見出しです。アニメーション的にはとても簡単です。小説などのタイトルに、こういうのもありではないかと思いますね。

十字架を様々な図に変えて活用してみて下さい。

 

ポイント

ちょっとかわいい系を目指しました。下のハートとですね。

文字を白くするのもありだと思います。図形は好きに変えて大丈夫です。女性のブログやまとめなどで、使えるのではないかと。

 

ポイント

上と同じ360度回転しただけのアニメーション見出しです。ハートのが良いですね。

 

冬景色

3つ目の星とアニメーションはほぼ同じですね。図形とデザインを変えたら十分印象が変わります。見出しとしては、かわいい部類ですかね。

 

冬景色

円を作って、box-shadowで影を伸ばします。その影を切り替えていくアニメーションですね。一応、春夏秋冬をイメージしてみました。色的に。色々と改良してみて下さい。

 

ここが大事!!

これで最後です。左のborder-leftを太めにとって、というデザインの見出しをまあまあ見かけるので、そのborder-bottom(厳密にはというか、実際はborder-bottomでなく、:beforeで作ったボックスを伸縮してるだけ)にアニメーションをかけた感じにしました。

アニメーション自体は地味ですが、静的な見出しよりは動的な方が見応えがあります。

 

まとめ

これでだいたい終わりですね。.m4がないのは諸事情により消したためです(笑)

そのうち、追加するかもしれません。

面白かったでしょうか。静的な見出しもいいですが、アニメーションで動きを付けた見出しも面白いかな、と思います。この記事を読んで、そう思ってくださる方がいると嬉しいです。

アニメーションはけっこう面白いので、色々と遊んでいるのですが、これが何かの一助になると幸いですね。新しいデザインが増えていく昨今、フラットデザインも好きですが、こういうのもどうかなと思ってみて作った次第です。自分自身、作っていて勉強になりました。そんな難しいことはしてませんが(笑)

transitionを使った見出しも考えてはいたのですが、ホバー時などにしか機能しないというのが見出しとしては致命的なので、必然animationになったわけですね。

ここにあげてあるコードは自己責任で自由にお使い下さい。

コメント欄は設けていませんが、分からないところがあれば、いまはやってないご依頼フォームからメールを送ってくれても構いません。多過ぎたらコメントフォームを設置します。

 

追記:

<h1>にclassをつけていますが、例えばWordpressでテーマを使っている人はそのテーマで適用されているスタイルがあるので、うまくいかないかもしれません。そのときは、テーマのCSSを確認してください。かくいう僕もそれで、一応<h1>で紹介していますが、僕は実際は<div>で括ってます。表示がちょっとうまくいかないという方は、marginとかpaddingとかちょいといじってみてください。

ベンダープレフィックスはつけていません。

一応スマホで確認はしています。iphone等はしていません。

関連記事