CSSで作ったボタンに動きを付けよう

20160229a.PNG
こんばんは! Benです。今回もボタンの設置についてです。

ボタンですよ
前回、ご覧のように画像を使わずにCSSでボタンを作成しました。今回はもう少し実用的な細かいことをノートします。 ボタンですよ
まずは、皆さんの環境にもよりますが、そのままの状態でボタンの文字に下線が入らないようにします。これは、CSSにtext-decoration:none;を追加します。これは文字通り「文字の装飾」を指定するもので、下線のほか打消し線や点滅などの設定もできます。今回はnoneなので何も表示させません。デフォルトだとリンクのアンカータグ<a>には下線が付くのですが、この設定で下線を表示されなくなりました。でも、これだとマウスカーソルを合わせても何も動きがないので、ボタンのようにクリックすれば動きがあるのか、あるいはただの画像なのか判断がつきにくいです。

ボタンですよ
そこで、マウスカーソルを上にのせたときに動きがあるように設定しました。CSSの中で要素名の後に:hoverを入れてその中で指定します。これはマウスカーソルがその要素の上にきたときに、どんなスタイルにするかを指定するもので、これによって「クリックすると何か起きるんだな」というボタンであることをわかりやすくします。上記と違って、マウスカーソルを合わせると、背景のグラデーションが少し暗めになると思います。

ボタンの表記


.button{
  display:block;
  color:black;
  width:160px;
  height:32px;
  text-align:center;
  background: linear-gradient(to bottom, #f5f5f5, #bbbbbb);
  border-radius:8px;
  border:1px solid #888888;
  box-shadow: 2px 2px 1px 1px rgba(0,0,0,0.2);
  text-decoration:none;
  color:black;
  }

.button:hover{
  background: linear-gradient(to bottom, #dddddd, #888888); /* デフォルトよりちょっと濃いめにします */
  color:black;
  text-decoration:none;
  }
このように表示するには、HTML内とCSS内に上記のコードを記述します。ちなみにbackground: linear-gradientの中身はto bottomが下方向にという意味で、そのあとの2つ値は初めが開始色、次が終了色でそれぞれ赤緑青の順でRGBとして並んでいます。#から始まる指定では16進数を用いるので00からFFまでの256段階あります。#ddddddは全色やや明るいので明るいグレー、#888888は普通のグレーです。ちなみに真っ赤は#ff0000、青は#0000ffです。

通常、aタグはデフォルトがlinkで、マウスが載ったときはhover、クリックした瞬間はactive、既に訪れたところはvisitedと区別があります。今回はlinkとhoverの2つのみ設定しましたが、同じ内容になっても4つ全てスタイルシートの設定をするのがベストです。これは擬似クラスとよばれるものですが、便利なので是非覚えたい機能ですね。

この記事へのコメント


この記事へのトラックバック