1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. CSS
  6. »
  7. 【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。

CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。
パーツごとにCSSを書いていたりしませんか? パーツごとにCSSを書いてしまうと、コードの量がかなり増えてしまうのでおすすめしません。

そこで、ボタンの作成を例にCSS設計を覚えていきましょう。

デフォルトのボタンを表示

まず、一切スタイルを適用させずに、デフォルトのボタンを表示させてみました。

<button>ボタン</button>

ボタン

一応ボタンにはなっていますが、何もデザインされていません。
そこで、ここにスタイルを当てて、ボタンをデザインしていきましょう。

真似してはいけないボタンのスタイル

まず、真似してはいけないボタンの作り方をご紹介します。

※これは真似しないほうがいい

<button class="btn-blue">ボタン</button>
.btn-blue {
	color: #ffffff;
	background: #5555ff;
	padding: 20px;
	border: 0;
	font-size: 16px;
	outline: none;
	cursor: pointer;
}

ボタン

上は、青いボタンを作るサンプルです。
この書き方のどこがいけないのでしょうか?

コードに無駄が多い。

では、この青いボタンはそのままに、赤いボタンを作ってみましょう。

<button class="btn-blue">ボタン</button>
<button class="btn-red">ボタン</button>
.btn-blue {
	color: #ffffff;
	background: #5555ff;
	padding: 20px;
	border: 0;
	font-size: 16px;
	outline: none;
	cursor: pointer;
}
.btn-red {
	color: #ffffff;
	background: #ff5555;
	padding: 20px;
	border: 0;
	font-size: 16px;
	outline: none;
	cursor: pointer;
}

ボタン

この CSS を見て気がつく人も多いと思いますが、.btn-blue と .btn-red では、同じ記述が多いんです。
つまりこの CSS の書き方は、無駄が多いんですね。さらに別のボタンを作っていくと、どんどんと同じ記述が増えていき、とても効率が悪いんです。

タグを変えた時にスタイルが変わってしまう。

先ほどのスタイルをaタグにも適用させてみます。

<button class="btn-blue">ボタン</button>
<button class="btn-red">ボタン</button>
<a class="btn-blue">ボタン</a>
<a class="btn-red">ボタン</a>

ボタン

buttonタグとaタグでは、見た目が変わってしまっています。
タグを変えただけで、どんどんレイアウトが崩れていってしまうわけです。

スタイルを分けて適用させる

では、無駄がない CSS の書き方は、どのようにすればいいのでしょうか?
まず、根本的な考えを変える必要があります。

  • .btnにサイズや幅の指定は必要ない。
  • .btnに色の指定も必要ない。
  • .btnに隙間の指定も必要ない。
  • できれば.btnにフォントサイズも指定しない。

この4つです。

まずは考え方の解説です。
ボタンは色々な部分に使える重要なパーツです。
色々な場所に、様々な色や形で配置したいのです。ですので.btnに色や形の指定があると、それを上書きするか、新しくクラスを作る必要が出てくるのです。

そこで、機能ごとにクラスを作って、マルチクラスで設計していく方法にします。

<button class="btn btn-blue">ボタン</button>
<button class="btn btn-red">ボタン</button>
<a class="btn btn-blue" href="#">ボタン</a>
<a class="btn btn-red" href="#">ボタン</a>
.btn {
	border: 0;
	cursor: pointer;
	display: block;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	text-align: center;
	text-decoration: none;
}
.btn-blue {
	color: #ffffff;
	background: #5555ff;
}
.btn-red {
	color: #ffffff;
	background: #ff5555;
}

ボタン

さて、フォントサイズや、ボタンのサイズを指定していないので、バラバラです。
そこで、ここからはボタンのサイズなどを揃える方法を解説していきます。

ボタンのサイズを決めるクラスを作る

ボタンのサイズを整える方法として、そのためのクラスを作ってしまうという方法があります。
2通り紹介します。

使いたいサイズのクラスを作る

では、大きいボタンを作るクラス(btn-large)と、小さいボタンを作るクラス(btn-small)を作り、それぞれのクラスやタグと組み合わせてみます。

<button class="btn btn-blue btn-large">ボタン</button>
<button class="btn btn-red btn-large">ボタン</button>
<a class="btn btn-blue btn-large" href="#">ボタン</a>
<a class="btn btn-red btn-large" href="#">ボタン</a>
<button class="btn btn-blue btn-small">ボタン</button>
<button class="btn btn-red btn-small">ボタン</button>
<a class="btn btn-blue btn-small" href="#">ボタン</a>
<a class="btn btn-red btn-small" href="#">ボタン</a>
.btn {
	border: 0;
	cursor: pointer;
	display: block;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	text-align: center;
	text-decoration: none;
}
.btn-blue {
	color: #ffffff;
	background: #5555ff;
}
.btn-red {
	color: #ffffff;
	background: #ff5555;
}
.btn-large{
	font-size: 16px;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 200px;
}
.btn-small{
	font-size: 14px;
	padding-top: 10px;
	padding-bottom: 10px;
	width: 100px;
}

ボタン

ボタンを使う場所によってサイズを指定する

ボタンのサイズはbtn-largeやbtn-smallで指定することができるようになりましたが、それ以外のサイズにするにはどういう方法がいいのでしょうか。
今作っているボタンを、親要素のパーツとして考える方法があります。

