Pugでimgタグにwidthとheightを自動付与する
レイアウトシフト対策としてimgタグのwidthとheightは設定した方がよいですが、サイズを確認して手入力だと手間が...
構造化データの種類
以前に構造化データの記述方法についての記事を投稿しましたが、今回はGoogleがサポートしている構造化データの中で実際に...
WAI-ARIAのランドマークロールについて
WAI-ARIAのランドマークロールについて、調べたことをメモ。...
CSSのcurrentColorで色を設定する
currentColorという値で色設定を行なっているサイトを見かけたので、currentColorについて調べたことを...
HTMLを画像に変換する
JavaScriptでページ内の一部を画像に変換する(スクショする)方法がないか検討していた際に見かけた、html2ca...
ストレッチリンクを使ってリンクの中にリンクがある場合の実装をする
以前にリンクの中にリンクがある場合の実装方法の記事を投稿しましたが、Bootstrapのストレッチリンク(.stretc...
detailsとsummaryを使ったアコーディオンについて
以前にdetailsタグとsummaryタグを使用する記事を投稿しましたが、今回はdetailsとsummaryを使って...
CSSの:has()を使ってみる
CSSの疑似クラスの:has()を簡単に使ってみます。...
サイト内検索フォームでアクセシビリティを意識する
サイト内検索でよくあるデザインのマークアップについて、アクセシビリティを意識したコードを考えてみます。...
YouTubeのIFrame Player APIが使用できるか確認する
JavaScriptを使ってYouTubeの埋め込みを実装する機会があったのですが、IFrame Player APIの...
CSSのコンテナクエリを使ってみる
コンテナサイズクエリでの設定を中心に、コンテナクエリの実装を試してみます。...
JavaScriptで入力した文字数をカウントする
フォームの文字数制限があるフィールドでたまに見かける、入力した文字数や残り文字数が表示される処理を実装してみます。...
CSSの:is()と:where()を使ってみる
CSSの:is()と:where()を使ってみて、挙動を比べてみます。...
アクセシビリティを考慮したモーダルを実装する
APGのページを参考に、アクセシビリティを考慮したモーダルの実装を試してみます。...
JavaScriptでフォームの送信を一時停止する
フォームの送信が実行された際、送信前に別の処理を挟んでから送信を実行したいということがあったのですが、VanillaJS...
特定のサイトのCookieやWebStorageを削除する
chromeでの作業中、特定のサイト内で使用しているストレージを削除したいということがあるので、やり方をメモ。...
Movable Typeでphpを使って検索ページを作成する
以前にMovable Typeでphpを使用する記事を投稿しましたが、phpを使って簡単な記事検索の実装を試してみます。...
文字列の両端の空白を取り除く
フォームで入力された値の前後に含まれる空白スペースを削除するという実装がたまにあるので、文字列の両端の空白を取り除く方法...
Movable Typeでphpを使用する
Movable Typeでphpを使用する際、phpファイルを使用できるかを試してみました。...
論理積(&&)と論理和(||)の短絡評価
if文で&&を使った際の挙動で思っていたのと違うということがあったので、調べたことをメモ。...