UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

CSS

【CSS】scroll-snapでCSSだけでカルーセルをつくる

CSS

横スクロールをしてコンテンツを見せるときにscroll-snapというCSSを使うとカルーセルのようにピタッといい感じのところで止めてくれるCSSを知って感動した How do Nike and Apple make such smooth and touch friendly carousels with pure CSS?/* tl;dr */…

【CSS】TechFeed Conference 2022で知ったモダンCSS

CSS

2022/5/14に開催されたTechFeed Conference 2022を拝聴した TechFeed Conference 2022 このときの鹿野さんのセッションで知ったCSSについてのメモ scroll-margin-top これまでアンカーリンクでページ内遷移をした際に、アンカー要素の上部にスクロールするた…

【CSS】overscroll-behaviorでスクロール連鎖を止める

CSS

モーダルを表示している時、手前のレイヤーのスクロールが下までいくと後ろのレイヤーがスクロールしてしまう問題 いままで、bodyにposition: fixedつけたり、overflow: hiddenつけたりしていたが、overscroll-behaviorで解決できることを知ったので調べる d…

【CSS】blend-modeを使って2枚の画像の差分を確認する

CSS

Figmaのデザインと、それを見ながら実装したページにどんな差分があるか細かく確認したい Figmaのデザインと実装したページの2枚の画像の差分を確認すればよいと思うが、ビジュアルリグレッションテストの手法を持ち出すのは面倒くさいし、もうぱっと見でな…

【CSS】State of CSS 2021 - アクセシビリティなど

CSS

前回、前々回に続いてState of CSS 2021で知らなかったところをキャッチアップしたい 2021.stateofcss.com 前々回の uga-box.hatenablog.com 前回の uga-box.hatenablog.com アクセシビリティ prefers-reduced-motion 前庭運動障害者など、特定のアニメーシ…

【CSS】State of CSS 2021 - インタラクションとタイポグラフィ

CSS

前回に続いてState of CSS 2021で知らなかったところをキャッチアップしたい 2021.stateofcss.com 前回の uga-box.hatenablog.com インタラクション JavaScriptを使わなくてもページを操作するを制御することができればCSSでできるなら CSS Scroll Snap スク…

【CSS】State of CSS 2021 - レイアウトとShapes & Graphics

CSS

State of CSS の2021年版が今年もでたのでみてみた 来年はIEのサポートが正式に不要になるということで、これまでIEで使えないからと疎かにしていたCSSの知識をキャッチアップしたい 2021.stateofcss.com よく知らなかったものを取り上げる レイアウト サブ…

【CSS】リセットCSSの話

CSS

フロントエンドエンジニアをやるときに、「余計なことはせずEricMeyerのリセットCSSを使おう」と教えてもらってからEricMeyer氏のを使い続けている 困ることはなかったが、もう10年前のやつなのでそろそろと思っていた そんなとき、以下の記事をみつけた t.c…

【CSS】Tailwindの思想

関わっているプロジェクトでTailwindを導入するか悩んでいる tailwindcss.com というのも以前Pixivのデザインシステムで、複数のサービス間のスタイルを強制するのにTailwindが最適だったという記事を読んだことがあり、同じような状況なため導入を検討して…

【Storybook】scroll barを消す

Storybookを使っていてView Portをスマホ用にしたときに右端にスクロールバーが表示される これを消したい 消し方はこちらの記事にまとめられていたので、これを参考にした www.yoheim.net Chromeでは-webkit-scrollbarをつければよいことがわかったので、あ…

【CSS】currentColorを使ってSVGの色を変える

CSS

SVGのぬり色を変更したい場合、SVGにfillのスタイルを当てていたが、例えばエラー時に文字色とボーダーと合わせてSVGの色も変えたいというときに面倒 そんなときcurrentColor を使ったら簡単になることを知ったので調べた https://www.w3.org/TR/css-color-3…

【CSS】3の倍数の要素にスタイルをあてる

CSS

