Djangoでプログラミングしている時にもめっちゃ使うのが、ボタン。Bootstrapでは、ある程度デザインされているのが用意されているので、それを使うことが多いんですが、ちょっとダサい感じはあります。
業務アプリの場合は、それより機能の方が大切なので今まで、勉強をしてきませんでした。HTMLとCSSを学ぶためにいくつかの本を買って勉強していますが、どの本にもボタンづくりがあります。
ホームページとかでもよく使われるので、実践的で分かりやすいからだと思うので、今回自分なりに今後使えそうなボタンを作っていきます。
CSSでボタンを作って基本を覚える
まずは、HTMLとCSSの準備をします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<button class="btn">
ボタン
</button>
</body>
</html>.btn {
}CSSでボタンの見た目を整える
ボタンの装飾をしていこうと思います。何も装飾していない状況だとこんなボタンが表示されます。
何とも、味気ないボタンです（笑）
ボタンを線で囲む border
まずは、ボタンを黒線で囲むようにしたいと思います。
.btn {
border: 1px solid black;
}ザ・昔のボタンができありました（笑）
背景色を変更 background-color
ボタンって少し前まで、今のようなグレイの色がほとんどでしたよね。オシャレ感がないので、色を変更しようと思います。
ファッションの基本でもある「白」と「黒」を基本として作っていきたいと思います。文字色であるColorも黒で指定しておきます。色を指定していない場合は、ブラウザが標準としている文字色で表示されるので、黒で表示されない場合があるのを防ぐ意味で指定します。
.btn {
border: 1px solid black;
background-color: white;
color: black;
}
うーん、まだオシャレ感はないですね…
文字とボタンとの線の間を広くして見た目をすっきりさせる padding
ボタンという文字とボタンの線との距離が近すぎることで少しおしゃれ間が出していきたいと思います。デザインで大切なことのひとつとして、空間・余白があります。
空間・余白を与えることでデザインがよくなるのです。
少し見た目が良くなりましたね！
空間の大切さがよくわかります。
カーソルがボタンの上に来たらポインターに変更する cursor
ボタンといえばというか、Webをしていて当たり前になってきてるのが、クリックできるところにマウスを置くと、ポインターが変更することです。
これもCSSで１行書くだけでできるので追加します。
たったこれだけで、マウスがボタンの上にきたらポインタが手に変わって、クリックできることが分かりやすくなりました。
マウスがhoverした時に色を反転させてオシャレ感をだす
マウスがホバーした時に、色が変化する処理をしていることがほとんどです。よく見るのは、色が反転する場合と色が濃くなる場合ですね。
今回は、色を反転させる方法をしてみます。
.btn {
border: 1px solid black;
background-color: white;
color: black;
padding: 8px 24px;
cursor: pointer;
}
.btn:hover {
background-color: black;
color: white;
}.bth:hover でマウスがhoverした時に適用するっていう指示がだすことができます。
バックグラウンドカラーが黒になって、文字の色が白になることで色が反転したように表示されます。
変化をゆっくりにするとオシャレ感がでる transition
変化するスピードを調整することでオシャレ感が増します。すごい細かい設定をすることもあるみたいです。
CSSファイルにtransitionを追加していきましょう。
.btn {
border: 1px solid black;
background-color: white;
color: black;
padding: 8px 24px;
cursor: pointer;
transition: all 1500ms;
}
.btn:hover {
background-color: black;
color: white;
}1500msは、1.5秒かけて変更を完了してねってことを意味します。
画像では分かりくいので、ぜひ、コードを書いてみてください。下の画像は、半分ぐらい変化した時でグレイになっています。
変化を調整するのが、transitionで、使う時にはググって使えばいいなぁって思います。こういうものがあることを覚えておけばいいと思います。
影をつけてオシャレ感をもっと出す box-shadow
最近作成されたホームページでは、よく見る方法ですね。実際に影がつけれるのでやってみましょう！
.btn:hover {
background-color: black;
color: white;
box-shadow: 6px 6px 6px gray;
}hoverした時に、box-shadow が表示されるようにします。
浮き出ているように見えて、オシャレ感が少しましました！
初期表示の時に動きをつける transform
最近とても多い動きをつけるパターンですね。
transform で指定すると、表示するときに動きがついて目が行きやすくなります。
.btn {
border: 1px solid black;
background-color: white;
color: black;
padding: 8px 24px;
cursor: pointer;
transition: all 1000ms;
transform: translate(30%, 20%);
}これで動きがつくようになっています。
動きや影の付け方の基本を理解
transitionで動きをつけて、hoverでポインターが来た時のCSSを変更することで、動きがより分かりやすくなることがわかりました。
あまり動きを付け過ぎたり、ゆっくりやり過ぎると、今はスマホで見る時はかなり速いスピードでスクロールしていくので、考慮が必要ですね。
以上、CSSでボタンを作ってみるでした
コメント