z-index再入門 | 第1回 z-indexの仕組み
次のようなケースでは、冒頭のサンプルのような意図しない重なりになる可能性が高いため注意が必要です。 positionプロパティの値をrelative、absoluteにし、かつz-indexの値をauto以外の整数値にしたとき positionプロパティの値をfixed、stickyにしたとき なぜなら、上記の条件下では、スタック文脈というものが形成されるからです。次に、スタック文脈を解説します。 スタック文脈とスタックレベル スタック文脈（stacking contexts）、スタックレベル（stack level）という概念は、z-indexを扱う上でとても重要なものです。 スタック文脈 スタック文脈とは、ある条件を満たした要素によって形成される階層構造（文脈）のことです。 スタック文脈を形成する条件は前述した通りですが、例えば、position: absoluteとz-indexに整
#767676
僕はウェブデザインでグレーのテキストを使うとき、背景色が白（#ffffff）なら、前景色を#767676かそれより暗くするようにしています。これがWCAG 2.0の達成基準「最低限のコントラスト（レベルAA）」を満たすもっとも明るいグレーだからです。 ちなみに、背景色が黒（#000000）のとき上記達成基準を満たすもっとも暗いグレーは#757575です。つまり、#767676または#757575のテキストは、背景が白でも黒でも最低限のコントラストを確保できます。またこれらの背景色と前景色を入れ替えても同様で、#767676または#757575の背景ならテキストが#ffffffでも#000000でもOKです。 フォントのサイズやウェイトによってはこの限りではないし、背景色が真っ白や真っ黒でない場合はツールなどを使って検証する必要がありますが、とりあえずこの#767676という値を覚えておくと
SCSSと付き合う上でやって(知って)よかったこと8選 - Qiita
なんだかノウハウ溜まってきた感あるのでまとめる。 1. prefixの付与はautoprefixerに任せる方が良かった 基本的な部分だが、SCSSになんでもかんでもやらせようとするのはよくない。 例えば下記のようなprefix div { -webkit-box-shadow: 0px 0px 10px rgba(255,0,0,.5); -moz-box-shadow: 0px 0px 10px rgba(255,0,0,.5); box-shadow: 0px 0px 10px rgba(255,0,0,.5); } sass/scssであればCompass、Bourbon、lessであればLESSPrefixerなど、mixinとしてprefix付与を提供してくれるライブラリがあったりするが、これよりもautoprefixerによる解決をおすすめしたい。 gulpなどを導入していな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
