ハンバーガーメニューは、スマートフォン向けウェブサイトでよく使われるナビゲーションUIです。ヘッダーの［≡］ボタンを押すと、リンクの一覧が、現在のページの上に重なって表示されます。 横三本線のボタンが、パン（バンズ）とお肉（パティ）を挟む🍔のように見えることから、慣習的に「ハンバーガーメニュー」と呼ばれています。 新旧さまざまな作り方がありますが、今はHTMLの<dialog>タグで作るのがオススメです！　2020年代以降に登場した新しめのCSSと組み合わせることで、スマートに作れます。 古い作り方を避けたい理由 ハンバーガーメニューは2000年代後半のスマートフォンが出始めた頃よりウェブサイトで流行ってきました。旧式の作り方にどんな課題があったのかを振り返りましょう。もしかしたら「知らずに使っていた😨」といったケースもあるかもしれません。 はりぼてのdivタグ ハンバーガーメニューの

ICSはフロントエンド専門のウェブ制作会社で、オウンドメディアとして技術情報発信サイト「ICS MEDIA」を運用しています。このサイトは開設から12年目をむかえました。年末恒例となりますが、今年の記事のアクセス数を公開します。 今年はCSSの進化が目立ちました。今年はどの記事がもっとも読まれたのでしょうか？　今年執筆した記事で上位10記事をピックアップします。 1位 : text-boxの使い方 CSSでテキストの上下余白が調整可能に！text-box-trimの使い方 19,761 PV text-box-trim / text-box-edgeを取り上げ、テキスト要素の上下スペース（いわゆるハーフ・レディング）の扱いを整理しながら、実装にどう役立つかを具体例つきで解説しています。多くの方々が普段のウェブ制作で困っていたことであり、解決方法が得られたことで大きな反響がありました。 読者

ウェブ開発に関するHTML、CSS、JavaScriptの新機能は次々と登場します。このような新機能を紹介したブログ記事やSNSを見たことがあるかもしれません。新機能は、開発コストやユーザーエクスペリエンスを向上させるために重要ですが、ブラウザ側の対応状況により、すぐには導入できない場合もあります。本記事では、ウェブの新機能を実践投入するまでのプロセスとそのタイムラインについて考察します。 結論：新機能を取り入れる際の対応ブラウザの指針 まずは結論として、新機能を導入する際は次の3つの指針で判断していくと良いと考えます。 最新機能を取り入れつつメジャーなゾーンをカバーする：Chrome・Edgeの最新3バージョン、Safariの最新2世代のメジャーバージョン 最新機能を取り入れつつも、より幅広い対応を考える：上記に加えFirefoxの最新3バージョンとSafariの最新3世代のメジャーバー