ブログの記事一覧ページや、ページ分割されたコンテンツなどでよく見る、複数のページを行き来するためのページネーション・ページ送りをどのように実装していますか？
今回は、ポップオーバーAPI と CSSアンカーポジショニング を使用した、完全でシンプルなページネーションの実装方法を紹介します。HTML と CSS と PHP のコードをコピペしてお使いください。
Copy and Paste
CSSアンカーポジショニングでプルダウンメニューを作る方法
今月、Firefox 147 のリリースにより、すべてのモダンブラウザで CSSアンカーポジショニング が使用できるようになりました。今回はリストと CSSアンカーポジショニング でプルダウンメニューを作る方法を紹介します。
CSSでdetails要素に開閉アニメーションを追加する方法
HTML5 で追加された details要素 (詳細折りたたみ要素) に開閉アニメーションを設定するには JavaScript が必要でしたが、現在は CSS のみで設定することができるようになっています。今回は、その方法を紹介します。
JSON-LDをMicrodataから生成するJavaScript「md2ld.js」
ウェブサイトの制作・運営に携わり、JSON-LD で苦労している人も多いかと思います。今回は、そういった方々の救世主になるかもしれない、JSON-LD を Microdata から生成する JavaScript「md2ld.js」を紹介します。
HTMLとCSSだけのアクセシビリティに配慮したドロワーメニュー
ハンバーガーボタンと呼ばれる、三本線のアイコンを押すと出てくるドロワーメニュー (引き出し型メニュー) の実装で困っていませんか？ JavaScript を使って実装するのが一般的ですが、HTML と CSS だけで作れるのであれば、それに越したことはないと思っています。そこで、今回はチェックボックス版とダイアログ版の2種類のドロワーメニューの作り方を紹介します。
table要素をグリッドで再構築する Gridized Table CSS
table要素 が思った通りに表示されず悩んでいませんか？ table要素 は複雑になりがちな情報をまとめるのに最適です。しかし、独特のレンダリングアルゴリズムによって、思った通りに表示されないことが多々あります。そこで今回は、table要素 をスタイリングしやすくするための「Gridized Table CSS (表をグリッド化する CSS)」を紹介します。
定義しておくべき基本的なCSS変数とその命名規則
ウェブデザインに一貫性と統一感を持たすためには、設計段階でCSS変数 (CSSカスタムプロパティ) を定義しておき、イレギュラーな値を極力使用しないというアプローチが良いかと思います。
今回は、個人的に定義しているCSS変数を紹介してみようと思います。
[CSS] remを使用したline-heightのベストプラクティス
ウェブページの行の高さ・行間を良い感じに制御したいと考えたとき、難しいと感じるのは私だけでしょうか。そんな私が行き着いた2025年現在の line-height のベストプラクティスを紹介します。
[CSS] シンプルで汎用性のあるフォームコントロールのデザイン
input要素, button要素, select要素, textarea要素, progress要素, meter要素といったフォームコントロールの見た目を CSS で整えるのは、昔に比べてずいぶんと簡単になりました。といっても、ブラウザ毎に独自の擬似要素・擬似クラスを使っていたり、変更不可能な部分もあるため、他の要素と比べてスタイルが設定しづらいのは変わりありません。
今回は、これらフォームコントロールをシンプルで統一感のあるデザインにするためのCSSコードを紹介していきます。
[CSS Marquee] テキストをスクロールさせるCSS
かつて、電光掲示板のようにテキストをスクロールさせることができる、marquee要素 というものがありました。
今回は、現在の HTML の仕様では非推奨になっている、その marquee要素 を、CSS で再現してみます。