ハンバーガーボタンと呼ばれる、三本線のアイコンを押すと出てくるドロワーメニュー (引き出し型メニュー) の実装で困っていませんか？ JavaScript を使って実装するのが一般的ですが、HTML と CSS だけで作れるのであれば、それに越したことはないと思っています。そこで、今回はチェックボックス版とダイアログ版の2種類のドロワーメニューの作り方を紹介します。
Copy and Paste
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 で再現してみます。
目次を自動生成するJavaScriptとHTML上の設置方法
主にブログ記事などでよく目にする「目次」ですが、手作業で作る場合、見出しなどに ID を設定して、その ID に対してリンクを設定するという作業を何度も行う必要があります。また、コンテンツを手直しした際には、作り直す必要もでてきます。
そこで今回は、目次を自動生成するJavaScriptコードとその使い方を紹介します。
擬似要素を使わずCSSで漫画の吹き出しを作る方法
CSS で漫画のような吹き出しを作る際、三角形の部分をどう実現するかが問題になります。
よくある方法なのが、背景色を設定した要素に、擬似要素で作った同じ背景色の三角形を組み合わせるというものです。
そこで今回は、擬似要素を使わない、吹き出しの作り方を紹介しようと思います。
CSSのみで実装するテーブル用スクロールヒント
テーブル (表) をスマホなどの小さい画面で表示させた場合に、テーブルセルが小さくなりすぎたり、内容が溢れてしまうのを防ぐため、スクロールできるようにするのが一般的だと思います。
しかし、スクロールバーが表示されない環境では、スクロールできるどうかが分かりづらい場合があります。
そこで今回は、スクロールできることを明示する「スクロールヒント」を CSS のみで実装する方法を紹介します。
グラフをHTMLとCSSで作るならtable要素が最適解かもしれない
円グラフや棒グラフをウェブページに載せる際、皆さんはどうしていますか？
Photoshop などで画像として作り、img要素で表示しますか？ それとも、SVG で作りますか？ あるいは、canvas要素と JavaScript を組み合わせて描画しますか？
様々な方法が考えられますが、セマンティックに、かつ手軽に作りたいのであれば、table要素を CSS でスタイリングする方法がベストかもしれません。