【コーディング解説】HTMLとCSSでボタンをつくる

今回は、HTMLとCSSを使ってボタンをコーディングします。デザインを元に模写をする流れを解説していきます。プログラミング初学者やコーディングで模写をしたい駆け出しエンジニアの練習に最適です。

どんなサイトのコーディングでも必ずボタンのコーディングはでてきます。そして、コツを覚えてしまえば何も考えず機械的にコーディングできるのもボタンの特徴です。

コーディングの準備をする

完成形のデザインを確認しましょう

最もよくある基本形のボタンになります。

デザインの基本情報

ボタンをコーディングするにあたって、必要となる情報は以下の通りです。

横幅は148px
縦幅は48px
背景色は黒(#333333)
文字色は白(#FFFFFF)
角丸は4px
文字の大きさは12px
太字

コーディングの目標時間

10分以内でコーディングが終えられるように頑張ってみましょう。タイピングが早い人であれば、5分以内でもできるはずです。

自分なりにコードを書いてみる

Yuto Seta

上のデザインと基本情報を元にまずは自分なりにコーディングをしてみましょう。

コーディングの手順

HTMLを書き出す
CSSを書き出す
1. ボタンの形を設定
2. ボタンの背景色を設定
3. ボタンのテキストの配置を設定
4. ボタンの文字スタイルを設定

実際のソースコード

実際のソースコードは以下の通りです。
コーディングのお手本として参考にしてください。
自分なりにコーディングしてみたら、答え合わせをしてみましょう。

初心者はまずは見た目を完璧に同じにすることを目標にしてください。

中級者はなぜそのようなソースコードになったのか？と考えながら読み進めていってください。

上級者はこれよりも優れたコードはないだろうか？と考えながら読み進めていってください。

HTML

<div class="button">BUTTON</div>

ボタンのHTMLはこのような構造にしました。

CSS

.button{
  /* 1.形をきめる */
  width: 148px;
  height: 48px;
  border-radius: 4px;
  /* 2.背景色をきめる */
  background: #333333;
  /* 3.文字の配置をきめる */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 4.文字のスタイルを設定 */
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  /* 5.クリックできることを示すためのカーソルポインターを設定 */
  cursor: pointer;
}

ボタンのCSSは上記の通りです。

ボタンの特徴

ボタンのコーディングを効率よく進めていく上で、ボタンの特徴を把握しておくとよいです。ボタンのデザインの特徴を分析しながら、コードに落とし込んでいきます。慣れてくると機械的にコーディングできるようになります。

ボタンの文字は上下左右中央揃え

だいたいのボタンは、文字が上下左右中央揃えに配置されています。

display: flex;
justify-content: center; //左右中央揃え
align-items: center;　//上下中央揃え

おまけ：マウスを乗せた時にアニメーションする

CSSを以下のように書き換えてください。

.button{
  height: 48px;
  border-radius: 4px;
  background: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  /* ここから追加 */
  transition: opacity .3s linear;
  /* ここまで追加 */
}
/* ここから追加 */
.button:hover{
  opacity: .85;
}
/* ここまで追加 */