2-01ボタンを作ってみよう

2020-08-14

ここからは、前回までに学んだHTMLとCSSを使って、複雑な装飾やお問い合わせフォームの作り方を学んでいきたいと思います。

この回ではWebサイトでよく見かける「ボタン」の表現を学んでいきます。

ボタンについて

Webサイトにおいてボタンは重要な要素の１つです。リンクとして用意されたり、お問い合わせフォームのようなデータを入力して送信する仕組みにも使われます。

昔は画像で作ることが多かったボタンですが、現在はCSSの表現力が上がったため、CSSだけでもたくさんのバリエーションのボタンが作れるようになりました。

今回は以下のような新しいCSSの使い方を覚えて、最終的にボタンを作っていきます。

border-radius
box-shadow
text-shadow
linear-gradient()
radial-gradient()
line-height
letter-spacing
hover
transition

練習用HTMLファイルのダウンロード

今回利用する練習用のHTMLファイルです。

サンプルファイル

中には以下のものが入っています

index.html
style.css
img
- pic1.jpg

こちらをダウンロードしてホーム＞developフォルダに保存し、これを編集して練習しましょう。

角丸（border-radius）

border-radiusというプロパティで、ボックスの角４つを丸くすることが出来ます。これによって以下のようなデザインができます。

図：「角丸」の見本

角が丸くなる、これが角丸です。

使い方によっては丸も表現できます。

図：border-radiusで「丸」を表現

それでは実際の使い方です。

/* border-radiusの練習 */
.border-radius{
  display: inline-block;
  background: #9b4dca;
  color: #fff;
  text-decoration: none;
  width: 200px;
  height: 50px;
  line-height: 50px;
  /* ここからborder-radiusプロパティを追加 */
  border-radius: 10px;
}

角丸のプロパティはborder-radiusで、値はpxで指定します。値が大きくなればなるほど半径が大きい角丸になっていきます。

5pxと10pxの比較です

図：上が5px、下が10pxの角丸

角丸は4箇所バラバラに指定することも出来ます。

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

図：border-radiusuを左右上下4箇所バラバラに指定できる

border-radiusだけで4箇所バラバラに指定することも出来ます

図：数値を4つ、スペースを空けて入力する

左上・右上・右下・左下の順番で値を記述することで、4箇所ごとの半径を指定することができます。

角丸プロパティは画像に対しても指定することができます。

図：画像を角丸に

これはTwitterのプロフィール画像ですが、こういった表現も角丸で実現することができます。

図：Twitterなどでよく見かける丸いプロフィール画像

/* 画像を丸くする */
.border-radius-img{
  /* ここからborder-radiusプロパティを追加 */
  border-radius: 75px;
}

図：丸型の画像

影（box-shadowとtext-shadow）

box-shadowで、ボックスに対して影をつけることができます。また、text-shadowで文字に対して影をつけることができます。

図：box-shadowとtext-shadowの見本

まずはbox-shadowから、実際に指定してみましょう。

/* box-shadowの練習*/
.box-shadow{
  background: #9b4dca;
  width: 200px;
  height: 80px;
  margin: auto;
  /* ここからbox-shadowプロパティを追加 */
  box-shadow: 3px 3px 3px #000;
}

図：box-shadowの見本

値はそれぞれ、X方向・Y方向・ぼかし・色の指定になります。

少しだけ値を変えて、変化を見てみましょう。

/* box-shadowの練習*/
.box-shadow{
  background: #9b4dca;
  width: 200px;
  height: 80px;
  margin: auto;
  /* ここからbox-shadowプロパティを追加 */
 box-shadow: 0 0 3px #000;
}

X方向とY方向をゼロにしました。

図：X方向とY方向をゼロに

影が右斜めした方向に伸びていたところから、真下に描画されるように変化しました。

ぼかしをなくすとこんな感じになります。

/* box-shadowの練習*/
.box-shadow{
  background: #9b4dca;
  width: 200px;
  height: 80px;
  margin: auto;
  /* ここからbox-shadowプロパティを追加 */
  box-shadow: 3px 3px 0 #000;
}

