Pugでimgタグにwidthとheightを自動付与する
レイアウトシフト対策としてimgタグのwidthとheightは設定した方がよいですが、サイズを確認して手入力だと手間が...
HTML・CSSの記事一覧
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のページを参考に、アクセシビリティを考慮したモーダルの実装を試してみます。...
フォーム要素のデザイン変更でアクセシビリティに配慮する
ラジオボタンやセレクトボックスなど、フォームのパーツをデザイン変更することがよくありますが、そういった際にアクセシビリテ...
dialog要素を使ってみる
dialog要素を使った実装を試してみます。...
margin-inlineとmargin-blockを使ってみる
margin-inlineとmargin-blockを使ってマージンを設定してみます。...
フォームのマークアップでアクセシビリティを考慮する
フォームのマークアップについて、アクセシビリティを考慮したコードを考えてみます。...
CSSの入れ子を使ってみる
CSSのネストでの記述を試してみます。...
アクセシビリティを考慮したアコーディオンを実装する
アコーディオンの実装をすることはよくありますが、アクセシビリティを考慮した場合の実装についてあまり意識したことがなかった...
無料プランでAdobe FontsをWebフォントとして使用する
Adobe FontsをWebフォントで使用する記事を以前に投稿しましたが、無料プランでも利用できるようだったので、改め...
WebフォントサービスのTypeSquareを使ってみる
株式会社モリサワが提供しているWebフォント配信サービスの「TypeSquare」を使ってみます。...
capture属性を使ってみる
input type=fileに対して設定できるcapture属性について、いくつか設定を行い動作を試してみます。...
font-size 10px未満が適用されるかどうか試してみる
font-size 10px未満の指定をした際、以前のchromeだと10pxで表示される仕様になっていたのですが、現在...