人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

Chrome DevTools を使ってみよう (18) 実践編 / リンクボタンのデザイン研究(:hover)

2017年 08月 18日
エキサイトブログのトップページは、デザイン工夫の良い見本です。 今回は、DevToolsを使って、このページを調べてみます。 以下のリンク先をサンプルにしているので、Chrome DevToolsで開きながら読まれると、より判り易いと思います。



 リンクボタンのデザイン 


デザイナーは小さな所に気を使い、それとなくスマート感を演出します。 ページの右上のユーザーの利用頻度の高いメニューボタンは、マウスポインタを乗せると「ふわっと淡く」なります。 これも、そんな演出のひとつです。

Chrome DevTools を使ってみよう (18) 実践編 / リンクボタンのデザイン研究(:hover)_a0349576_12394166.png

このボタンを右クリックしてDevToolsを開くと、下の様に「<span>記事を書く</span>」がターゲットになって開きます。

Chrome DevTools を使ってみよう (18) 実践編 / リンクボタンのデザイン研究(:hover)_a0349576_12413563.png

しかし、右ウインドウのCSSを見ても、アイコンや文字の色などの指定がなく、どうやら親要素の方にそれが有りそうです。 そこで親要素の「a」要素にターゲットを移してみました。( a要素を親にしているのは、このボタンでリンク先を開く様にしたからで、これは一般的なボタンのHTML構造です)

Chrome DevTools を使ってみよう (18) 実践編 / リンクボタンのデザイン研究(:hover)_a0349576_12474094.png

a要素のCSS(赤枠)に、ブルーのcolor指定が出て来て、ここでボタンの色を指定している事が判ります。 試しに「color」プロパティのチェックを外すと、ボタン全体が黒になります。

Chrome DevTools を使ってみよう (18) 実践編 / リンクボタンのデザイン研究(:hover)_a0349576_12593252.png

「color」プロパティの下に「transition」プロパティがあります。 これは、変異を次第に変化する様に表示し、アニメーション効果を演出するものです。 その「値」は「0.2秒」の意味で、これが「ふわっ」の効果の元です。 これもチェックを外すと、効果の意味が良く判ります。

「淡くなる」の指定は「:hover」時の状態です。 これはToolsの右上の「:hov」からアクセスしない限り、内容を見たり編集する事が出来ません。 下図は「:hov」→「□:hover」にチェックを入れた状態です。

Chrome DevTools を使ってみよう (18) 実践編 / リンクボタンのデザイン研究(:hover)_a0349576_13043301.png

右ウインドウに「a:hover」のCSSが表示されました。 ここのプロパティが、マウスポインタを乗せた時の演出です。 2個のプロパティのチェックを外すと、その方法が判ります。

Chrome DevTools を使ってみよう (18) 実践編 / リンクボタンのデザイン研究(:hover)_a0349576_13074051.png

「opacity」を外すと「淡く」なっていたアイコン・文字が明瞭になります。 このプロパティが「淡く見せる」の指定です。 また「text-decoration: none;」の指定は、リンク文字の下に付く下線を消していた様です。 確かに下線が出ると汚く見える事が多いですから。

「記事を書く」だけブルーにしたのは、右側の「ブログ管理」「メニュー」はメニュー表示になるが、「記事を書く」は編集画面に飛び「ちょっと違う」という所を明らかにしたかったのだと思います。 このボタンに設定された幾つかの工夫は、いずれもブログスキンのアレンジにも利用できますね。




この記事はカテゴリ「スキン編集」にトラックバックしています。



by Ataron | 2017-08-18 13:34 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。