CSS3
【CSS】他の値と計算する
$headerHeight : 100px; $menuHeight : 40px; #wrapper { padding-top : $headerHeight + $menuHeight; } こうすることで高さが変…
CSSセレクタ：liをカウントしてn個目以降非表示にする
5個目のliまで表示してそれ以降を非表示にしたい場合は以下のように記述します。 CSS li:nth-child(n+6) { display: none; } 参考：:nth-childの使い方CSSだけで画像をモノクロ表示にすることはできるが印刷には表示されない
以下のクラス指定などをモノクロ表示にしたい画像につけることで、モニター上でカラー画像をモノクロ表示にすることができます。 .grayscale { filter: gray; -webkit-filter: graysc…
nth-of-typeと子セレクタを組み合わせる(CSS3)
Elements:nth-of-type(n) は要素のn番目に対してCSSを定義できる。例えば以下のように使うと簡単に左右交互にdivを表示させることができる。 div.test{ float:left; } div.…CSSだけでオープン・クローズできるアコーディオンを表示する
jQueryを利用せずとも、CSSだけでクリックで開け閉めできるアコーディオン表示を実現できるようです。 CSS .listAccordion label { background: #f6f6f6; padding: …mixinでハック指定もまとめて書く
mixin @mixin border-radius($radius) { ←（）の中に変数指定 -webkit-border-radius: $radius; ←同じ変数指定 -moz-border-radius: $…SCSSでborder指定を綺麗にまとめる
div{ border:{ top:1px solid #000; left:3px solid #000; right:5px solid #000; bottom:none; } }