hiromiyablog
hiromiyablog  > プログラミング >  CSSで良く見かけるボタンの作り方（Modifier（修飾子）を追加・変更する事で複数の状態に変更可能）

CSSで良く見かけるボタンの作り方（Modifier（修飾子）を追加・変更する事で複数の状態に変更可能）

「CSSで良く見かけるボタンの作り方」の画像です。

今回はCSSで良く見かけるボタンの作り方（Modifier（修飾子）を追加・変更する事で複数の状態に変更可能）を備忘録も兼ねて簡単にまとめました。

WEBサイトで良く見かけるページ内リンク（アンカーリンク）や別サイトに遷移させるリンクボタンをよく使われそうな見た目の装飾をModifier（修飾子、読み：モディファイア）を追加・変更する事で複数の状態に変更できる感じで作成してみました。

簡単な説明になりますが良ければ参考にしてみて頂けたら幸いです！

目次

CSSでボタンを作るには？

まずは土台となるHTMLを記述していきます。

その後、土台（HTML）を記述できたらその土台をもとにCSSを記述して装飾していきます。

HTMLを記述していこう

下記のように土台となるHTMLを記述します。

class名やタグの種類などは別のものでも装飾を自身でできる際は大丈夫です！

class名はできるだけ誰か別の人が見ても何の為の要素なのか、できる限りわかるようなclass名にしましょう。
作って終わりではなく、その後の運用も考慮して制作する事が大切です！

<div class="button">
  <p class="button__linkBox">
    <a class="button__link" href="#">リンクボタン（アローなし）</a>
  </p>
</div><!-- /.button -->

<div class="button">
  <p class="button__linkBox">
    <a class="button__link--arrow" href="#">リンクボタン（アロー右）</a>
  </p>
</div><!-- /.button -->

<div class="button">
  <p class="button__linkBox">
    <a class="button__link--arrowBottom" href="#">リンクボタン（アロー右の下向き）</a>
  </p>
</div><!-- /.button -->

<div class="button">
  <p class="button__linkBox">
    <a class="button__link--arrowTop" href="#">リンクボタン（アロー右の上向き）</a>
  </p>
</div><!-- /.button -->

<div class="button">
  <p class="button__linkBox">
    <a class="button__link--arrowLeft" href="#">リンクボタン（アロー左）</a>
  </p>
</div><!-- /.button -->

<div class="button">
  <p class="button__linkBox">
    <a class="button__link--arrowLeftBottom" href="#">リンクボタン（アロー左の下向き）</a>
  </p>
</div><!-- /.button -->

<div class="button">
  <p class="button__linkBox">
    <a class="button__link--arrowLeftTop" href="#">リンクボタン（アロー左の上向き）</a>
  </p>
</div><!-- /.button -->

※<div class=”button”>〜</div><!– /.button –>までが1つのボタンコンテンツです

CSSで装飾してボタンの見た目を作ろう

土台となるHTMLが記述できたら次は土台をもとにCSSで下記のように記述して装飾をし、ボタンのデザインを形作っていきます。

装飾が正常にできたらデモページのようなボタンのデザインになります。

/*------------------------------
 button
------------------------------*/
.button {
  width: 320px;
  height: auto;
  margin: 20px auto;
}

.button__linkBox {
  width: 100%;
  height: auto;
}

.button__link,
.button__link--arrow,
.button__link--arrowBottom,
.button__link--arrowTop,
.button__link--arrowLeft,
.button__link--arrowLeftBottom,
.button__link--arrowLeftTop {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  color: #fff;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
  text-decoration: none;
  background-color: #202f55;
  border-radius: 10px;
  transition: opacity 0.3s ease 0s;
  padding: 12px 30px;
  box-sizing: border-box;
}

.button__link:hover,
.button__link--arrow:hover,
.button__link--arrowBottom:hover,
.button__link--arrowTop:hover,
.button__link--arrowLeft:hover,
.button__link--arrowLeftBottom:hover,
.button__link--arrowLeftTop:hover {
  opacity: 0.8;
}

/* アロー（「<」や「>」の部分）の装飾
------------------------------*/
.button__link--arrow::before,
.button__link--arrowBottom::before,
.button__link--arrowTop::before,
.button__link--arrowLeft::before,
.button__link--arrowLeftBottom::before,
.button__link--arrowLeftTop::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