図：ぼかしをなくす

ここでbox-shadow以外でも使える新しい色の指定方法を解説します。RGBAという指定方法です。

例えば以下のように記述します。

.box-shadow{
  background: #9b4dca;
  width: 200px;
  height: 80px;
  margin: auto;
  /* ここからbox-shadowプロパティを追加 */
  box-shadow: 0 0 10px rgba(0,0,0,.3);
}

図：RGBAで色を指定

ここで記述したrgba(0,0,0,0.3)は、黒い色を30%の濃さで表示しなさいという意味になります。

図：RGBAについて

ここまでは影をボックスの外側に表示していましたが、ボックスの内側に表示することも可能です。

.box-shadow{
  background: #9b4dca;
  width: 200px;
  height: 80px;
  margin: auto;
  /* ここからbox-shadowプロパティを追加 */
  box-shadow: 0 0 10px #000 inset;
}

図：内側に影を表示

続いてtext-shadowです。文字に影をつけたいときは、このtext-shadowを使います。

/* text-shadowの練習*/
.text-shadow{
  text-align: center;
  font-size: 48px;
  font-weight: bold;
  margin: auto;
  /* ここからtext-shadowプロパティを追加 */
  text-shadow: 3px 3px 3px rgba(255,0,0,.3);
}

図：text-shadowの見本

box-shadowと同じように、ぼかしをなくしたりX・Y座標を変えることができます。

/* text-shadowの練習*/
.text-shadow{
  text-align: center;
  font-size: 48px;
  font-weight: bold;
  margin: auto;
  /* ここからtext-shadowプロパティを追加 */
  text-shadow: 3px 3px 0 rgba(255,0,0,.3);
}

図：text-shadowのぼかしをなくす

このように、Photoshopなどを使わなくても、影がついたボックスやテキストを表現することができます。

線形グラデーション（linear-gradient）

linear-gradientはbackgroundをグラデーション状に塗りつぶしたいときに使う関数です。

図：線形グラデーションの見本

実際に指定してみましょう。

