Sassで、同じ要素同士の隣接セレクタの指定として .class { & + & { margin-top: 10px; } } みたいなのあるじゃないですか。なんかずっと腑に落ちてなくて、 .class { + & { margin-top: 10px; } } え、こうじゃないの？ってなぜか思ってたんですよねずっと…

Sassで & + & がなんか理解できていなかったのでちゃんと考える

【CSS】transitionプロパティ使用時に、Chromeブラウザで1pxずれる現象を回避する | バシャログ。 backface-visibility: hidden; これで謎のずれが消える。 backface-visibility - CSS: カスケーディングスタイルシート | MDN なんで消えるんですかね…？裏側…

CSSでhover時になぜか少しずれるときがある…対策

shinimae.hatenablog.com 基本的には、 select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; } これでいけるわけです。これでデフォルトで出る矢印のUIが消えてくれます。 しかし、IEではこれが効かない。 select{ -webkit-appeara…

select要素のデフォルトのUIを消す 特にIEでは特殊な記述が必要

nichiyogogo.com まあ直し方は簡単で、 outline: none; これで終わり。inputがfocusされてるときとかだと思うので、そのときにoutlineがブラウザによって規定のものが出るはずなのでそれを消せます。 まあただ、これ出るのには理由あって、健常者なら関係な…

ブラウザで見ると、選択時に青枠出るやつ。消したい。

手動で文章に改行を入れたくない。 wemo.tech 禁則処理、例えば句読点(,や.)が文章の先頭に来ないようにとか。 どこまでを禁則にするかによりますが、単語レベルで単語中では改行しないように、とかも出来ます。これらを改行調整することなく良い感じに自動…

CSSで禁則処理のおすすめ

sterfield.co.jp text-align: justify; text-justify: inter-ideograph; これで出来る。 基本はtext-align: justifyで問題ない。 text-justify: inter-ideographはIE用とのことだが、やってみたところ上手くいかなかったので諸説ある気がする。text-justify:…

テキストの両端揃え

こんな感じでタブで選んで中身のコンテンツを入れ替えたい。 わかりづらいがこの上がタブで、下がコンテンツ。 しかも、そのタブは上下にあり、どちらでも中身のコンテンツを入れ替えられる。 ↓下 つまり、 こういう感じ。 で、問題なのは、 ・このコンテン…

タブ切り替え等で中身のコンテンツの高さが変わる、display:noneで切り替えているときの、その切り替えているコンテンツの下の位置でスクロール位置保持

tech.motoki-watanabe.net IEでスムーススクロールのなんかでガタついてしまうという現象 があったが、これ以外にも、 どうやらposition:fixedの要素にz-index: -1 を指定すると、ガタついた。 原因は謎。z-indexを指定しない、もしくはz-index: 1を指定する…

position:fixedとz-index: −1の組み合わせはIEでだめかも

mo-ja.net これで解決。 つまり、スクロールを無効にして、JSで同じような動作を作って上げる必要があるそうです。 これをブラウザ判定して、IEやEdgeのときに上記のJSを効かせてあげれば解決します。

IEやEdgeでFixedした要素が、スムーススクロールがデフォルトでONになっているブラウザのためスクロールでガタつく

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

display: inline-blockで出来ることがある上下の隙間への対処

saruwakakun.com 背景画像にして、background-size: contain; にすればOK content: ''にして、background-image: url()で画像を指定し、background-size: contain で、width、heightで幅、高さで制御出来ます

疑似要素で画像を置いて、高さ幅を制御する

ってなりません？ ボタンとか、後ろから浮かせたいものにつけるシャドウ。 あと、Photoshopでドロップシャドウってついてるやつ、値とかそのままCSSに入れればOK、とならないんですよ。面倒くさいったらありゃしない。 developer.mozilla.org まあ影つけるや…

box-shadowってなに、PhotoshopのドロップシャドウからどうCSSに落とし込むの

cssで position : absolute な要素を中央に配置する（上下左右センタリング）｜プログラムメモ どういう論理なんですかね 親要素に position: relative; して、中央寄せしたい要素に position: absolute; left: 50%; transform: translateX(-50%); でOK。 ab…

position: absoluteの水平中央寄せ

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

display: inline-blockで出来る上下の隙間への対処

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

画像の上に文字を重ねたい時、positionでabsoluteとrelative。

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

jQueryの様々な指定の仕方。疑似要素とかidとか

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

HTMLCSSで画像のトリミング、最適解はHTMLのタグにstyle属性でbackground-image。

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

Webで画像のトリミング、backgroundを使わずに、今度はobject-fit。

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

CSSで画像のトリミングをする際にどれが良いかな

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

CSSをそのまま書くよりSassを使いたいのだが、Sassのインストールでエラー「ERROR: Failed to build gem native extension.」