.button__link--arrow::before {
  right: 18px;
}

.button__link--arrowBottom::before,
.button__link--arrowTop::before {
  right: 15px;
}

.button__link--arrowLeft::before {
  left: 12px;
}

.button__link--arrowLeftBottom::before,
.button__link--arrowLeftTop::before {
  left: 15px;
}

.button__link--arrow::before,
.button__link--arrowLeft::before {
  transform: rotate(45deg);
  margin-top: -5px;
}

.button__link--arrowBottom::before,
.button__link--arrowLeftBottom::before {
  margin-top: -8px;
}

.button__link--arrowTop::before,
.button__link--arrowLeftTop::before {
  margin-top: -2px;
}

.button__link--arrowBottom::before,
.button__link--arrowLeftBottom::before {
  transform: rotate(135deg);
}

.button__link--arrowTop::before,
.button__link--arrowLeftTop::before {
  transform: rotate(-45deg);
}

各指定箇所の簡単な説明

簡単に説明しますとまずは下記大枠の部分、class名buttonに「width」プロパティを下記のハイライト部分のように値をpxで追加し、ボタンの幅を指定していきます。

button__linkBoxの部分は親要素のclass名buttonの幅と同じになるように100%にて指定しています。

※「height: auto;」は記述しなくても良いのですが実際の業務では環境が違い、指定がないと同じ状態にならない事もあるので念の為、指定しております

.button {
  width: 320px;
  height: auto;
  margin: 20px auto;
}

.button__linkBox {
  width: 100%;
  height: auto;
}

その後、下記の「実際のリンクボタン」にあたる部分、class名button__linkに「ボタンの装飾やリンクのテキストのサイズ指定など」を追加し、button__link:hoverにホバー時のstyleを指定していきます。

※今回のhover時の挙動としては良くありがちなボタン全体が透過されるように指定しております。
角丸タイプにしていますので角丸なしにしたい場合は「border-radius: 10px;」を削除してください。
また、角丸の丸みを変えたいときは「border-radius: 10px;」の数値を調整してみてください。

.button__link,
.button__link--arrow,
.button__link--arrowBottom,
.button__link--arrowTop,
.button__link--arrowLeft,
.button__link--arrowLeftBottom,
.button__link--arrowLeftTop {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  color: #fff;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
  text-decoration: none;
  background-color: #202f55;
  border-radius: 10px;
  transition: opacity 0.3s ease 0s;
  padding: 12px 30px;
  box-sizing: border-box;
}

.button__link:hover,
.button__link--arrow:hover,
.button__link--arrowBottom:hover,
.button__link--arrowTop:hover,
.button__link--arrowLeft:hover,
.button__link--arrowLeftBottom:hover,
.button__link--arrowLeftTop:hover {
  opacity: 0.8;
}

その後、下記の「アロー（「<」や「>」）」にあたる部分をclass名に--arrow（Modifier（修飾子、読み：モディファイア））を追加・変更する事で見た目の状態を変更できるよう下記のように指定していきます。

/* アロー（「<」や「>」の部分）の装飾
------------------------------*/
.button__link--arrow::before,
.button__link--arrowBottom::before,
.button__link--arrowTop::before,
.button__link--arrowLeft::before,
.button__link--arrowLeftBottom::before,
.button__link--arrowLeftTop::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

.button__link--arrow::before {
  right: 18px;
}

.button__link--arrowBottom::before,
.button__link--arrowTop::before {
  right: 15px;
}

.button__link--arrowLeft::before {
  left: 12px;
}

.button__link--arrowLeftBottom::before,
.button__link--arrowLeftTop::before {
  left: 15px;
}

.button__link--arrow::before,
.button__link--arrowLeft::before {
  transform: rotate(45deg);
  margin-top: -5px;
}

.button__link--arrowBottom::before,
.button__link--arrowLeftBottom::before {
  margin-top: -8px;
}

.button__link--arrowTop::before,
.button__link--arrowLeftTop::before {
  margin-top: -2px;
}

.button__link--arrowBottom::before,
.button__link--arrowLeftBottom::before {
  transform: rotate(135deg);
}

.button__link--arrowTop::before,
.button__link--arrowLeftTop::before {
  transform: rotate(-45deg);
}

