Suffix Official Blogサフィックス公式ブログ

こんにちは、WebチームのNです。
最近CSS設計について復習していたので、再利用しやすいパーツを作って効率的にコーディングできるよう意識しています。ただ、どうせならどんな状況でも使える完璧なコードを用意して、後々楽したいところです。ボタンはコンポーネントとして切り出すパーツの中で一番最初に思いつくので、ボタンの理想のコード(主にCSS)を突き詰めていきます。

基本形

元になるHTMLはいたってシンプルです。

Button

実際はページ遷移目的でaタグが使われることが多いですが、リセットCSSを調整すれば同じ結果になるので、この記事ではbuttonを使います。このボタンをよく見る押せそうな形にします。

.btn {
 font-size: 1rem;
 min-height: 3em;
 line-height: 1;
 align-content: center;
 min-width: 12.5em;
 width: fit-content;
 padding-inline: 0.75em;
 text-align: center;
 position: relative;
 cursor: pointer;
}

Button

上のようなスタイルを充てるとよく見るボタンの形になります。(ブログ表示用に一部CSSを足してます)このCSSのポイントはテキストの変化に柔軟に対応できる点です。font-sizeの単位はブラウザ設定に合わせて変わるremにし、幅や高さがそれに追従するように、単位をemにしています。min-widthで幅指定することでボタンの文字数が増えても自動で幅が広がるので、文字がはみ出なくなります。配置によってはdisplay: blockが付与されることもあるので、min-widthで必要以上に幅が広がらないようにしています。
また、line-heightの値が大きいと高さに影響するので明示的に 1 を指定し、min-heightで高さを指定するようにしています。position: relativeについてはボタン内にアイコンを配置する時に使います。

とりあえず見た目だけあってればいいやって感じでコーディングすると、割とすぐ表示が崩れます。例えば幅や高さを固定値にすると、文字数が長くなればアウトです。

幅指定が固定値のButtonはこちら！幅指定が可変値のButtonはこちら！

変更に強いコードを作っておけば、表示崩れを恐れず使い回せます。ここにスタイルを増やしたとしても綺麗な状態を保てるので、スタイルを付け足していきます。

派生形

基本形ができたので、これをベースにサイトに合った色つきボタンを作ってみましょう。次のボタンはメインカラーが黒、洗練されたサイト、というイメージです。

.btn.btn--primary {
 background: black;
 color: white;
 border: 1px solid black;
 transition: 0.3s ease;
}

.btn.btn--primary:hover {
 color: black;
 background: transparent;
}

Button

.btnにモディファイアをつけた.btn--primaryに対してスタイルを指定しています。大体のボタンはモディファイアを付ける形式で対応できると思います。アイコン付きのボタンも大体はモディファイアで対応できますが、アイコンをアニメーションさせたい時、HTMLを増やさなければ対応できないこともあります。

.btn__arrow {
 right: 28%;
 top: 43%;
 position: absolute;
 transition: all 0.5s ease;
 width: 0.5em;
 height: 0.5em;
 display: block;
 transform: rotateX(0deg);
 transform-origin: center center;
}

.btn__arrow::after,
.btn__arrow::before {
 content: "";
 position: absolute;
 top: calc(50% - 0.5px);
 right: 0;
 width: 8px;
 height: 1px;
 border-radius: 9999px;
 background-color: currentColor;
 transform-origin: calc(100% - 0.5px) 50%;
}
.btn__arrow::before {
  transform: rotate(45deg);
}
.btn__arrow::after {
  transform: rotate(-45deg);
}

.btn:hover .btn__arrow {
 transform: rotateX(180deg);
}

Button

この矢印アイコンはホバー時に回転するアニメーションを付けているのですが、buttonの疑似要素に矢印をつけただけたど綺麗に回転しません。回転させるためのHTML要素があればいいので、buttonの中にiを入れ、.btn__arrowクラスをつけてスタイリングしています。この時に.btnクラスつけたposition: relativeを使っています。

ここまで基本形をベースに、色とアニメーション、アイコンとアニメーションという順で要素を増やしましたが、要素を増やす時に前のクラスは編集していません。つまり、それぞれの要素は独立していて、どちらか一つを消して別のボタンにすることができます。例えば.btn--primaryクラスだけ削除すれば、矢印だけ付与したボタンになります。これなら矢印ボタンをコーディングし直す必要がないのですごく楽です。

Button

コードを再利用できると楽

どこでも使えるコードを意識することで、コーディングが劇的に楽になるはずです。これはボタンに限らずいろんなパーツで当てはまるので、再利用できるパーツが多いほど楽です。再利用性を意識することで新しいコードを知ることもできたので、いい勉強になりました。