コーディング時に画像下に隙間が出来る
- 2016.10.25
マージン/パディングでも解決しない場合、下記を画像に設定。 img { vertical-align: text-bottom; }
Coding
よく使う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%; }
メディアクエリ書き方
- 2016.10.24
- メディアクエリ
<link href="small.css" rel="stylesheet" media="screen and (min-width: 501px) and (max-width: 800px)" /> <link href="x_small.css" rel="stylesheet" media="screen and (max-width: 500px)" /> ■ […]
IE8でメディアクエリを使用する
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
mixinの書き方
- 2016.10.24
- mixin
@mixin jab { //共通設定内容 } ■呼び出し @include jab;
要素の内側にシャドウを付ける
- 2016.10.24
- 装飾
box-shadowに「inset」を付けることで影が内側になる。 box-shadow:0 8px 12px -8px #222 inset; @include box-shadow( 0 8px 6px -8px rgba(0, 0, 0, 0.3) inset);