下のようなリストを実装するときにモダンなブラウザとFlexboxのgapを使えば簡単に実装ができるが、gapを対応していないブラウザの場合にどうするか考えた 全ての要素にmargin-rightを設けてしまうと、右端の列に不要な余白ができてしまうので、3n-2(n=1,2,3…

【CSS】テキストの均等割り当て

CSS

以下のようにテキストを左寄せではなく、均等に割り当てを行いたい このときtext-align: justifyを利用すればできると思っていたができなかったので調査した https://www.w3.org/TR/css-text-3/#text-align-property 仕様をみるとtext-align-lastで特に指定…

【CSS】テーブルの角が丸くならない

CSS

テーブルをCSSを使って角丸にしようとborder-radiusをつけたが丸くならなかった 原因を調べたところborder-collapse: collapse;のCSSがtableタグにあたっているとborder-radiusが効かないみたい CSS Backgrounds and Borders Module Level 3より border-coll…

【Webセキュリティ】a:visitedによるユーザーの履歴への攻撃について

以前、色をアルファチャンネルで指定したくない理由を探したことがあり、その過程でa:visited のセキュリティ対策について触れた uga-box.hatenablog.com この対策について、過去の話だが具体的にどういう攻撃の可能性があったのか知る機会があったので自分…

【CSS】色をアルファチャンネルで指定したくない理由を探す

Webページ内の背景色などに、特定のカラーコードを用意するのではなく、カラーコードで指定した色を少し透過(アルファチャンネル)をつけて表現しているデザインをみることがあった 例えば、黒rgb(255, 255, 255)にアルファチャンネルを指定してグレーrgba(…

【CSS】SarariでFlexbox用gapがサポートされた

CSS

Safari 14.1からFlexboxでgapが使えるようになったらしい developer.mozilla.org .flexbox { display: flex; gap: 16px; } いままでmarginやpaddingを駆使していたので、すごくシンプルになった

【CSS】object-fitで画像をアスペクト比を維持したままコンテンツにおさめる

CSS

CLSの対策としてimgタグにwidthとheightを指定したがレスポンシブデザインでブラウザ幅にあわせて画像サイズもかえると縦横比がおかしくなってしまう 調べると以下のスタイルで解決できた object-fit: contain; developer.mozilla.org object-fitは画像をボ…

【CSS】Text Shadows

CSS

ウェブページのキービジュアルに文字を載せていたが、文字の視認性が悪い なので文字に影をつける対策を考える このときCSSのText Shadowsを使ってみることにした https://drafts.csswg.org/css-text-decor-3/#text-shadow-property 完成イメージ 使い方(例…

【CSS】スクロールバーを非表示にする

CSS

何度も調べているのでメモ IE、Edge https://developer.mozilla.org/en-US/docs/Archive/Web/CSS/-ms-overflow-style .container { overflow: scroll; -ms-overflow-style: none; } Chrome、Safari https://developer.mozilla.org/en-US/docs/Web/CSS/::-web…

【CSS】white-spaceをつかって改行をなくすと間にスペースがはいる

CSS

ある改行を含む文章をpタグなどで囲って表示すると間にスペースがはいる <p> Windows でコン ピュータの世界 が広がります。 </p> ↓ Windows でコン ピュータの世界 が広がります。 変なところで改行しているデータの方がおかしいのはそれとして、この空白を置換な…

【CSS】セレクトボックスのテキストを右揃えにしたい

css

こういうリンクっぽいセレクトボックスを実装したいのだが、 セレクトボックスの全体の幅は選択肢中の最長文字列に合わせてしまうので、最短文字列の場合に文字列とアイコンの間に余白ができてしまう これだと不格好なので修正したい テキストを右揃えにする…

【IE11】flexboxの縦幅がおかしい

あるページのコンテンツが少ない場合はフッターをウィンドウ下部に固定し、コンテンツがウィンドウサイズを超える場合はフッターをコンテンツの下におくというレイアウトをCSS3のflexboxを使って行っていた 実装は以下のような感じ body{ display: flex; min…

【CSS】スクロールをスムーズにする

CSS

overflow: scroll で横スクロースさせて読ませるコンテンツがiOS Safariだとカクカクする これをスムーズにする(慣性スクロールにする)やり方を毎回調べては忘れてしまうので記載しておく overflow: scroll; -webkit-overflow-scrolling: touch; developer…