※アロー（「<」や「>」の部分）の線の長さを変えたい場合は「width: 10px;」と「height: 10px;」の数値を変更してください。
アロー（「<」や「>」の部分）の線の太さや色を変えたい場合は「border-top: 1px solid #fff」と「border-right: 1px solid #fff;」の数値部分と「#fff」部分を変更して調整してみてください。

  • class名button__linkに--arrowを追加する事で「リンクボタン（アロー右）」の状態になります。
  • class名button__linkに--arrowBottomを追加する事で「リンクボタン（アロー右の下向き）」の状態になります。
  • class名button__linkに--arrowTopを追加する事で「リンクボタン（アロー右の上向き）」の状態になります。
  • class名button__linkに--arrowLeftを追加する事で「リンクボタン（アロー左）」の状態になります。
  • class名button__linkに--arrowLeftBottomを追加する事で「リンクボタン（アロー左の下向き）」の状態になります。
  • class名button__linkに--arrowLeftTopを追加する事で「リンクボタン（アロー左の上向き）」の状態になります。

こちらでおおまかな簡単な説明になりますが完成になります。

まとめ

今回はCSSで良く見かけるボタンの作り方（Modifier（修飾子）を追加・変更する事で複数の状態に変更可能）について簡単にはなりますが、HTML・CSSでの作り方を説明させていただきました！

「Modifier（修飾子、読み：モディファイア）」などもでてきたので、知らなかった方やもっと詳しく知りたいという方は下記の外部サイトが参考になるかなと思いますので参考にしてみてください。

Modifier（修飾子）とは

「Modifier」は「修飾子」という意味で、「モディファイア」と読むようです。

「モディファイア」とは「Block」や「Element」の「見た目、状態、振る舞い」を定義するものです。

※実際の現場では独自にカスタマイズして定義をしていたりもするのでその際は書き方など現場の定義に従って記述するようにしましょう！
私の記述もBEMの書き方を少し自分なりにカスタマイズした記述になるので問題ありそうな場合は適切に修正してください。

参考サイト

Modifier（修飾子、読み：モディファイア）

CSS 設計における Modifier の記述ルールの最適化 - Qiita

みなさんは CSS 設計をするとき、どの設計方針を採用してますか？自分も SMACSS、BEM、FLOCSS と渡り歩いて来ましたが、どうにもしっくり来ない点が Modifier の記述ルールです。ここでは自分の試行錯誤の過程と結果を公開してみました…

https://qiita.com/okamoai/items/1d2c9018a79e4dee69f4

【CSS設計】ゼロからわかるBEM超入門

https://zenn.dev/nagan/articles/dac6fa662f4dab

CSS設計のBEMを１から理解してマスターしよう！

BEMは、コンポーネント化する為のフロントエンド設計方法の1つですが、BEMを構成する要素の「Block(ブロック)／Element(エレメント)／Modifier(モディファイア)」の役割っていまいちよく分からない！って方多いと思います。そんな方へ図解形式で３つの要素について詳しく解説します。

https://pikawaka.com/html-css/bem

デモページ

デモページはこちらになります。

See the Pen CSSで良く見かけるボタンの作り方（Modifier（修飾子）を追加・変更する事で複数の状態に変更可能） by hiroyuki.miyauchi (@hiromiya) on CodePen.

※各言語ボタンを押し下し、ソースコードをLIVE（リアルタイム）で書き換えて表示・実行結果を確認できます。

最後にもう一度ポイントをおさらい

  • class名はその後の運用も考慮して誰でも何の為の要素なのかできるだけわかりやすく制作するようにしよう
  • Modifier（修飾子、読み：モディファイア）とは「Block」や「Element」の「見た目、状態、振る舞い」を定義するもの
  • ボタンの装飾は色々あるのでこちら参考になりましたら自身で色々なプロパティを追加変更してみて様々なボタンを作成して楽しんでみよう！

初心者向けで簡単な説明でしたが上記内容も踏まえまして、是非自身でのプログラミングにも役立てて頂けると幸いです。

初心者の方にオススメの学習サービス

閲覧履歴

コメントを残す

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

CAPTCHA


PAGE TOP
  • MENU
  • HOME
  • SEARCH
  • PAGE TOP
  • SIDE BAR