【CSSコピペ】カーソルを合わせるとふわっと浮かぶアニメーションカスタマイズ
前回の【CSSコピペ】カーソルを合わせると下線がスーッて伸びるアニメーションカスタマイズが空前絶後の好評だったので、またしても”カーソルを合わせると”シリーズｗ
しかもCSSコピペ。しかもアニメーション。だったらまとめて「CSSだけで出来る！ホバーアニメーション色々まとめ」みたいな記事にせんかい😂
ネタと需要があれば…そのうちやろうと思いますm(_ _)m
前置きはさておき、さっそく本題へ参りましょう！
”ふわっと”こそマテリアルデザインの代名詞
本題の実装作業へ入る前に、まず”ふわっと”がなぜ今風なのか？それを今風たらしめる「マテリアルデザイン」とは何なのか？の説明をさせて下さい。
ただ単にパクるだけでなく、どうせならデザインのノリとか意味とか、オークニ的な解釈とかを理解した上でパクって頂ければ尚良きかと。
もちろん面倒くさい場合は、鬼のスクロールで飛ばして頂いて結構です（ちなみにクソ長いですｗ）
マテリアルデザインとは？
webデザインの世界で昨今もっぱら叫ばれている「マテリアルデザイン」。いや、誰も叫んではいない。
これは2014年からgoogleが叫びだしたデザインであり、特にスマホビュー、アプリにおいてはスタンダードな考え方となっています。
”特にスマホビュー”とは言いいましたが、web業界のスタンダードはもはやスマホであり、モバイルファースト、モバイルマストは当たり前の状況です。
であれば、スマホで常識的に使われているマテリアルデザインは、当然PCでも併用されるべきであり、イケてるサイトではだいたいどこかしら取り入れられています。
では、肝心なgoogleが叫びだした「マテリアルデザイン」とは具体的に何なんだ？これを懇切丁寧に解説してくれるのが、日本のマテリアルデザインの大御所サルワカだ。
サルワカ的マテリアルデザイン
マテリアルデザインの伝道師。マテリアルデザインのマスター。時と場合によってはマテリアルデザインではなく、サルリアルデザインと言っても語弊がないレベルでマテリアルな人だ。
ちょっと、何言ってるか分かりません…
※ちなみにサルワカ自体は特定の個人ではなく、複数人で制作されています
そんなサルワカにて、マテリアルデザインとは？的な説明がされているので、大々的に抜粋していこう。
その1. 現実の物理法則を取り込む
マテリアルデザインでは「実際に触れることのできる現実世界」に基づいた表現がされます。
その2. 印刷物向けデザインの基本要素を取り込む
マテリアルデザインは、紙に印刷するようなイメージで考えると、とらえやすくなります。
その3. 連続性のある動き
ユーザーの操作に対して、直感的に分かりやすいアニメーション（モーション）で反応します。
その4. 厳密なルール
上記の3つのポイントを自分なりのとらえ方で実践してもマテリアルデザインにはなりません。Googleのガイドラインで厳密なルールが決まっており、それをできる限り守ることが重要です。「影のつけ方」から「ボタンの形」「紙の重なり方」「レイアウト」まで嫌になるほどに細かいルールが用意されています。
ちょっと、何言ってるか分かりません…
いや、これは煽ってるとかそーゆーのではなく、ガチでむずかしいｗ
物理法則てなんぞや。基本要素てなんぞや。googleのガイドラインてなんぞや。状態。
唯一理解できたのは、アニメーションとリアリティ。
オークニ的マテリアルチックデザイン
上記の細かい原理原則は一応目を通します。googleのガイドラインも読みました。それを踏まえて、改めてマテリアルデザインとはなんぞや。一言で言うてみ。
と問われるのであれば、僕はこう答えます。
ふわっと。
これに尽きます。紙の重なりのようにリアリティのある影をアニメーションによって演出。これこそがマテリアルデザインの最大の特徴です。
そしてそれを究極的に一言で表すのが、「ふわっと」です。
ふわっとデザインの誕生
サルワカは言いました。
上記の3つのポイントを自分なりのとらえ方で実践してもマテリアルデザインにはなりません。Googleのガイドラインで厳密なルールが決まっており、それをできる限り守ることが重要です。
き…厳しいぃぃぃ！😭
なんとこれではマテリアルデザインと言わせてもらえない。ではなんて呼べばいいのか。フラットデザインか？
いや違う。フラットデザインは平面が命。リアリティとか影とか言語道断。
ではどーする。ふわっとデザインか。マテリアルデザインにもフラットデザインにも属させてもらえないこの「ふわっと」重視のデザインを、まさかそのまま「ふわっとデザイン」と呼ぶのか。
フラットデザインとマテリアルデザインの狭間で、唯一のアイデンティティが「ふわっと」だけ。その名もふわっとデザイン。まるでフラットデザインを軽くディスっているようなそのネーミング。
悪くない。
つまりここにて、ふわっとデザインの爆誕です😂
ふわっとの作り方
さて、ここまでで既に2,000文字超えているという事実。いったい何人が読んでこれたか。このタイトルでこの内容。まさに詐欺だ。
さっさとCSS教えんかい。
そんな怒号が今にも聞こえそうだ。
CSS
てなわけで、チャチャっといきますｗ
はてなブログの場合場所は
管理画面より、「デザイン」→「カスタマイズ」→「デザインCSS」です。
で、今回は人によって浮かせたいものが違ってくるので、ここで一概に専用のコピペを出すことが難しいです＞＜
なので、サンプルと説明だけします。
サイドバー
たとえば、サイドバーの人気記事とか、関連記事とか、最新記事とかのリストありますよね？
そこでカーソルを合わせる度にフワフワさせたい場合
これをCSSの最後に記述します。
〜:hoverというのが、カーソルを合わせた時の挙動になります。ぶっちゃけ、この〜:hoverを使えば何でもふわふわできます。
トップページの記事一覧
たとえばトップページの記事一覧。ここをふわふわさせたい時。特に「ZENO-TEAL」テーマでカード型にしてるブログとか相性バツグンなんですが、そうじゃなくてもたぶんいけます。
記事一覧の場合、.page-index .entryを:hoverさせたいので、このようになります。中身はサイドバーと全く同じなので、数値とか色とかを適当にカスタマイズすればよいでしょう。
その他
それ以外にもボタンでも画像でも何でも、とにかく浮かせたい要素に対して〜:hoverというものを使い、上記のCSSをコピペする。これでだいたいおｋです。
つまり、これであなたもふわっとデザインの使い手ですね！😂
まとめ
最後のサラッと感ｗ
いや、サラッとしているようですが、ふわっとさせるためにはリアルにこれだけのコードで実装可能です。
いろんな箇所に応用もでき、自分なりのカスタマイズもし放題です。そして何より、とりあえずふわふわさせてるだけでナウい感じ全開です！
これは使わない手はありません。
「Minimalism」ならぬ「フワリズム」ってテーマでも作ろうかな😂
