チェックボックスを画像に変更する
- 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年
スマートフォン縦横向き変更時の文字サイズを自動調整する機能を無効化
- 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);
Internet Explorer 8（IE8）で効かないcssプロパティ
* nth-child * nth-last-child * nth-of-type * nth-last-of-type * last-child * first-of-type * last-of-type * only-child * only-of-type
フロート回り込み解除（最新）
- 2016.10.24
- clearfix
/* フロート回り込み解除 .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1 […]
dl dt ddリストの横並びスタイル
dl { width: 500px; border: 1px solid #999; border-top: 0; line-height: 1.5; background-color: #666; overflow: hidden; } dt { float: left; width: 130px; padding: 10px; border-top: 1px solid #999; font- […]
css要素のデフォルトスタイル
html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { display: block; unicode-bidi: embed } li { […]