メディアクエリ書き方
- 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)" /> ■ […]
css/sass
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 { […]
リマーケティングタグ挿入時の隙間を無くす
- 2016.10.24
- リマーケティングタグ
スタイルシートに下記を挿入する。 iframe[name="google_conversion_frame"] { position:absolute; }
IE9でtableをdisplay:block;する
- 2016.10.24
- display:block, IE9, table
@media(max-width:640px){ table{ border-collapse:collapse; } th,td{ float:left; clear:both; } }
横並びリストを中央に寄せる
- 2016.10.24
- 装飾
ul { text-align: center; li { display: inline; } } ————- ul.ct{ left: 50%; margin: 0; position: relative; } ul.ct li { float: left; font-weight: bold; margin-right: 5px; left: […]