HTMLの構造化 - テキストボタン編 - 1/2

「HTMLの構造化 - リストタグ レイアウト編」では、「リストタグ」を使ったメニューの構造化をご紹介しました。

今回は、前回作成したメニューのデザインをする前に、「テキスト」と「CSS(スタイルシート)」を使ったボタンの作成方法をご紹介したいと思います。

※「CSS」の詳細は「CSS2.1[日本語]」などをご覧ください。

例えば、「お問い合わせ」ボタンを作成するとします。
ベースになるものとしてリンクに「#」を指定したものを用意します。

<p class="menu-list"><a href="#">お問い合わせ</a></p>

次に、「CSS」でデザイン要素を指定します。
注意点としては、後ほどここで作成したボタンをリストタグに組み込みますので、セレクタは「.menu-list a」とし、リンクタグが指定される様にします。

次にデザイン要素を宣言ブロックに指定します。
フォントの色を「白」に指定　　　color: #FFFFFF;
ボタンの横サイズを指定　　　　width: 120px;
バックグラウンドの色を指定　　background-color: #999999;
余白を指定　　　　　　　　　　　　padding: 5px;
　※文字と輪郭との間隔を空けます。
マージンを指定　　　　　　　　　margin: 0px;
　※ボタンを並べた時に隙間ができないようにします。
輪郭線の太さを指定　　　　　　border-XXXX-width: 2px;
　※XXXXはそれぞれ指定の場所になります。
輪郭線のスタイルを指定　　　　border-XXXX-style: solid;
　※XXXXはそれぞれ指定の場所になります。
輪郭線の色を指定　　　　　　　border-top-color: #XXXXXX;
　※色は左と上部をバックグラウンドより明るい色、それ以外を暗い色にするとボタンらしく見えます。

注意点としてはこのほかに「display: block;」を指定してください。
これがないと、ボタンの様に表示されません。

通して書きますと以下の様になります。

.menu-list a{
	color: #FFFFFF;
	width: 120px;
	display: block;
	background-color: #999999;
	padding: 5px;
	margin: 0px;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #666666;
	border-bottom-color: #666666;
	border-left-color: #CCCCCC;
}

今指定した「CSS」をPタグに適用すると以下の様になります。

お問い合わせ

いかがでしょうか？
画像で作成したボタンと同じ様にボタンのデザインになっている部分すべてからリンクできる様になっています。

しかし、ここまで作成したら、「JavaScript」を使った様な「onMouseOver」でバックグラウンドの色が変わるボタンを作成したくなります。

次回は、「CSS」のみで「onMouseOver」で色が変わるボタンの作成方法をご紹介したいと思います。

◇この記事が参考になりましたらこちらをクリック ≫ 人気blogランキング

◇「『うぇっぶ』のはなし」へのコメント募集中 ≫ ビジネスブログランキング100選