- 追加された行はこの色です。
- 削除された行はこの色です。
*TIPS
**フォームのカスタマイズ
ラジオボタンの代わりに画像でボタンを表す方法を調査しました。~
画像と組み合わせたフォームカスタマイズ方法が色々載っていました。
-[[[PHP & JavaScript Room]フォーム要素のカスタマイズ>http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_forminputcustomize]] ... ボタン押し画像、ボタン離し画像を重ねる方法。それぞれ１枚の画像となっている。お手軽なのでこちらを採用
-[[[Webクリエイターボックス]CSS3とjQueryでフォームを美しく装飾する方法>http://www.webcreatorbox.com/tech/css3-jquery-form/]] ... デザイナManaさんの運営する[[Webクリエイターボックス>http://www.webcreatorbox.com/]]は色々勉強になりそうです。[[ポートフォリオ>http://www.webcreatormana.com/?lang=ja]]もよくできていて、[[名刺>http://www.webcreatormana.com/graphic/business-card-design-for-mako/]]や[[About>http://www.webcreatormana.com/about-j/?lang=ja]]もスキルが一見して分かるデザインがいいです。
**画像を中心に配置する方法
-[[画像のセンタリング | Qiita sassy_watson氏>http://qiita.com/sassy_watson/items/c012779b831d82b26202]]
-[[画像を中心に配置する方法>http://www.koikikukan.com/archives/2008/04/16-003030.php]]
-[[CSSのみで画像を背景（画面全体）にアスペクト比を崩さず中央配置する | そぷログ>http://soplog.skr.jp/web/background-fill-image.html]]
-[[画像を上下中央に表示する（IE7以下にも対応させる） | バシャログ>http://c-brains.jp/blog/wsg/13/04/08-111325.php]]
**テキストと画像の縦方向を中央寄せする方法
イメージに次のクラスを指定します。
.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
}
*リンク
-[[スマートフォン対応でよく使うhtml、css、javascriptのまとめ>http://kazu69.net/blog/memo/1023]] ☆☆☆
-[[メンテナブルCSS | 株式会社サイバーエージェント>http://www.cyberagent.co.jp/recruit/techreport/report/id=7926]]
-[[パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック | コリス>http://coliss.com/articles/build-websites/operation/css/centering-percentage-widthheight-elements-by-css-tricks.html]]
-[[東京渋谷 “HTML5+CSS3アニメーション” 勉強会(7/21)の資料を公開します | とのさまラボ>http://tonosamart.com/blog/html5-css3-7-21/]]
-[[background-size:coverで背景画像をフルスクリーンにフィットさせたレスポンシブウェブデザイン | DRESS CODING>http://dresscording.com/blog/responsive/background-size.html]] ... 背景写真を画面一杯に表示する方法
-[[box-shadowを極める | 0から目指すWebマスター>http://www.allinthemind.biz/markup/css/box-shadow.html]] ... その他色々まとまっていて、パンクズリストからたどれます。
-[[ボーダーでいろいろ / CSS Refreshers: Borders | Nettuts+>http://net.tutsplus.com/tutorials/html-css-techniques/css-refreshers-borders/]]
-[[CSSでアニメーションを作るのがグッと楽になるアニメーションライブラリ>http://w3q.jp/t/4116]]
-[[CSSサンプル集 | TypeSquare>http://typesquare.com/sample/csseffect/]]
-[[スマフォ・タブレットなどのデバイスを判定し、CSS/JavaScriptで簡単に利用できるようにするスクリプト | コリス>http://coliss.com/articles/build-websites/operation/javascript/js-devicejs.html]]
-[[iPadやiPhoneなど、デバイスごとに最適化したCSSを読み込む Media Queries | havelog>http://havelog.ayumusato.com/develop/css/entry-95.html]]