例えば、ヘッダーの中でボタンを使いたいとします。
その時、.headerというクラスがあったとして、そのパーツとして.header-btnというクラスを作り、サイズを指定する方法です。

<header class="header">
	<button class="btn btn-blue header-btn" href="#">ボタン</button>
	<button class="btn btn-red header-btn" href="#">ボタン</button>
	<a class="btn btn-blue header-btn" href="#">ボタン</a>
	<a class="btn btn-red header-btn" href="#">ボタン</a>
</header>
.btn {
	border: 0;
	cursor: pointer;
	display: block;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	text-align: center;
	text-decoration: none;
}
.btn-blue {
	color: #ffffff;
	background: #5555ff;
}
.btn-red {
	color: #ffffff;
	background: #ff5555;
}
.header-btn {
	font-size: 14px;
	padding-top: 10px;
	padding-bottom: 10px;
	width: 100px;
}

ボタン

CSSの書き方を工夫する

薄々感づいている人も多いかもしれませんが、.btnの指定を忘れた場合、思わないスタイルが当たる事になります。
例えば、このような感じです。

<a class="btn-blue btn-large" href="#">ボタン</a>
<a class="btn-red btn-large" href="#">ボタン</a>

ボタン

こういうことは本来、避けるべきです。
そこで、.btnがない場合、.btn-blueや.btn-largeが使えないように工夫します。

<a class="btn-blue btn-large" href="#">ボタン</a>
.btn {
	border: 0;
	cursor: pointer;
	display: block;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	text-align: center;
	text-decoration: none;
}
.btn.btn-blue {			/*.btnを追加*/
	color: #ffffff;
	background: #5555ff;
}
.btn.btn-large{			/*.btnを追加*/
	font-size: 16px;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 200px;
}

ボタン

これで、.btnを書き忘れた場合に、スタイルが適用されなくなりました。

クラス名を工夫する

上記のコードのクラス名は、.btn-blueを使っていますが、例えば、作っていたサイトのボタンを青色から変更したい場合に、btn-blueという名前を変更する必要が出てくる場合があります。
クラス名は、例えその役割が変わった場合でも、変更しなくてすむクラス名にしておくのがベターです。

そこで、blueではなく、primaryに変更します。

<a class="btn btn-color-primary btn-size-small" href="#">ボタン</a>
.btn {
	border: 0;
	cursor: pointer;
	display: block;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	text-align: center;
	text-decoration: none;
}
.btn.btn-color-primary {
	color: #ffffff;
	background: #5555ff;
}
.btn.btn-size-small{
	font-size: 16px;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 200px;
}

BEM の考え方を取り入れる

最後に、命名規則について考えてみます。
今回はBEMを使った命名規則で、CSSを分かりやすくします。

先ほどヘッダーにボタンを作った際のコードをボタンの数を少なくして、BEMを使ってみます。
blueやredといったクラス名も変更します。

BEMではクラス名を、Block, Element, Modifierの3つに分けて考えます。

block
block__element
block__element_modifier
block_modifier

modifier は key と value から成り立ちます。

例えば、btn は header の Element なので、 header__btn と命名し、ボタンのバリエーション違いは Modifier 、つまり btn_color_primary などと命名します。

<header class="header">
	<button class="btn btn_color_primary header__btn" href="#">ボタン</button>
	<button class="btn btn_color_danger header__btn" href="#">ボタン</button>
</header>
.btn {
	border: 0;
	cursor: pointer;
	display: block;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	text-align: center;
	text-decoration: none;
}
.btn.btn_color_primary {
	color: #ffffff;
	background: #5555ff;
}
.btn.btn_color_danger {
	color: #ffffff;
	background: #ff5555;
}
.header__btn {
	font-size: 14px;
	padding-top: 10px;
	padding-bottom: 10px;
	width: 100px;
}

詳しいBEMの命名規則については、「BEMによるCSS設計の方法を解説。命名規則から使い方まで。」をご覧ください。

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの"最強"カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます

gulp

gulpでsassをcssにコンパイル。インストール&便利な使い方。

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回は、gulpを使ってsassをcssに

Ameba customize

アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

どうも、@It_is_Rです。 ホームページを作成するには、まずHTMLを使う能力、若しくはソフトが必要になります。 さらにサーバーを借りなくてはなりません。するとお金がかかったりします。 では

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

WordPress

無料で広告なしのWordPressサイトを立ち上げる方法。

猫を飼っています。でも犬派です。何か文句ありますか? …まぁ、最終的に動物全般が好きなんです。爬虫類から哺乳類、鳥類まで好きです。動物を飼っている人、今すぐ写真を@It_is_Rに送り付けて下さい。

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

HTML CSS

CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

体重が50キロを切りました。@It_is_Rです。身長は171あります。 骨っていうなー! サイトを作る時、円形のパーツを作りたい時ってよくありますよね。画像を丸くして。。。なんてやっている人

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 WordPress テーマ自作シリーズ第五回目です。 今回から、本格的にテーマを作っていきます。 前回の記事はこちらです。 WordPres

ブログSEOに絶対的効果!人を惹きつける記事タイトルの考え方のコツ

ブログのSEO対策において、もっとも重要なのは記事の内容、そしてタイトルです。 情報を探している人はまずタイトルを見ます。つまりタイトルによって人がその記事をクリックするかどうかが決まります。

コメントをどうぞ!

メールアドレスが公開されることはありません。