Yu Gothic UIで「」が重なって表示される
ChatGPTで調べ物をしていた際、「A」「B」のように「」を続けて入力すると 」「 部分が重なって表示される現象に遭遇...
HTML・CSSの記事一覧
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()を簡単に使ってみます。...
サイト内検索フォームでアクセシビリティを意識する
サイト内検索でよくあるデザインのマークアップについて、アクセシビリティを意識したコードを考えてみます。...
CSSのコンテナクエリを使ってみる
コンテナサイズクエリでの設定を中心に、コンテナクエリの実装を試してみます。...
CSSの:is()と:where()を使ってみる
CSSの:is()と:where()を使ってみて、挙動を比べてみます。...
アクセシビリティを考慮したモーダルを実装する
APGのページを参考に、アクセシビリティを考慮したモーダルの実装を試してみます。...
フォーム要素のデザイン変更でアクセシビリティに配慮する
ラジオボタンやセレクトボックスなど、フォームのパーツをデザイン変更することがよくありますが、そういった際にアクセシビリテ...