ウェブサイトの見た目を大きく左右するCSS。
私も昔に、ウェブサイトを個人で作成していた時期もありましたが、
そのときは、CSSの概念など理解も出来ず、
タグに直接打ち込んでの原始的とも言える方法で行っていました。

しかし、ひとたびCSSを理解し始めると、
CSSだけでデザインの大半を担う事がわかるようになり、
むしろCSS側でないと、色々と不自由が発生するようにも思えてきました。

まず私が言いたいのは、
デザインはCSSで行う事を前提で構築したほうがいいです。

HTMLのBODY側のタグに直接スタイル要素などを埋め込むのは、
そのページでしか使わない、流用の可能性のないコンテンツに留めるか、
極力「id」属性や「class」属性に留めておいたほうがいいでしょう。
じつは私も、「id」と「class」の違いについては、よくわかってはいないのですが、
ともかく、それでもタグに埋め込む属性は、極力「id」か「class」、
そして説明用の「alt」程度に留めておくのがいいでしょう。

じつは画像もCSSで使う事ができます。
それはもちろん、背景を設定するという点で、
画像を使用できる事はご存知な人も多いでしょうが、
やろうと思えば「img」タグのような使い方も可能ではあります。

ボタンの類もCSSで作る事は可能です。それも自作の画像を使用してのです。
画像ボタンと言えば、「img」タグで画像を指定し、それを「a」タグで囲み、
マウスオーバー（マウスポインタを重ねたとき）、
クリックしたとき、マウスアウト（マウスポインタが、その要素から外れたとき）
のイベントをJavaScriptをタグに埋め込んで指定する、
といった方法が主流のひとつでもあると思いますが、
じつは、これもCSSだけで可能です。
しかもこの例なら「img」タグは不要です。

CSSには、マウスオーバーも、クリック時のスタイルも設定する事が可能です。
先ほどの例ならば、「a」タグだけを残し、
それに対して固有のクラス属性をタグに付与、
そのクラスに対して画像と同じ幅・高さを設定し、背景画像を指定します。
この時点で、まず画像だけが表示されます。

次にそのクラスへの指定に加え、「:hover」を語尾に追加する事で、
マウスオーバー時のスタイルを設定できます。
つまり、マウスオーバー時のみこのスタイルが適用され、
離すと元に戻るという追加要素を設定できます。
マウスボタンを押下中は、「:active」で設定できます。

「:hover」を加えたところには、マウスオーバー時の画像のみを指定し、
「:active」の部分には、ボタン押下時の画像を指定するといった具合です。

以下は、サンプルのボタンを作成してみました。
ボタンは「input」タグを使用していますが、「a」タグや「span」タグ等でも可能です。

サンプルのCSSコード

/* 基本となる画像とスタイルの指定 */
.sample_button{
	/* 背景画像を指定。これがボタンの基本の見た目になる */
	background-image:url(/wp-content/uploads/2013/05/sample_button01.png);
	
	width:200px;height:84px;	/* 要素を画像と同じ幅・高さに設定 */
	background-repeat:no-repeat;	/* 画像の繰り返し配置を無効にする */
	display:block;	/* 要素をブロック要素にする。成功率が向上 */
	border:none;	/* 余計な枠線を消す */
	cursor:pointer;	/* ついでにマウスポインタを指に変更してみる */
	
	/* 要素に文字がある場合、その文字を見えなくする */
	text-indent:-999px;	/* 文字を要素の外に配置する */
	overflow:hidden;	/* 外に出た文字を見えなくする */
}

/* マウスオーバー時に画像のみを入れ替える */
.sample_button:hover{
	background-image:url(/wp-content/uploads/2013/05/sample_button02.png);
}

/* マウスボタン押下時に画像のみを入れ替える */
.sample_button:active{
	background-image:url(/wp-content/uploads/2013/05/sample_button03.png);
}

いちばん上の部分で、ボタンの構造を設計します。

それ以降の「:hover」「:active」は、マウスオーバー・押下時のスタイル。
ここでは、背景画像しか設定していませんが、
背景画像のみを上書きする形で、それ以外の要素は、
最上段の本体ともなる部分から継承しています。

このように、スタイルで設定する方法を取れば、
例えば各ページの「戻る」「次へ」「ＨＯＭＥ」のようなボタンも
一発で全ページ一括設定でき、手間もかからなくなります。

ちなみにこのサンプルの画像は、背景画像であり、
「img」タグのように、右クリックやデスクトップなどに対し
ドラッグ＆ドロップする事で、画像保存できるタイプではありません。
むしろ、その方がボタンとしては都合がいいかもしれません。

この方法ではなく、タグにマウスオーバー・押下時のイベントを入れると、
タグに直接画像パスを入れる必要があり、もし別名の画像を使いたいと思ったら、
それこそ１ページずつ全部変更する必要も出てきます。

また、ボタンに限らず、完全にその要素のスタイルを、
これに確定したいという場合でもない限りは、
なるべくタグに直接「style」属性でのスタイル指定を避けたほうが賢明です。
スタイルの適用は、下に置かれたCSSほど優先され、
そしてタグに直接埋め込まれたものが最優先され、
それに対するスタイルの変更が困難になる場合があります。

そうなれば、JavaScriptでHTMLを表示した後で
タグを編集するようにプログラムを組む事で解決も可能ですが、
言ってしまえば、この方法は無駄とも言えます。

また、タグに対するidやクラス指定も怠っていると、
特定の箇所のタグだけに対するスタイルの適用も難しくなります。
また、JavaScriptでもjQueryを用いたとしても、
その順番、属性の中身など、その要素の置かれた状況を予測して探し出すという、
非常に不確定かつ妙な指定の仕方にもなってしまいます。

なので、HTMLタグにはなるべくidまたはクラス指定に留め、
かつそれを忘れないように配慮する。
こうする事で、コードも冗長になりすぎず、まとまりができ、
一括編集も可能になり、忘れた頃に後で編集する事も容易になります。

Tweet