CSS のバックアップ(No.7)
- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- CSS へ行く。
- 1 (2010-10-26 (火) 12:52:57)
- 2 (2011-11-14 (月) 18:37:45)
- 3 (2011-11-15 (火) 06:14:24)
- 4 (2012-08-26 (日) 05:05:53)
- 5 (2012-11-29 (木) 01:48:54)
- 6 (2013-02-11 (月) 03:25:10)
- 7 (2013-02-18 (月) 22:43:39)
- 8 (2013-04-03 (水) 15:25:37)
- 9 (2013-04-08 (月) 21:45:15)
- 10 (2013-04-17 (水) 00:41:41)
- 11 (2013-06-09 (日) 04:47:19)
- 12 (2013-07-09 (火) 15:14:38)
- 13 (2013-08-07 (水) 15:07:45)
- 14 (2013-09-02 (月) 19:18:35)
- 15 (2013-09-03 (火) 22:58:52)
- 16 (2013-09-05 (木) 23:34:34)
- 17 (2013-09-10 (火) 00:43:33)
- 18 (2013-11-11 (月) 01:27:52)
- 19 (2013-11-19 (火) 04:58:43)
- 20 (2013-11-19 (火) 13:55:30)
- 21 (2013-12-27 (金) 14:21:36)
- 22 (2014-01-26 (日) 02:36:36)
- 23 (2014-02-05 (水) 14:03:34)
- 24 (2014-02-07 (金) 13:29:55)
- 25 (2014-03-04 (火) 12:08:55)
- 26 (2014-05-12 (月) 15:44:08)
- 27 (2014-05-21 (水) 19:47:46)
- 28 (2014-07-23 (水) 15:18:35)
- 29 (2014-08-06 (水) 16:02:54)
- 30 (2014-12-02 (火) 11:00:20)
TIPS
フォームのカスタマイズ
ラジオボタンの代わりに画像でボタンを表す方法を調査しました。
画像と組み合わせたフォームカスタマイズ方法が色々載っていました。
- [PHP & JavaScript Room]フォーム要素のカスタマイズ ... ボタン押し画像、ボタン離し画像を重ねる方法。それぞれ１枚の画像となっている。お手軽なのでこちらを採用
- [Webクリエイターボックス]CSS3とjQueryでフォームを美しく装飾する方法 ... デザイナManaさんの運営するWebクリエイターボックスは色々勉強になりそうです。ポートフォリオもよくできていて、名刺やAboutもスキルが一見して分かるデザインがいいです。
画像を中心に配置する方法
テキストと画像の縦方向を中央寄せする方法
イメージに次のクラスを指定します。
.middle {
vertical-align:middle;
}
ラジオボタンサンプル
<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
}