CSS の変更点

Top / CSS
追加された行はこの色です。
削除された行はこの色です。
CSS へ行く。
CSS の差分を削除
*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]]
-[[HTMLにおける画像のセンタリング方法について | 代助のブログ>http://daisukeblog.com/?p=2220]]



**テキストと画像の縦方向を中央寄せする方法
イメージに次のクラスを指定します。
 .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
 }



*iPhone mobile Safariのフォント表示
:フォントサイズ|16px
:日本語フォントタイプ|ヒラギノ角ゴシックProN W3
:英数字フォントタイプ|Times New Roman
:行間|17.6px

iPhoneの向きを変えた時のフォントサイズ自動調整をオフにする方法
 <body style=”-webkit-text-size-adjust:none;”>

iOSのデフォルトフォントはiOS 7でHelvetica NeueからHelvetica Neue Ultra Lightに変更となりました。~
またこちらのリンクも参照してください。[[iOS7のフォントはヒラギノ角ゴシックW1とW2>http://dev-cat.blogspot.jp/2013/10/ios7w1w2.html]]

-[[iOS 7 で使えるフォント名一覧 | Over&Out その後>http://d.hatena.ne.jp/shu223/20131017/1381992664]]
-[[Google Fontsで手軽にエフェクトを付加する方法 | NxWorld>http://www.nxworld.net/tips/google-fonts-enabling-font-effects.html]]



*リンク
-[[スマートフォン対応でよく使う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]]
-[[スマートフォンサイト制作時に覚えておきたいCSS 15 | NxWorld>http://www.nxworld.net/tips/15-smartphone-css-tips.html]]
-[[スクリプトは最小限！レスポンシブ対応CSSベースの軽量フレームワークのまとめ | コリス>http://coliss.com/articles/build-websites/operation/css/best-of-css-frameworks-for-web-developers.html]]
-[[デベロッパーツール入門カテゴリー | ハイファイブクリエイト>http://highfivecreate.com/blog/course/developer_tools]]
-[[AniJS, Declarative handling library for CSS animations>http://anijs.github.io/]]
-[[CSS3でつくるキャラアニメーション | 1pixel>http://s.ameblo.jp/ca-1pixel/entry-11853455663.html]]
-[[【CSS】iPhone で iframe の横幅がハミ出してしまう問題の解決法 | バシャログ。>http://c-brains.jp/blog/wsg/14/07/23-120043.php]]
-[[Beemuse>http://beemuse.com/]] ... CSSでステッチなどの表現
http://coliss.com/articles/build-websites/operation/css/css-tips-for-fence-range-line.html

-[[Apple風のかっこよくて美しいデザインの背景49種類を簡単に実装できるスタイルシート -HUE.css |  コリス>http://coliss.com/articles/build-websites/operation/css/gradient-background-hue-css.html]]