CSS のバックアップ(No.3)

TIPS

↑

フォームのカスタマイズ

ラジオボタンの代わりに画像でボタンを表す方法を調査しました。
画像と組み合わせたフォームカスタマイズ方法が色々載っていました。

[PHP & JavaScript Room]フォーム要素のカスタマイズ ... ボタン押し画像、ボタン離し画像を重ねる方法。それぞれ１枚の画像となっている。お手軽なのでこちらを採用
[Webクリエイターボックス]CSS3とjQueryでフォームを美しく装飾する方法 ... デザイナManaさんの運営するWebクリエイターボックスは色々勉強になりそうです。ポートフォリオもよくできていて、名刺やAboutもスキルが一見して分かるデザインがいいです。

↑

画像を中心に配置する方法

画像を中心に配置する方法

↑

ラジオボタンサンプル

<fieldset>
     <legend>ラジオボタン</legend>
     <label for="r1">ラベル1</label> 
     <input type="radio" value="1" name="radionone" id="r1"/>　
     <label for="r2">ラベル2</label> 
     <input type="radio" value="2" name="radionone" id="r2" checked="checked"/>　
     <label for="r3">ラベル3</label> 
     <input type="radio" value="3" name="radionone" id="r3"/>
</fieldset>

↑

テーブルをセンタリングする方法

左右マージンにautoを設定します

caption {
	font-size: 1em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.5em
}
table {
	background: #008080;
	margin-left: auto;
	margin-right: auto
}