HTMLとCSSでボタンのコーディングをする

コーディングの練習 No.1 ボタンをつくる

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

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

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

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

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

デザインの基本情報

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

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

コーディングの目標時間

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

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

http://eclair.company/media/wp-content/uploads/sites/2/2019/11/seta-1.jpg
Yuto Seta

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

コーディングの手順

  1. HTMLを書き出す
  2. 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;
}
/* ここまで追加 */

CodePenで完成品をデモでみる。

See the Pen OJPjaYZ by YutoSeta / ホームページ制作のエクレア (@yutoseta) on CodePen.

まとめ

今回はボタンのコーディングをしてみました。
ボタンの特徴はズバリ一言。文字が上下左右中央揃えってことです。

この記事をかいてみての感想

http://eclair.company/media/wp-content/uploads/sites/2/2019/11/seta-1.jpg
Yuto Seta

HTMLやCSSに関する質問やブログ記事として書いて欲しいテーマなどあれば、ぜひコメントまってます!

▼改善点
意外とだらだらと書けてしまう。簡単すぎて内容が薄いような気もするし、部分的にみると解説が少ないようなところもある気がする。ううむ。。。

▼こんなのもあるよ。ボタンジェネレーター。
https://generator.web-alpha.info/btn/

▼書き足したい内容メモ
ボタンがblock要素の時とinline-block要素の時。文字量が多く文字が改行してしまう時。ボタン内に矢印アイコンが入る時。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です