css

relativeの入れ子構造でz-indexの扱い

css

relativeがネストした構造例えば疑似要素:afterでposition:absoluteしてz-indexを-1として影を付けた場合、 これ単体では正常に動くが、その要素の中でさらに同じように疑似要素:afterでposition:absoluteしてz-indexを-1として影を付けようとすると、中の疑…

付箋のように紙がめくれる表現

css

これは実際に使ってみると、対象のDIVが固定でないと使えない。また、サイズによって調整が必要。つまり、height:100%,width:100%などのように可変の要素には使えない。 [CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシー…

flexboxにするには

css

そろそろ使ってもよさそうだが、IE用にjavascriptを入れておく これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス

height:100%やwidth:100%を指定して、paddingを設定して要素がはみでる場合

height:100%やwidth:100%を指定して、paddingを設定して要素がはみでる場合 box-sizingをborder-boxにしてやると収まる box-sizing-CSS3リファレンス

2016年css resetは何を使ったらいい?

css

normalize.cssを使っておけばよさそう。結論としては、css resetをベースに最近のブラウザの状況に合わせて、自分で付け足していくという感じがいいと思われる。normarize.cssは、べたなhtml文書、background-imageや、段組み、floatを使わない場合にはいい…

背面にある要素のマウスイベントを発火する

pngなどの透過な素材を前面に置いてちょっとこじゃれたデザインを使用したいという時によくある話。透過といえど、普通にそのままだとクリックを阻害する(現実で言うところのガラスがあるのと同じ) ので、昔はJavascriptで、クリックイベントを透過するよう…

縦横中央に表示する方法

ぐぐると、沢山でてくるが、どれも過去の方法だったりして、実際に使える方法のページが出てこないので、備忘録としてメモ [CSS]サイズが分からない要素を真ん中に配置するテクニック | コリス [css] CSS3時代の上下中央に配置するパターン – WebTecNote

position absolute fixedでのheight:100%

css

position absolute またはfixedで子要素を画面一杯に広げようとしてheight:100%を指定すると、子要素でも、画面の高さを同じ高さになってはみ出す。そもそも、position absolute、fixedは絶対配置なので、高さで指定せず top,bottomで表示位置を指定すればよ…

width:100%で要素がはみ出す

paddingを設定していて、width:100%を設定すると発生する。 これは仕様paddingもwidth:100%に含めたいならcssのboxsizingのborder-boxを指定する 参考 http://tmlife.net/web/css3/css3-box-sizing.html