3

【実践】CSSだけでボタンのロールオーバーをデザインしてみよう!


Webサイトを作っていると、どうしても画像頼りになってしまいがちですが、
画像が多ければ多いほどWebページの読み込みが遅くなってしまいます。

ブロードバンド化が進んだパソコンやWi-Fi利用の場合はそうでもないですが、
スマートフォン対応のサイトを作っていると特に、読込みが遅いサイトは
嫌われる傾向があります。

もちろん使用する場所にもよりますが、どんな場所でもすぐに表示されるような
軽いWebサイトにするのが一番ですね。

ではどうするかというと、画像ではなくCSSを使ってできるものは
できるだけ使うことが一番の早道です。

今回は、画像を使わないCSSのみでボタンとそのロールオーバーを作ってみましょう。

HTMLとCSSの準備

まず、基本となるHTMLファイルとCSSファイルを準備します。
デスクトップまたはその他の場所に「button」フォルダーを新規で作り、
その中に下記のHTMLファイルとCSSファイルをテキストエディターで
作成して、buttonフォルダーに保存します。

[index.html] [style.css] 2ファイルとも保存したら、index.htmlをブラウザーで確認してみます。

今回はGoogle Chromeで開いてみます。

リンクをブラウザーで確認

こんなかんじになっていますか?
いよいよ次の段階からボタンを作り込んでみましょう。

ボタン風にしてみる

では、CSSファイルに変更を加えて、ボタンらしいデザインにしていきます。
ボタンにするためのポイントを箇条書きにしておくといいでしょう。
例えば今回は下記のようなポイントとしてみます。
・インライン要素をブロック要素にする(display)
・ボタンの横幅を300pxにする(width)
・ボタンに背景色をつける(background-color)
・文字色を白にする(color)
・アンカータグのアンダーラインを消す(decoration)
・枠線とテキストに余白を作る(padding)
・テキストをボタンの中央にする(text-arign)

括弧内に書き出しているのが利用する属性です。
これらを使って、変更を加えます。
style.cssを、下記のように変更しましょう。

[style.css] 保存したら、ブラウザーで更新して確認してみましょう。

ボタン風になったリンク

このように青いボタンになっていればOKです。
また、このボタンにマウスを乗せてみてリンクになっていることを確認しましょう。

マウスポインタの状態

通常、アンカータグ(<a></a>)はインライン要素で、テキストにしか反映されず、
テキスト以外の箇所にはリンクを反映させることができません。
しかし、display属性を使ってインライン要素をブロックレベル要素にすることで、
アンカータグのリンクをボックス型にできます。

ロールオーバー時のボタンをデザインする

いよいよロールオーバーの状態をデザインしていきます。
疑似クラスの:hoverを使います。
疑似クラスとは、要素のそれぞれ違う状態に対してデザインを指定できるものです。
今回使うのはアンカータグ(<a></a>)で、記述方法はa:hover{ }という形になります。
:hoverは、マウスカーソルが乗った状態に対して指定します。

下記のように、CSSを変更しましょう。
今回のサンプルでは、アンカータグに対してクラス名「btn」を付けているので、
「btn」に疑似クラスを指定しています。

また、変更箇所は背景色のみなので、hoverには背景色だけ指定しています。

[style.css] index.htmlをブラウザーで更新して、マウスカーソルを乗せて確認してみましょう。

ロールオーバー状態

このようにパープルのボタンになればOKです。

まとめ

今回はシンプルなボタンで練習しましたが、背景色にはグラデーションを
つけたり、文字に影をつけたり、角を丸くして、より一層ボタンらしく
することもできます。
ぜひいろいろなデザインのボタンを作ってみて試してみましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next ArticleグリッドレイアウトでWebサイトを作るメリットと作成方法