ノンカフェインであなたにやさしい

Rails,HTML,JavaScript,jQuery,PHP,CakePHPなど

CSS

CSSで高さを可変にして縦横比(アスペクト比)を維持する

CSSで高さを可変にして縦横比(アスペクト比)を維持する方法です。 縦横比(アスペクト比)1:1のサイズで幅に合わせて高さを可変にしたい時などに使えます。 paddingの特性を使って実現しています。さっそく使い方から。 CSSで高さを可変にして縦横比(アスペク…

SCSSで.sass-cacheを作らないようにする方法

SCSSをコマンドラインからコンパイルしていると.sass-cacheが作られて邪魔だったので作らない方法です。 使うのはオプションの--no-cache scss --no-cache style.css.scss > style.css sassの使い方はこちらにまとまっています。 Sassコマンドの使い方を覚え…

'Resource interpreted as Image but transferred with MIME type text/html'とコンソールに出るときの対応

コンソールで以下の様な表示が Resource interpreted as Image but transferred with MIME type text/html Resource interpreted as Image but transferred with MIME type text/css MIME type text/htmlの場合は対象のhtml MIME type text/cssの場合は対象…

mixinでclearfixを使う

mixinでclearfixを使う方法です。 @mixin clearfix { zoom: 1; &:before, &:after { content: ""; display: table; } &:after { clear: both; } } header { @include clearfix; } clearfixはmicro clearfixを参考にしています。 A new micro clearfix hack –…

Firefoxにおいてtable系でposition:relativeが効かない問題

Firefoxにおいてtable系でposition:relativeが効かない問題についてFirefoxのバグではなくその他ブラウザのrelativeが効いてしまうというバグらしいです。 問題の細かい話についてはこちらのブログを参照してください table系にはposition:relativeが効かな…