HTMLの記事一覧

Micromodal.jsを使って、アクセシビリティに配慮したハンバーガーメニューを作る

Micromodal.jsを活用し、アクセシビリティに配慮したハンバーガーメニューの作り方をデモ付きで解説。アクセシビリティを意識したライブラリの活用機会は、今後さらに増えていくと考えられ、今のうちに仕組みを理解し、知見を深めたいと思います。

CSSのみで作る無限ループスライダー(横方向・縦方向)。仕組みとポイントも併せて解説

JavaScript不要。カルーセルのスライダーはHTMLとCSSだけで簡単に実装できます。CSSだけで無限ループを実現する仕組みや、上手くいかない(途切れる、空白が出来る、ループ時にズレる)場合の原因を、デモを交えながら詳しく解説します。

detailsタグで作るアコーディオン。CSSだけで実装可。アクセシビリティにも対応

よくある質問(FAQ)の実装で重宝するアコーディオンUI。今まではJavaScriptで作ってきましたが、detailsタグならCSSだけでサクッと実装。しかも標準でキーボード操作・スクリーンリーダーに対応しアクセシビリティも優秀。デモを交えながら解説します。

【CSS】地味に厄介な「背景色付きテキスト(横幅追従･paddingあり)」のコーディング方法

テキスト量に追従して行ごとに背景色が付くデザイン。一見単純に見えますが、実はモダンCSSを使わないと実装は困難です。その実装方法を解説します。