テキスト演出では、見た目だけでなく読み上げや選択、コピーへの影響などアクセシビリティにも注意が必要です。元のテキストが読み取りやすい構造で残るか、装飾のための文字が選択やコピーの邪魔にならないかを確認しておくと安心です。 slot-text slot-textは、短いUIラベルをスロットのように切り替えるライブラリです。Copy / Copied、Online / Offline、保存中 / 完了 のように、状態が変わったことを伝えたい場面に向いています。 以下のデモでは、テキストが1文字ずつ縦方向に入れ替わるアニメーションで切り替わります。クロスフェードでシンプルに入れ替えるよりも操作の反応が伝わりやすく、UIの「触った感」が増しますね。文章のような長いテキストよりも、ボタンやバッジなどの短いラベルで使うほうが効果的です。 サンプルを別ウインドウで開く コードを確認する import {

JavaScriptには、scrollTo()メソッドやscrollBy()メソッドなど、目的のところまでスクロールする関数があります。これらの関数と一緒に使われることが多いのがbehaviorプロパティに"smooth"を設定して、目的地まで滑らかにアニメーションさせる方法です。たとえば目次をクリックしたら該当の章までスムーズにスクロールさせるなど、使ったことがある方も多いと思います。 スムーズスクロールの課題として一番大きなものは、スクロールの完了後に行う処理が書きづらいことです。Chrome・Edge 150から使えるプログラマティック・スクロール・プロミスでは、今までscrollendイベントの監視やsetTimeout()メソッドなどで検知していたスクロール完了を、Promiseを使って制御できるようになります。 スクロール完了をPromiseであつかう Promiseは非同期の

ハンバーガーメニューは、スマートフォン向けウェブサイトでよく使われるナビゲーション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世代のメジャーバー