テキストを1文字ずつタグで囲う時のアクセシビリティ対応
テキストの装飾やアニメーションをするため、1文字ずつspanタグなどで囲うことがたまにありますが、そういった実装をする場...
HTML・CSSの記事一覧
Tailwind CSSで任意の値を指定する
Tailwind CSSの文字サイズなどで、用意されていない任意の値を指定する方法をメモ。...
横並びにした要素の子要素の高さを揃える
横並びに並べたアイテム内の特定の要素の高さを揃えたいということがたまにあるので、CSSで対応する方法について検討したこと...
スライダーの実装でアクセシビリティを意識する
スライダー(カルーセル)の実装をアクセシビリティ的な側面から考えた時、スライダーの機能やデザインによって考慮する点が色々...
Yu Gothic UIで「」が重なって表示される
ChatGPTで調べ物をしていた際、「A」「B」のように「」を続けて入力すると 」「 部分が重なって表示される現象に遭遇...
CSSの:not()で複数の条件を指定する
CSSの:not()で複数条件を指定した際の表示について試してみます。...
CSSでslideDownを実装する
CSSのgrid-template-rowsを使って、jQueryのslideDown()のようなアニメーションを実装す...
タブの実装でアクセシビリティを意識する
ARIA Authoring Practices Guideのページを参考に、タブの実装時にアクセシビリティの面を考慮し...
Pug使用時にHTMLのソースコード上で改行する
Pugでaタグやspanタグを続けて入力すると、コンパイルしたHTMLのソースコード上だと、改行されずに1行で出力されま...
display: contents を使ってみる
fieldset要素とlegend要素の記事でCSSの設定をする際にdisplay: contents を使いましたが、...
clip-pathで三角形を作成する
以前にborderを使った三角形やSassのmixinの記事を投稿しましたが、今回はclip-pathを使った三角形の作...
fieldset要素とlegend要素を装飾する
fieldset要素とlegend要素を使用したことがあまりなかったのですが、少し前にこれらの要素にCSSを設定しようと...
CSSのclip-pathを使ってみる
要素内のどの部分を表示するか(切り抜き)を設定できる、clip-pathプロパティを使ってみます。...
Pugでimgタグにwidthとheightを自動付与する
レイアウトシフト対策としてimgタグのwidthとheightは設定した方がよいですが、サイズを確認して手入力だと手間が...
WAI-ARIAのランドマークロールについて
WAI-ARIAのランドマークロールについて、調べたことをメモ。...
CSSのcurrentColorで色を設定する
currentColorという値で色設定を行なっているサイトを見かけたので、currentColorについて調べたことを...
ストレッチリンクを使ってリンクの中にリンクがある場合の実装をする
以前にリンクの中にリンクがある場合の実装方法の記事を投稿しましたが、Bootstrapのストレッチリンク(.stretc...
detailsとsummaryを使ったアコーディオンについて
以前にdetailsタグとsummaryタグを使用する記事を投稿しましたが、今回はdetailsとsummaryを使って...
CSSの:has()を使ってみる
CSSの疑似クラスの:has()を簡単に使ってみます。...
サイト内検索フォームでアクセシビリティを意識する
サイト内検索でよくあるデザインのマークアップについて、アクセシビリティを意識したコードを考えてみます。...