NEW ENTRY
フォームのデザインをCSSで変更しても、iPnoneでは初期状態の丸角デザインのままで、指定したCSSが適用されません。そういうときは、webkit用のCSSを設定します。
CSSコード
input {
-webkit-appearance: none;
border-radius: 0;
}INDEX
CSSの基本
- リセットCSSとノーマライズCSS
- CSSを記述する際フォーマットルールを作る
- プロパティの指定順序を固定する
- DOCTYPEスイッチの3つのモードについて
- 各ブラウザの独自プロパティの実装状況
- CSS3対応のCSSセレクタ一覧
- コーディングガイドラインを作成する
- ショートハンドプロパティを使いこなす
- id名やclass名に命名規則をつける
- YUI Reset CSSを使ってデフォルトスタイルシートをリセットする
- id名、class名は意味のある名前をつける
- 各ブラウザのCSSの実装状況
- Firefoxのデフォルトスタイルシートの見方
- ボックスモデルを理解する
- セレクタを理解する
- UIのデフォルトスタイルシートの初期化方法
- スタイル適用の優先順位を理解する
CSSの小技
- CSSの：before擬似要素を利用して、高さの違うboxの背景色を揃える方法
- 高さを固定したボックスの中の要素を上下中央寄せする方法
- backgroundで指定した画像をブラウザ幅に合せて拡大・縮小させる方法
- 固定幅ボックスの左右に背景画像を配置する際の斬新な方法
- Youtube動画をレスポンシブWebデザイン対応にさせる方法
- iframe（インラインフレーム）風の小窓ボックスを作る方法
- ページを縮小しても画像の中心がずれないようにする方法
- IE8以降で実装可能な、ボックスを上下左右中央に配置する方法
- リストの先頭を揃えたまま左右中央寄せにする方法
- 表示領域をはみ出したテキストを「・・・」で省略して表示しないようにする方法
- テキストと画像の縦方向を中央寄せする方法
- 画像を中央寄せにする方法
- 新着情報の日付とテキストに同一のアンカーをつける方法
- hrタグで1pxの線を引く方法
- 主要のブラウザで縦スクロールバーを出す方法
- word-breakプロパティとword-wrapプロパティの違い
- 改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効
- 決定版！？Clearfixのソースコードはここまで短くなった
- CSS3のアニメーション機能を利用してメニューを彩る
- コンテンツ量が少なくてもデザインくずれを起こさないようにフッターを固定する
- カーソルを合わせたメニューを強調する
- 基本的な縦型リストの作り方
- アクセシビリティの高いCSSロールオーバーメニュー
- IE6でもposition:fixedと同じ動作をさせる（改訂版）
- 横並びにした画像にテキストが回りこまないようにする方法
- 余白のあるメニューの特定の余白を消す方法
- first-childあるいはlast-childを使用しないでリストの罫線を消す方法
- IE6でもposition:fixedと同じ動作をさせる
- CSSでドロップダウンメニュー
- IE6でも子セレクタを使う
- ちらつきのないCSSロールオーバーメニューを作る
- floatしたボックスの親要素の内容物を表示する方法
- floatしたボックスの回り込みを解除する方法
- floatで並べたリストを中央揃えする
- 横罫線hrに画像を使用してブラウザの差異を無くす
- 画像を利用して高さの違うボックスの下辺を揃える
- 2段カラムの作り方（float編）
- 垂直marginは相殺（折りたたみ）することを考えてボックスに余白をつける
- CSSのみでロールオーバー効果のメニューを作る
- 引用部分ということがわかりやすいデザインにする
- 定義リストを横並びにする
- 基準となる文字サイズを最初に決めておく
- リンクをブロック構造にする
- テキストが含まれる要素にはline-heightを指定する
- 擬似フレームを作る
- テンプレートの背景画像は固定化する
- 外部リンクか内部リンクかを視覚的にわかるようにする
- リンクをクリックしたときに表示される破線をCSSを使って消す
- リスト(liタグ）で作ったメニューを横並びにする
- リストマークを好きな画像にする
- 行間を空けてテキストを読みやすくする
- 文字サイズの異なるテキストをかぶらないようにする
- テンプレートを左右上下中央寄せにする
- ドロップキャップでテキストを目立たせる
- FirefoxでもOperaでもスクロールバーを出す
- Firefoxで常にスクロールバーを出す
- テンプレートをセンタリング（中央寄せ）
- ※（注釈）をつける際はぶら下げインデントを使う
- 字下げをして可読性を上げる
ヘルプ
- iPhoneでinput要素などHTMLフォームのCSSが変更されない
- IEでline-heightが効かない
- IEで画像の上部に余白が空く
- IE6でposition:absolute;bottom:0を指定した要素が消える
- IE6でborderが表示されない
- メニューをinline要素で横並びしたときに余白が空いてしまう
- IE6で、floatした要素にmarginを指定すると値が2倍になる
- リストをfloatで横並びにする際、画像の下に余白が空く
- IEでimgにpaddingが効かない
- CSSファイル内で日本語が文字化けする
- formタグの上や下に隙間（空白）が空いてしまう
- imgタグで指定した画像の下にわずかな隙間（空白）が空いてしまう
- letter-spacingを使用したら改行がうまくいかなくなった
