css-tricks.com ここを見ると早い。 こうやって上下に隙間ができてしまうのを、 このように解除できる。 display: inline-blockになっている階層の上に、 font-size: 0px; /* display: inline-block で出来る上下の隙間へ対処 */ と書いてあげると、消せます…

public-constructor.com 親要素にposition: relative;を持たせ、実際重ねたい要素にposition: absolute;をもたせます。 これで重ねたい要素は親要素の位置を基準になります。 これに加えて、absoluteを指定した要素にはX軸とY軸の指定が必要なので、top: 0; …

idotdesign.net jQueryで疑似要素（:afterとか）を変えたいとき。でも疑似要素はjQueryから指定できません。そういうときはClassのつけ外しで対応しましょう。 .imgOnGreen::before { background-color: rgba($color: #26c52e, $alpha: 0.5); position: abso…

tech.motoki-watanabe.net tech.motoki-watanabe.net とか色々やりました。HTML側で画像を指定したほうがいいと。 しかしtransition効かせたいとかの場合、imgタグで書いてると出来ない。 結局は最適解はHTMLのタグにstyle属性でbackground-imageですね。

tech.motoki-watanabe.net とか書いといてあれですが、 画像をCSSでBackgroundで指定する方式は単純なプロジェクトならばいいものの、画像はそもそもスタイル定義というよりコンテンツ定義で、HTML側で指定したほうが良いケースが多い、と指摘を受けました。…

style01.net どうやら3つあるらしい。 今回は、これの1つ目の手法である 「画像をBackgroundとして使う」 で実装した。 $imgWidth: 1200px; $imgHeight: 400px; background: url(./img/img1.jpg) no-repeat; background-size: cover; width: $imgWidth; heig…

qiita.com この通りやろうとします。 MacなのでRubyは入ってるので、Sassのインストールを試みる。 まず普通に gem install sass しようとしたらエラー。Permissionがねえよと。 ERROR: While executing gem ... (Gem::FilePermissionError) You don't have …