HTML

dialog要素の show(), showModal(), Popover API を比較してみた

HTMLでダイアログ (ポップアップウインドウ) が実装できる dialog 要素ですが、開くには JavaScript の show() メソッドと showModal() メソッド、そして新たに追加された Popover API を使用する方法があります。

show() メソッド、showModal() メソッド、Popover API それぞれに違いがあるので、今回はそれらを比較してみました。

かつて、電光掲示板のようにテキストをスクロールさせることができる、marquee要素というものがありました。

今回は、現在の HTML の仕様では非推奨になっている、その marquee要素を、CSS で再現してみます。

主にブログ記事などでよく目にする「目次」ですが、手作業で作る場合、見出しなどに ID を設定して、その ID に対してリンクを設定するという作業を何度も行う必要があります。また、コンテンツを手直しした際には、作り直す必要もでてきます。

そこで今回は、目次を自動生成するJavaScriptコードとその使い方を紹介します。

テーブル (表) をスマホなどの小さい画面で表示させた場合に、テーブルセルが小さくなりすぎたり、内容が溢れてしまうのを防ぐため、スクロールできるようにするのが一般的だと思います。

しかし、スクロールバーが表示されない環境では、スクロールできるどうかが分かりづらい場合があります。

そこで今回は、スクロールできることを明示する「スクロールヒント」を CSS のみで実装する方法を紹介します。

円グラフや棒グラフをウェブページに載せる際、皆さんはどうしていますか？

Photoshop などで画像として作り、img要素で表示しますか？それとも、SVG で作りますか？あるいは、canvas要素と JavaScript を組み合わせて描画しますか？

様々な方法が考えられますが、セマンティックに、かつ手軽に作りたいのであれば、table要素を CSS でスタイリングする方法がベストかもしれません。

hover 擬似クラスを使用して、ドロップダウンメニュー (プルダウンメニュー) の表示・非表示を制御する方法はよく知られていますが、hover 擬似クラスはスマホやタブレットなどのタッチデバイスとの相性は良くありません。

そこで、今回は hover 擬似クラスではなく、focus-within 擬似クラスでドロップダウンメニューを制御する方法をご紹介します。

ソフトウェアのUIによくある、複数のコンテンツをコンパクトに表示できるタブ切り替えを、JavaScriptは使わず、HTMLとCSSだけで作る方法を紹介します。

ブラウザの表示領域 (ビューポート) に応じてフォントサイズを変化させる「流体タイポグラフィ (Fluid Typography)」とも呼ばれるレスポンシブな可変フォントサイズを簡単に実装するためのHTMLコードとCSSコードを紹介します。

HTMLの要素を横並びにしたくて、floatプロパティで四苦八苦していたのは昔の話し。今は display:flex で簡単にできるようになりました。

しかし、display:flex には特有のクセのようなものがあり、仕様をきちんと理解しないと、意図したとおりの横並びにできない場合があります。

今回は display:flex で横並びにする6種類の方法と、その注意点について解説していきます。

多くの情報をコンパクトにまとめられるハンバーガーメニュー (ドロワー) ですが、そこで使用される三本線のハンバーガーボタンの作り方は多くあります。

今回は、HTMLとCSSのコード量が少ない、シンプルなハンバーガーボタンの作り方を紹介します。