details要素での開閉時にJavaScriptで処理を行う
以前にdetailsタグの使い方やアコーディオンとして使用した際のメリットについて記事にしましたが、今回は開閉時にJav...
Pug使用時にHTMLのソースコード上で改行する
Pugでaタグやspanタグを続けて入力すると、コンパイルしたHTMLのソースコード上だと、改行されずに1行で出力されま...
display: contents を使ってみる
fieldset要素とlegend要素の記事でCSSの設定をする際にdisplay: contents を使いましたが、...
Reactのイベントハンドラについて
Reactのイベントハンドラについて調べたことをメモ。...
clip-pathで三角形を作成する
以前にborderを使った三角形やSassのmixinの記事を投稿しましたが、今回はclip-pathを使った三角形の作...
fieldset要素とlegend要素を装飾する
fieldset要素とlegend要素を使用したことがあまりなかったのですが、少し前にこれらの要素にCSSを設定しようと...
テンプレートリテラルを使ってみる
JavaScriptの文字列内で変数が使えるようになる、テンプレートリテラルを使ってみます。...
CSSのclip-pathを使ってみる
要素内のどの部分を表示するか(切り抜き)を設定できる、clip-pathプロパティを使ってみます。...
chromeのDevToolsでスクリーンショットを取得する
chromeのDevToolsからスクリーンショットを撮る方法をメモ。...
Reactのpropsを使ってみる
Reactのコンポーネント間で、データの受け渡しをする際に使用するpropsについて簡単に使ってみます。...
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の...