【デザイン知識ゼロでもOK】CSSで汎用的なボタンのデザインを作ってみよう

今回は、CSSを使って、ボタンデザインを作る記事を作っていきたいと思います。

この記事では、デザインの知識ゼロでも、テンプレートとして覚えられるをコンセプトとして紹介していきたいと思います。

そもそもCSSって何?という方は、以下の記事で基本を勉強しましょう。

【エンジニア初級】CSS入門で覚えるポイント3つ

【エンジニア初級】CSSで汎用的なボタンのデザインを作ってみよう

• これから作るもの
• CSS設定内容の手順+解説
• 最終的なボタンデザインとCSS

これから作るもの

これから作るのは、Webサイトでよくあるようなボタンを作っていきます。

最初にどんな完成系になるか分かった方ががイメージが伝わると思うので、載せておきます。

完成系イメージ

登録

====

CSS設定内容の手順+解説

Step1. HTMLとCSSの指定

まず、CSSを設定する前に、CSSで装飾したいHTMLを作ってみましょう

<p class="orifinal-button">登録</p>

そうすると、以下のようなパラグラフの「登録」という文字が表示されます。

登録

次に、CSSを設定します、先程の「orifinal-button」に対応したクラスを作ります。

.orifinal-button {
  
}

これでHTMLとCSSが「orifinal-button」というクラスを通して装飾可能になりました。

Step2. 背景色の変更

次にボタンの色を青色にしましょう、背景色の変更は「background-color」で設定可能です。

.orifinal-button {
  background-color: blue;
}

そうすると、以下のように背景色が変化します。

登録

Step3. サイズの変更

このままではボタンが横長すぎるので、幅と高さを調整します。

.orifinal-button {
  background-color: blue;
  width: 168px;
  line-height: 40px;
}

「witdh」でボタン幅を168pxに指定し、「line-height」で高さを40pxに指定しました。なおheightにするとボタンの文字が高さの真中になりませんが、「line-height」にすると文字がボタンの真中の高さに自動的に設定されます。

登録

Step4. 文字の色変更

デザインを考えると黒と青は両方色が暗く濃いので文字が見えにくくなります、背景が暗い色なら、文字は、白もしくは白い近い明るい色にすることでボタンから浮き出て見えるようになります。

.orifinal-button {
  background-color: blue;
  width: 168px;
  line-height: 40px;
  color: #fff;
}

今回は白色で設定しました「#fff」は白の設定値です。

登録

更にボタンの文字は太い方が見やすいので太字にするために「font-weight: bold」を設定して太字にします。

.orifinal-button {
  background-color: blue;
  width: 168px;
  line-height: 40px;
  color: #fff;
  font-weight: bold;
}

登録

Step5. 文字とボタンを中央揃えに

今のままではボタンの位置も、ボタンの文字の位置も左揃えになっているので中央揃えにします。

.orifinal-button {
  background-color: blue;
  width: 168px;
  line-height: 40px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
}

「text-align」を「center」に指定することで文字がボタンの中央揃えになりました。しかし、このままではボタン自体は画面の中央になりません。

ボタンを画面の中央にしたい時は、「margin: 0 auto;」を指定します、これにより二つ目の引数である「auto」が発動しボタンの左右を自動で余白を取るように設定されます。

登録

Step6. ボタンを角丸にする

最後はボタンのデザインを少し改良するために、角丸にしましょう。ボタンの四隅が尖っているとユーザーに緊張感や心理的なボタンの押しずらさが生まれてしまう可能性があるので柔ない印象を与えましょう。

.orifinal-button {
  background-color: blue;
  width: 168px;
  line-height: 40px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
  border-radius: 10px;
}

「border-radius」を指定することで四隅が丸みを帯びます、どんなボタンでも大体10pxくらいの設定にしておけばOKです。

登録

====

最終的なボタンデザインとCSS

デザインは、これで完成ですが最後にボタンらしくマウスポインタを重ねたらクリックできるようなUIにしましょう。

クリックできるようなUIにするためには、「cursor」を「pointer」に設定します。

最終的なCSS

.orifinal-button {
  background-color: blue;
  width: 168px;
  line-height: 40px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
  border-radius: 10px;
  cursor: pointer;
}

最終的なボタンデザイン

登録

もっとCSSについて勉強したい方は、以下の本がオススメです、私も最初CSSを勉強するときにお世話になりました。

よくわかるHTML5 CSS3の教科書 第3版 / 大藤幹

【送料無料】 よくわかるHTML5 CSS3の教科書 第3版 / 大藤幹 【本】 価格:3,080円 (2021/4/18 21:45時点) 感想(0件)

===============

以上、CSSで汎用的なボタンのデザインを作ってみました。

この情報が皆さんの人生のお役に立てれば幸いです。

エンジニアとして日本のITリテラシーを高めていきたいと共感して頂いた人は、是非このブログの拡散とyoutubeの方も見ていただけると嬉しいです。

記事を最後まで見ていただきありがとうございました。

執筆者: hiroエンジニア