スーパーリロードでだけ起きる謎のレイアウト崩れの原因と対策
はじめに 縦長のLPを実装中に、ちょっと凝ったサイズの大きい背景画像を複数配置していたときに遭遇した現象についてまとめます。 前提として、今回のJSは「ページの最終的な高さ」に応じてCSSプロパ...
6
2
Comment0
11 search resultsShowing 1~11 results
Stocked
You need to log-in
Tailwind v4で新たに採用されたカラーシステム oklch が変えるUI表現と新旧対応表
はじめに 2025年1月22日に、Tailwind CSS v4がリリースされました。 たくさんの新機能がある中で、もっとも多くの人を驚かせたのが「デフォルトカラーが全て変わった」現象ではないで...
7
4
Comment0
<h1> にSVGロゴ + aria-label を入れたら「見出しが空です」と警告が出た話
Webサイトのロゴを<h1>内に配置するのはよくある実装方法です。 その際、<img>ならalt属性を使いますが、<svg>の場合は代わりにaria-labe...
1
1
Comment5
子要素を display: none しても :empty は効かない
タイトルの通りです。 要素の表示非表示はJavaScriptで制御することが多いと思いますが、その際CSSでdisplay: noneを付けたり外したりする方法がよく使われると思います。 Tai...
2
2
Comment1
CSSの擬似クラスとJavaScript対応表
様々な擬似クラスの登場により、それぞれの用途に応じて柔軟に対象を絞り込んでスタイルを適用することが容易になりました。 これまでJavaScriptで実装していた機能の多くが、CSSでも実現可能に...
11
2
Comment3
2024年に追加された中で最も使用されたCSSの新機能トップ5とワースト5まとめ
今年も残り1ヶ月を切りました。 月日が経つのは早いものですが、CSSの進化も早く、今年は50以上の機能が追加されました。 State of CSS 2024 2024年のCSSの現状調査を行った...
21
10
Comment0
Webアプリでの長押し機能の実装は意外と難しい
Webアプリケーションにおいてはタップやクリックの長押しはそもそも一般的ではない？ あなたはWebアプリケーションのUIで、タップやクリックの「長押し」をした経験がありますか？ ネイティブアプリ...
79
75
Comment5
StimulusとTailwind CSSでa11yを考慮したキーボード・インタラクション全部入りアコーディオンを実装する
StimulusとTailwind CSSを用いて、アクセシビリティを考慮しつつ、キーボード・インタラクションを全て含んだアコーディオンを実装してみたいと思います。 アコーディオンとは アコーデ...
5
5
Comment0
Stimulusでa11yを考慮した可変のカルーセルを実装する
カルーセルのアクセシビリティを考慮しつつ、Stimulusで実装してみたいと思います。 カルーセルとは 文字通り訳すと「回転木馬」という意味ですが、情報 (画像だったり、画像＋テキストだったり)...
6
5
Comment2
Stimulusでa11yを考慮したタブを実装する
Stimulusとは Stimulusとは、JavaScriptで書かれたクライアントサイドのライブラリです。 有名どころだとStack Overflowが採用していたりします。 Stimulu...
11
5
Comment0
Stimulusでa11yを考慮したハンバーガーボタンを実装する
Stimulusとは Stimulusとは、JavaScriptで書かれたクライアントサイドのライブラリです。 有名どころだとStack Overflowが採用していたりします。 最近巷で話題の...
17
2
Comment2
11 search resultsShowing 1~11 results
Qiita is a knowledge sharing service for engineers.
- You can follow users and tags
- You can stock useful information
- You can make edit suggestions for articles