青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

CSS

word-break: auto-phrase; がすごいらしいけど、そもそもbudouXを知らんかったよ

CSS の word-break: auto-phrase; がすごい。日本のウェブ制作者が求めていたもの。「文節」での折り返し指定ができます。現行のChrome 119やEdge 119で利用可能。 pic.twitter.com/P7wCpHjeDW— 池田 泰延 (@clockmaker) 2023年12月6日 ええ〜すご!<br />で改行し…

よく考えたらsvgに色つける際にもうfillじゃなくていい

svgを色変えたりしたい場合、imgタグの読み込みではfill設定できないのでsvgをコードで埋め込んでfillの値を変えて色を変える…とかやってきたけど、いまはIEを気にしないでよいのであればimgタグで読み込んだ上でmask-imageでできるじゃん、というツイートを…

objectのdata属性で読み込んだsvgにCSSやJSをあてる

objectのdata属性で読み込んだsvgの中にあるaタグに対してJSやCSSをあてたい。 qiita.com 別documentになるので、普通にJSやCSSはあたらない。上記Qiitaにあるようにobjectをとってきてその.contentDocumentをとり、そこに対してJSを当てる必要がある。 cons…

Safariでborder-radiusがhover中に一瞬とれてしまう件、重ねあわせコンテキスト作ってあげると直る

hirakublog.com qiita.com z-indexとかwill-changeとかもあるのだけど、つまるところ重ねあわせコンテキストを作ってあげれば直るみたい。ホバー時に中身でopacityなりtransformなりしていると思うのだけど、それらで重ね合わせコンテキスト的になんかバグっ…

【リンクメモ】position: fixedの要素をスクロール

chaika.hatenablog.com

iOS Safariでキーボードを開いている際にposition: fixedの挙動がおかしい?

ちょっと明確なソースがあるわけではないので確証はない。 iOS Safariでキーボード(Virtual Keyboard)を開いている際にposition: fixedの挙動がおかしいっぽい。 iOS Safari Virtual Keyboardを開いている position: fixed; bottom: 0; の際に、 スクロール…

iOS Safari でCSSのcalcの中でvw,vhが使えない

www.seleqt.net なんかそういえばそういうのあったな…気づかなかった…しょうがないのでJSでwindow.innerWidthとか入れてそれでstyled-componentsで計算させた。 Safari で vw, vh などを calc() と一緒に使うとレスポンシブじゃなくなるバグまだ直ってないで…

IE無視できるなら CSS 比較関数 はかなり使える… clamp() で最小と最大を設定

CSS

coliss.com developer.mozilla.org めちゃ便利。例えばwidthとかならmin-widthとかmax-widthがあるのですが、最小と最大が設定できたのってむしろ今までそれくらいで、大半は出来なかった。JSで無理やりどうにかするしかなかったと思う。(例えばleftとか) …

ページ下部にトップに戻るボタンとか設置する時に気をつけるべきこと。iOSでセーフエリア、Safariで下部のステータスバー

iOSのSafariはブラウザ開いた際に出るステータスバー分、タップできないエリアが存在する。ここの領域はステータスバーが出ていないときはタップが無効になる。 また、iPhoneX以降はセーフエリアというのが存在する。周囲のノッチの周囲あたりがセーフエリア…

Visibility:hidden; と display:none; の、アクセシビリティ的な違い

よく要素をopacityで消したりすると思うのですが、opacityで消すと要素は残るのでタブで移動とかするとカーソルがあたってしまうのです。なので、アクセシビリティ気にする必要あるのであればopacityでは厳しい。 なので、その場合はカーソル当たらない状態…

getComputedStyleでスタイルを取得し、parseIntやparseFloatで数字にする

qiita.com const elm = document.querySelector('.elm'); const style: CSSStyleDeclaration = window.getComputedStyle(elm); const lineHeight = style.lineHeight; のように、して、実際に計算された後のCSSの値をとってこれます。 こちらの結果は21pxの…

IEでoverflowとpadding-bottomを同時に使うとpadding効かない

note.com neos21.net tamagondq10.blogspot.com タイトル通り、 overflow: scroll と padding-bottom を同時に使うとpadding-bottomが効かないらしい。 なので、display: blockで高さある疑似要素をafterとかで入れてあげると解決する。

地味にどうやるのか知らなかった、inputのinputmodeをメモっておく

developer.mozilla.org

Firefoxでbackground-colorとborderが同時に指定してあるtdでborderが消える

[CSS] Firefoxでborderが表示されない場合の対処 | metrograph.jp position: relative; border background-color このかみ合わせがIEやFirefoxで悪い… Firefoxに関して言えば、z-index: -1;を指定してあげることでbackground-colorがborderの下にいってくれ…

IEでposition: fixedでmargin: autoでmax-width中央寄せにならない

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 全然気にしたこと…

CSSで良い感じに調整可能なよみがな、ルビを振る

CSS

qiita.com このQiitaが参考になります。 一応HTMLのタグとして存在はしているものの、そこもline-heightに含まれてしまうが故に見た目として悪い。のでこのQiitaのようにdata属性に読みがな降ってあげるのが正しそう。 アクセシビリティ的に気にする必要ある…

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

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

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

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

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

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

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

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

CSSで禁則処理のおすすめ

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

テキストの両端揃え

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

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

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

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

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

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

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

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

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で幅、高さで制御出来ます

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

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

position: absoluteの水平中央寄せ

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