よく使うcssハック
- 2016.10.25
- ハック
◯IE6〜IE8“以外”にハック #help_me { color: red; } :root *> #help_me { color: red; } ※IE用の設定を先に書き、その他ブラウザの設定を上書きする ◯IE8以下にハック #help_me { background: #ccaaff; background: #ccaaff\9; /* IE8 以下 */ } ※通常のプロパティの […]
css/sass
スクロールバーをcssで擬似的に隠す
- 2016.10.25
スクロールバーを非表示にしつつ、スクロール機能可能なように、スクロール部分のみ隠す。 スクロールエリアと同じサイズのDIVにoverflow: hidden;をかけ、スクロールエリアにはマージンを付け足す。 ■html <div id="wrap"> <div id="inner"> <h1>スクロール出来ます。</h1> <p>ああああ […]
リンクの指定優先度
- 2016.10.25
- まとめ
a:link ↓ a:visited ↓ a:hover ↓ a:active
アンカーの移動位置を調整する
- 2016.10.25
ページ内アンカーで移動する際に、移動後の表示位置を設定する。 例）110px 表示位置を下にずらす。（ヘッダー固定している場合など） ■html <h2 name="アンカー名" id="アンカー名" class="anchor">アンカー調整</h2> ■css .anchor{ /* アンカー移動位置調整 */ padding-top:110px; margin-top […]
コーディング時に画像下に隙間が出来る
- 2016.10.25
マージン/パディングでも解決しない場合、下記を画像に設定。 img { vertical-align: text-bottom; }
よく使うcompass記述
◯角丸指定 @include border-radius(0 0 4px 4px); ◯背景色 縦グラデーション @include background-image(linear-gradient(top, #292929, #666666)); @include filter-gradient(#292929, #666666, vertical); ◯ボックスシャドウ @include box […]
cssで横並びリストの区切り線を描く
li { display: -moz-inline-box; display: inline-block; *display: inline; *zoom: 1; } ul:before, li:after { content: " | "; color: #999; font-size: 11px; }
dlリストでdtをddの上下に対して中央揃えにする
- 2016.10.24
- dl
■html <dl> <dt>見出し</dt> <dd>内容</dd> </dl> ■css dl { display: table; width: 360px; border: 2px solid #ccc; } dt, dd { display: table-cell; padding: 0.5em 1em; vertic […]
チェックボックスを画像に変更する
- 2016.10.24
- checkbox
■html <input type="checkbox" id="check"> <label for="check">checkbox</label> ■css input[type="checkbox"] + label { display: block; background-image: url(../images/bg_checkbox_off.png […]
スマートフォン縦横向き変更時の文字サイズを自動調整する機能を無効化
- 2016.10.24
- 回転
■文字サイズを自動調整する機能を無効化 body { -webkit-text-size-adjust: 100%; }