【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設計の方法を解説。命名規則から使い方まで。」をご覧ください。

スポンサードリンク

コメントをどうぞ!

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




オススメ記事

Swift

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

Android アプリ開発入門! Android Studio のインストール手順。

人の笑顔が大嫌い。 @It_is_R です。 Android アプリ開発では、 Eclipse や Android Studio を使ってアプリを開発するのが一般的です。 一般的に言語は Ja

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

iPhone持ってないみなさん、一緒にAndroidアプリ開発しましょう。@It_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

Ameba customize

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

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

gulp

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

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

enchant.js

HTML5 と javascript ( enchant.js )を使ったアクションゲーム開発。

以前、Flashを使って、横スクロールアクションゲームを作ろうとしていたのですが、実はAndroid4.xではFlashPlayerがサポートされておらず、最近のAndroidではFlashPlaye

WordPress | ツイート数やシェア数付きのSNSシェアボタンを自作しよう!

最近SNSシェアボタンを作り直した@It_is_Rです。 せっかく作ったんだから、シェアするのだよ、みんな。 そこで今回は、Twitter や Facebook、GooglePlus、はてな

【Android Studio】新規プロジェクトを作成する方法。

インスタント焼きそばを作ろうとすると、なぜか焼うどんになります。 @It_is_R です。 しかも、ラーメン作ろうと思うと焼きそばができあがります。 前回、 Android Studio のイ