CSS
CSS の word-break: auto-phrase; がすごい。日本のウェブ制作者が求めていたもの。「文節」での折り返し指定ができます。現行のChrome 119やEdge 119で利用可能。 pic.twitter.com/P7wCpHjeDW— 池田 泰延 (@clockmaker) 2023年12月6日 ええ〜すご！<br />で改行し…
svgを色変えたりしたい場合、imgタグの読み込みではfill設定できないのでsvgをコードで埋め込んでfillの値を変えて色を変える…とかやってきたけど、いまはIEを気にしないでよいのであればimgタグで読み込んだ上でmask-imageでできるじゃん、というツイートを…
objectのdata属性で読み込んだsvgの中にあるaタグに対してJSやCSSをあてたい。 qiita.com 別documentになるので、普通にJSやCSSはあたらない。上記Qiitaにあるようにobjectをとってきてその.contentDocumentをとり、そこに対してJSを当てる必要がある。 cons…
hirakublog.com qiita.com z-indexとかwill-changeとかもあるのだけど、つまるところ重ねあわせコンテキストを作ってあげれば直るみたい。ホバー時に中身でopacityなりtransformなりしていると思うのだけど、それらで重ね合わせコンテキスト的になんかバグっ…
chaika.hatenablog.com
ちょっと明確なソースがあるわけではないので確証はない。 iOS Safariでキーボード(Virtual Keyboard)を開いている際にposition: fixedの挙動がおかしいっぽい。 iOS Safari Virtual Keyboardを開いている position: fixed; bottom: 0; の際に、 スクロール…
www.seleqt.net なんかそういえばそういうのあったな…気づかなかった…しょうがないのでJSでwindow.innerWidthとか入れてそれでstyled-componentsで計算させた。 Safari で vw, vh などを calc() と一緒に使うとレスポンシブじゃなくなるバグまだ直ってないで…
coliss.com developer.mozilla.org めちゃ便利。例えばwidthとかならmin-widthとかmax-widthがあるのですが、最小と最大が設定できたのってむしろ今までそれくらいで、大半は出来なかった。JSで無理やりどうにかするしかなかったと思う。（例えばleftとか） …
iOSのSafariはブラウザ開いた際に出るステータスバー分、タップできないエリアが存在する。ここの領域はステータスバーが出ていないときはタップが無効になる。 また、iPhoneX以降はセーフエリアというのが存在する。周囲のノッチの周囲あたりがセーフエリア…
よく要素をopacityで消したりすると思うのですが、opacityで消すと要素は残るのでタブで移動とかするとカーソルがあたってしまうのです。なので、アクセシビリティ気にする必要あるのであればopacityでは厳しい。 なので、その場合はカーソル当たらない状態…
qiita.com const elm = document.querySelector('.elm'); const style: CSSStyleDeclaration = window.getComputedStyle(elm); const lineHeight = style.lineHeight; のように、して、実際に計算された後のCSSの値をとってこれます。 こちらの結果は21pxの…
note.com neos21.net tamagondq10.blogspot.com タイトル通り、 overflow: scroll と padding-bottom を同時に使うとpadding-bottomが効かないらしい。 なので、display: blockで高さある疑似要素をafterとかで入れてあげると解決する。
developer.mozilla.org
[CSS] Firefoxでborderが表示されない場合の対処 | metrograph.jp position: relative; border background-color このかみ合わせがIEやFirefoxで悪い… Firefoxに関して言えば、z-index: -1;を指定してあげることでbackground-colorがborderの下にいってくれ…
position: fixed; margin: auto; max-width: 1200px; これ、IEで効かずに中央寄せになっちゃう。 stackoverflow.com これが解決策だった。 position: fixed; margin: auto; max-width: 1200px; width: 100% これ。max-widthがIEで意外とバグるイメージ。max-…
qiita.com これを読んで。最適化とか表示早くするのが特に必要なものならここらへんのチューニング必要なのかもしれないなーと思い調べてみようと決意。ちなみにこれ書いてる現状はなにも知らない。 JavaScriptの非同期読み込み qiita.com 全然気にしたこと…
qiita.com このQiitaが参考になります。 一応HTMLのタグとして存在はしているものの、そこもline-heightに含まれてしまうが故に見た目として悪い。のでこのQiitaのようにdata属性に読みがな降ってあげるのが正しそう。 アクセシビリティ的に気にする必要ある…
Sassで、同じ要素同士の隣接セレクタの指定として .class { & + & { margin-top: 10px; } } みたいなのあるじゃないですか。なんかずっと腑に落ちてなくて、 .class { + & { margin-top: 10px; } } え、こうじゃないの？ってなぜか思ってたんですよねずっと…
【CSS】transitionプロパティ使用時に、Chromeブラウザで1pxずれる現象を回避する | バシャログ。 backface-visibility: hidden; これで謎のずれが消える。 backface-visibility - CSS: カスケーディングスタイルシート | MDN なんで消えるんですかね…？裏側…
shinimae.hatenablog.com 基本的には、 select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; } これでいけるわけです。これでデフォルトで出る矢印のUIが消えてくれます。 しかし、IEではこれが効かない。 select{ -webkit-appeara…
nichiyogogo.com まあ直し方は簡単で、 outline: none; これで終わり。inputがfocusされてるときとかだと思うので、そのときにoutlineがブラウザによって規定のものが出るはずなのでそれを消せます。 まあただ、これ出るのには理由あって、健常者なら関係な…
手動で文章に改行を入れたくない。 wemo.tech 禁則処理、例えば句読点(,や.)が文章の先頭に来ないようにとか。 どこまでを禁則にするかによりますが、単語レベルで単語中では改行しないように、とかも出来ます。これらを改行調整することなく良い感じに自動…
sterfield.co.jp text-align: justify; text-justify: inter-ideograph; これで出来る。 基本はtext-align: justifyで問題ない。 text-justify: inter-ideographはIE用とのことだが、やってみたところ上手くいかなかったので諸説ある気がする。text-justify:…
こんな感じでタブで選んで中身のコンテンツを入れ替えたい。 わかりづらいがこの上がタブで、下がコンテンツ。 しかも、そのタブは上下にあり、どちらでも中身のコンテンツを入れ替えられる。 ↓下 つまり、 こういう感じ。 で、問題なのは、 ・このコンテン…
tech.motoki-watanabe.net IEでスムーススクロールのなんかでガタついてしまうという現象 があったが、これ以外にも、 どうやらposition:fixedの要素にz-index: -1 を指定すると、ガタついた。 原因は謎。z-indexを指定しない、もしくはz-index: 1を指定する…
mo-ja.net これで解決。 つまり、スクロールを無効にして、JSで同じような動作を作って上げる必要があるそうです。 これをブラウザ判定して、IEやEdgeのときに上記のJSを効かせてあげれば解決します。
css-tricks.com ここを見ると早い。 こうやって上下に隙間ができてしまうのを、このように解除できる。 display: inline-blockになっている階層の上に、 font-size: 0px; /* display: inline-block で出来る上下の隙間へ対処 */ と書いてあげると、消せます…
saruwakakun.com 背景画像にして、background-size: contain; にすればOK content: ''にして、background-image: url()で画像を指定し、background-size: contain で、width、heightで幅、高さで制御出来ます
ってなりません？ ボタンとか、後ろから浮かせたいものにつけるシャドウ。 あと、Photoshopでドロップシャドウってついてるやつ、値とかそのままCSSに入れればOK、とならないんですよ。面倒くさいったらありゃしない。 developer.mozilla.org まあ影つけるや…
cssで position : absolute な要素を中央に配置する（上下左右センタリング）｜プログラムメモ どういう論理なんですかね 親要素に position: relative; して、中央寄せしたい要素に position: absolute; left: 50%; transform: translateX(-50%); でOK。 ab…