/* linear-gradientの練習 */
.linear-gradient{
  width: 300px;
  height: 300px;
  margin: auto;
  /* ここからlinear-gradientを追加 */
  background: linear-gradient(#f00 0%, #000 100%);
}

赤から黒に変化するグラデーションで塗りつぶすことができました。

グラデーションの方向を指定することもできます。初期設定では上から下方向にグラデーションされるようになっています（to bottom, 180deg）。方向を指定するには、色の前にto top, to left, to rightをつけるか、角度を指定します。

方向を角度で指定してみます。

/* linear-gradientの練習 */
.linear-gradient{
  width: 300px;
  height: 300px;
  margin: auto;
  /* ここからlinear-gradientを追加 */
  background: linear-gradient(45deg,#ff0000 0%, #000 100%);
}

左下から右上に向かってグラデーションしました。

degというのは日本語で角度の単位となる「度」のことです。0〜360degまで指定することができます。

グラデーションは2色だけではなく、何色でも増やすことができます。

/* linear-gradientの練習 */
.linear-gradient{
  width: 300px;
  height: 300px;
  margin: auto;
  /* ここからlinear-gradientを追加 */
  background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);
}

このように何色も指定すると虹のようなグラデーションができます。

色が切り替わる地点を数値（%もしくはpx）で指定することもできます。

まずは以下のように指定します。

/* linear-gradientの練習 */
.linear-gradient{
  width: 300px;
  height: 300px;
  margin: auto;
  /* ここからlinear-gradientを追加 */
  background: linear-gradient(blue, red);
}

次にblue, redの部分をblue, red 10%にしてみましょう

/* linear-gradientの練習 */
.linear-gradient{
  width: 300px;
  height: 300px;
  margin: auto;
  /* ここからlinear-gradientを追加 */
  background: linear-gradient(blue, red 10%);
}

さらに位置指定と色の組み合わせを工夫すると、下のような表現もできます。

/* linear-gradientの練習 */
.linear-gradient{
  width: 300px;
  height: 300px;
  margin: auto;
  /* ここからlinear-gradientを追加 */
  background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
}

このようにグラデーションを細かく指定することができます。

円形グラデーション（radial-gradient）

radial-gradientはlinear-gradientと同様にグラデーションを指定する関数ですが、linearが線形なのに対して、radialは円形のグラデーションを指定することができます。

図：円形グラデーションの見本

実際に指定してみましょう。

/* radial-gradientの練習 */
.radial-gradient{
  width: 300px;
  height: 300px;
  margin: auto;
  /* radial-gradientを追加 */
  background: radial-gradient(#f00,#000);
}

外側が黒、内側が赤で、円状にグラデーションが表示されました。

横幅を少し広げてみます。

/* radial-gradientの練習 */
.radial-gradient{
  /* width: 300px; */
  height: 300px;
  margin: auto;
  /* radial-gradientを追加 */
  background: radial-gradient(#ffffff,#ff0000);
  width: 500px;
}

初期設定では横幅や高さに合わせて、楕円形状にグラデーションします。

ここで形状を指定してみます。

/* radial-gradientの練習 */
.radial-gradient{
  /* width: 300px; */
  height: 300px;
  margin: auto;
  /* radial-gradientを追加 */
  background: radial-gradient(circle,#ffffff,#ff0000);
  width: 500px;
}

形状をcircleに指定すると、対象の要素の低い幅か高さに合わせて正円状にグラデーションします。

もちろんlinearと同じように、色を複数指定することもできます。

/* radial-gradientの練習 */
.radial-gradient{
  /* width: 300px; */
  height: 300px;
  margin: auto;
  /* radial-gradientを追加 */
  background: radial-gradient(red, orange, yellow, green, blue, indigo, violet);
  width: 500px;
}

Tips：CSSグラデーションが作れるジェネレーター

ここまで説明したグラデーションですが、指定の値が非常に複雑で、直感的に色を指定することができません。Photoshopなどのグラフィックツールには作成したグラデーションをCSSで書き出してくれる機能もあるので、そういったものを活用しましょう。

グラフィックツールを使えない場合は、以下のリンクのようなCSSグラデーションジェネレーターというものがいくつか無料で公開されています。
Ultimate CSS Gradient Generator
こちらのサイトでは色をパレットから選んで、ゲージを調整するだけで、簡単にグラデーションのコードを生成することができます。Tips：ベンダープレフィックス

上記のCSSジェネレーターでコードを出力すると、-moz-linear-gradientや-webkit-linear-gradientのような表記と、同じような内容が何度も書かれています。この-moz-や-webkit-は、ベンダープレフィックスと言って、各ブラウザが独自に実装したCSSを記述する場合にCSSプロパティの接頭辞としてつくものです。

実は今回紹介しているbox-shadowやtext-shadow、linear-gradientなどはここ数年の間に普及したもので、昔はブラウザごとに記述方法が異なりました。そのため、ベンダープレフィックスをつけて、それぞれのブラウザで正しく動くようにする必要があったのです。最近はブラウザごとのCSSの仕様も共通化が進んでいるため、あまり必要がなくなってきていますが、一部の特殊なブラウザでは使う機会が出てきます。

-webkit-：Google Chrome・Safari・Microsoft Edge
-moz-：Firefox
-ms-：Internet Explore

最近では、古いiPhone・Android端末で、このベンダープレフィックスが指定されていないためにCSSが適用されないなどの現象があります。

それぞれのCSSのブラウザ実装状況を詳しく調べたい場合はCan I useというサイトで確認することができます。

行の高さを調整する（line-height)

line-heightというプロパティで、テキストの行の高さを指定することができます。

このように行の間が詰まってしまっていると、読みづらい文章になってしまいます

図：line-height:1の見本

行の高さを調整し、行間に隙間をあけると、文章が読みやすくなります。

試しに以下のCSSを記述してみましょう

/* line-heightの練習 */
.line-height{
  width: 300px;
  margin: auto;
  /* line-heightを追加 */
  line-height: 2;
}

これでHTMLに表示されている「Lorem…」部分の文章の行の高さが調整されます。

図：line-height:2の見本

line-heightの指定方法は3つあります。

pxなどの数値で指定する
数値のみ（1.5とか2とか0.8など）
%で指定する

pxで指定する場合

例えばfont-sizeを16px、line-heightを30pxで指定したとします。

テキストの上下にはそれぞれ7pxの隙間ができます。

図：上下に7pxの隙間ができる

数値のみで指定する場合

数値のみで指定する場合は、対象のテキストのフォントサイズの等倍が反映されます。

例えばfont-sizeを16px、line-heightを2で指定したとします。この場合、line-heightは2倍の32pxとして反映されます。するとテキストの上下にはそれぞれ8pxの隙間ができます。

図：上下に8pxの隙間ができる

%で指定する場合

%で指定する場合は、対象のテキストのフォントサイズの◯%が反映されます。

例えばfont-sizeを16px、line-heightを200%で指定したとします。この場合、line-heightは200%の32pxとして反映されます。するとテキストの上下にはそれぞれ8pxの隙間ができます。

図：上下に8pxの隙間ができる

line-heightは行の周りに余白を作ってくれるので、これをボタンの装飾に活用することができます。

line-heightで出来た隙間で高さを中央に配置する

それでは、横幅150px・高さを30pxのボタンを作ってみましょう。

まずはline-heigtなしでCSSを記載してみましょう。

/* line-heightでボタンの高さを調整 */
.line-height-button a{
  width:150px;
  height:30px;
  display:inline-block;
  background: #9b4dca;
  color: #fff;
  border-radius: 5px;
  text-align:center;
  text-decoration: none;
}

図：作成したボタンの見本

高さを30pxにしてみたところ、「クリック」というテキストが上にぴったりくっついてしまいました。line-heightを使えば、このテキストを上下中央に指定することができます。

先ほどのCSSにline-height: 30px;を追加してみましょう。

.line-height-button a{
  width:150px;
  height:30px;
  display:inline-block;
  background: #9b4dca;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  line-height: 30px;
}

図：line-heightを30pxに

このようにline-heightの隙間を活用することで、ボタン上のテキストの上下の位置を調整することができます。

文字の間隔を指定する（letter-spacing）

line-heightで行間を調整したように、文字の間も調整することができます。文字間の調整にはletter-spacingというプロパティが用意されています。

letter-spacingは通常の場合はスペースが0で指定されていて、pxなどで値を指定するとその分のスペースが表示されます。

/* letter-spacingの練習 */
.letter-spacing{
  width: 300px;
  margin: auto;
  /* letter-spacingを追加 */
  letter-spacing: 10px;
}

図：letter-spacingを10pxに

letter-spacingをマイナスで指定することもできます。マイナスで指定すると、文字の間が詰まります。

/* letter-spacingの練習 */
.letter-spacing{
  width: 300px;
  margin: auto;
  /* letter-spacingを追加 */
  letter-spacing: -1px;
}

図：letter-spacingを-1pxに

ふつうの文章であればletter-spacingを調整することはあまりありませんが、特殊なフォントを使ってロゴなどを表示したいときなどに重宝します。

マウスホバー時の表示（hover）

マウスホバーというのは、ボタンの上にマウスカーソルが乗った状態のことを言います。

こちらに用意したボタンの上にマウスカーソルを乗せてみてください。ホバー

水色からオレンジ色にボタンの色が変化します。

Webサイトでは、マウスカーソルが対象の箇所に当たった際に、装飾を少し変化させることで、「ここにマウスカーソルがある」というのをわかりやすく伝えることができます。

ボタンであれば背景色を変化させたり、テキストだけであれば下線を表示したりするのが一般的です。box-shadowなどを使って、影を表示したり、くぼみをもたせたりすることもあります。

それでは実際のコードを見てみましょう。

ホバー効果を持たせたい a 要素に対して:hoverという疑似クラスをつけることで実現することができます。

HTML

<div class="hover">
<a href="#" >ホバー</a>
</div>

CSS

.hover{
  text-align: center;
}
.hover a{
  background: skyblue;
  color: #fff;
  width:150px;
  height:50px;
  display:inline-block;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  font-size: 24px;
}
.hover a:hover{
  background: orange ;
}

これまで出てきたCSSは、固定された装飾のみで、ユーザーの動きに合わせて変化することはありませんでした。ここ数年はCSSが進化し、最新のブラウザでは複雑なプログラミングを用いなくても、こういった動きに合わせて変化する装飾を実現することが可能になりました。（昔はJavaScriptを数行書かなければなりませんでした）

アニメーションで変化させる（transition）

先程のhoverを使うと、対象の要素の見た目を変化させることができます。ただしhoverだけではパッと切り替わるだけなので、ここにアニメーションをつけてあげたいと思います。

状態変化のアニメーションをつけるには、transitionというプロパティを使います。サンプルのボタンを見てみましょう。ホバー

マウスカーソルを載せると、ボタンの色がフワーっと変化します。

このようにボタンの色がフワーッと変わったり、画面がフワッと切り替わるような効果を、transition効果（時間的変化）と呼びます。CSSのtransitionプロパティを指定するだけで、簡単にこの効果が実現できます。

サンプルのボタンは以下のようなコードになっています。

HTML

<div class="hover-transition">
<a href="#" >ホバー</a>
</div>

CSS

.hover-transition{
  text-align: center;
}
.hover-transition a{
  background: skyblue;
  color: #fff;
  width:150px;
  height:50px;
  display:inline-block;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  font-size: 24px;
  transition: 700ms;
}
.hover-transition a:hover{
  background: orange ;
}

transition: 700ms;という1行を追加しただけで、アニメーションがつけられます。

transitionには指定できる項目がいくつかあります。

transition-property	適用する対象のプロパティを指定します。初期値はnoneで、すべての要素が対象になります
transition-duration	変化にかかる時間を指定できます。数値と、s（秒）かms（ミリ秒）で指定します。
transition-timing-function	変化のタイミングを指定します。easeやlinearなど
transition-delay	変化の開始時間を遅らせることができます。数値と、s（秒）かms（ミリ秒）で指定します。

これらはまとめてショートハンドで指定することができます。

例） transition: color 500ms linear 1s;

先程追加したtransition: 700msのように省略して指定することもできます。

色々な値を指定して、どういう変化が起きるか試してみましょう。

N水族館のサイトにお問い合わせボタンを付けてみよう

前回までに作成したサンプルのサイト、「N水族館」のサイトのお問い合わせボタンを装飾してみましょう。

前回までの完成サンプルをダウンロード

図：前回作ったサイトのお問い合わせボタン

<a href="https://www.google.co.jp/">お問い合わせ</a>

この a 要素にclass="contactButton"を追加します。

<a class="contactButton" href="https://www.google.co.jp/">お問い合わせ</a>

それではここまで勉強したCSSを自由に組み合わせて、このボタンを装飾してみましょう。

今回出てきたCSS

CSSプロパティ

プロパティ	値	説明
border-radius	pxで指定	要素の角を丸くする
box-shadow	pxと色で指定	要素に対して影をつける
text-shadow	pxと色で指定	テキストに対して影をつける
line-height	px・数値・%で指定	行の高さを指定する
letter-spacing	pxで指定	文字間のサイズを指定する
transition	変化の時間・対象のプロパティ・変化のタイミング・変化までの時間	時間的変化を指定する

CSS関数

関数	値	説明
linear-gradient()	色や%で指定	線形グラデーションを指定する
radial-gradient()	色や%で指定	円形グラデーションを指定する

疑似要素

疑似要素	説明
:hover	マウスがホバー状態のとき

2020-08-14

Posted by エスパパの娘