これから注目したいCSSは？@mediaのscripting特性とCSSのimage()について、注目する理由や使い所をご紹介します。
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
7/24 追記：コンテンツ中に一部誤りがあり「scriptingメディア特性のinitial-onlyについて」という記事で訂正、補足しています。こちらもあわせて参照いただけますと幸いです。
加藤: 皆さん、こんにちは！ミツエーリンクスの加藤です！
佐竹: 佐竹です！
加藤: はい、では今回もミツエーテックラジオやっていきたいと思います。ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。
加藤: えー突然ですが、先日CSS Dayというイベントがオランダのアムステルダムで行われましたよね。
佐竹: はい。私が参加してみたい海外イベントの一つで、社内でもこういうCSSについて話すイベントやってみたいなーと思っていたんですよね。
加藤: はい。知ってました笑。前に佐竹さんがそんなことを言っていたなーと思いまして、今回のテックラジオでは佐竹さんにCSSについて聞く回というのを設けてみました！
佐竹: ありがとうございます笑。
加藤: はい、では早速ですけども佐竹さんが最近注目しているCSSは何ですか？
佐竹: はい、では私が注目しているCSSを２つご紹介します！1つはフロントエンドBlogでも書いたんですけど、@mediaのscripting特性で、もう1つがCSSのimage()です。
加藤: はい。@mediaのscripting特性は佐竹さんが記事書いてくれましたし、Firefox 113で実装された時のリリースノートを読んだりしたので何となく知ってるんですけど、image()のほうはあまり聞き慣れないですね。
佐竹: そうですよね。image()はState of CSS 2022のアンケート結果でも「知らない」と回答された人が68%だったので、半数以上の人はまだ知らないという結果になっていました。主要ブラウザの実装もまだなので想像しにくいかなと思いますし、私も実際、動かせてはいないので、今回はW3Cの仕様だったりMDNの説明から読み取った内容で話していこうと思います。
加藤: はい、ありがとうございます！ではその２つのCSSに佐竹さんが注目している理由や使い所なんかを聞いていきたいと思います。
佐竹: はい。ではまず@mediaのscripting特性から、どんなものなのか簡単に説明しますね。
加藤: はい。お願いします。
佐竹: はい。@mediaのscripting特性を使用するとJavaScriptなどのスクリプトの有効、無効に合わせてスタイルを設定できるようになります。キーワードは3種類ありましてnoneとinitial-onlyとenabledです。scriptingにnoneを指定した@media内でスタイルの設定を書くと、そのスタイルはスクリプトが無効の状態の時にだけ適用されます。initial-onlyを指定すると、ページロードの間だけでスタイルが適用されます。enabledでは、スクリプトが有効の状態の時にだけスタイルが適用されます。
加藤: まぁやっぱりコードの書き方とかは耳で聞いただけだとちょっとわかり難いかもしれないので、フロントエンドBlogの「CSSだけでスクリプトの有効・無効に合わせてスタイルを設定する」という記事もあわせて読んでいただければと思います。
佐竹: はい。では、キーワード毎に話していきますね。まずinitial-onlyからで、initial-onlyはページロードの間だけスタイルが適用されるので、ページの読み込み中に何かを表示して、読み込みが完了したら非表示にする、みたいなことがCSSでできます。
加藤: まぁinitial-onlyはローディングを表示させたりする時とかに使えそうですね。
佐竹: はい。次がenabledで、このキーワードが一番使う機会は多くなりそうかなと思うんですよね。
加藤: enabledはスクリプトが有効の状態の時だけでしたよね。
佐竹: そうですね。加藤さんだったら、どんな感じで使いたいとかありますか？
加藤: ぱっと思いつくのはディスクロージャーをJSで実装する時とかですかね。ディスクロージャーって、初期表示ではコンテンツを非表示にする事が多いと思うんですけど、JSが無効な環境だとコンテンツを見る手段がなくなってしまったりするので、enabledを設定した@media内ではコンテンツを非表示にするスタイルを書いて、でその@mediaの外ではコンテンツを表示するスタイルを書くとかですかね。
佐竹: そうですね。あとディスクロージャーと同じように初期表示でコンテンツが隠れているUIにモーダルダイアログがありますけど、これの場合、表示/非表示だけを切り替えると他のコンテンツが見えなくなってしまいますよね。なので、ここで使用するキーワードがnoneかなと思います。
加藤: えっとnoneはスクリプトが利用できない環境でマッチするんでしたよね？
佐竹: はい。スクリプトが無効の時はトップレイヤーにコンテンツを表示するのではなくって、他のコンテンツも見れるようにページ内のどこかにコンテンツを表示するような使い方になると思います。
加藤: 何となくそれぞれのキーワードをどう使っていけばいいのかっていうのが見えてきた気がします！
佐竹: はい。スクリプトってユーザーが意図的に無効にしているケースは少なくて、ネットワークとかの環境に起因して無効になることが多いようなんですよね。そんな時にスクリプトが有効だったら見れていた情報が見つけられないという事にならないようにこの@mediaのscripting特性を使っていきたいですね。
加藤: うん、そうですね。あとは、表示の制御がCSSとJSに分散すると、JSの実行自体が遅れてしまった時に、Cumulative Layout Shiftの原因になってしまう可能性がありますし、あとブラウザに対してスタイルの再計算とか再描画といった負荷を増やす原因にもなってしまいかねないと思うんですよね。なので、基本的にCSSで対応できることはJSじゃなくてCSSで対応した方がいいかなと思いました。
加藤: はい。では、ここからはもう一つの注目されているCSSということでimage()について、話していきたいと思いますが、えーまずimage()とはどういうものなのかを教えてもらってもよいでしょうか？
佐竹: はい。image()を使用すると、書字方向が変わった時に画像を反転して表示させたり、画像全体ではなく範囲を指定して一部だけを表示させたり、あと設定した画像が見つからない時に単一色の代替画像を生成して表示させたり、あと他には背景として設定した画像の上に半透明の色を重ねて表示させることができるようです。
加藤: へー、なんか思ってたよりいろんなことができるんですね。
佐竹: そうなんです。書字方向が変わった時に画像を反転して表示というのは、例えばリンクを示す矢印アイコンで設定したいなと思っています。
加藤: image()を使わない方法だと矢印アイコンの画像をbackground-imageにurl()で設定したりしますよね。でもそれだけだと、書字方向が変わっても矢印の向きが変わらないので、scaleプロパティに-1を設定したりして向きを反転させる対応っていうのも別途必要になるって感じですかね。
佐竹: そうですね。それがimage()を使って書字方向を指定するためのltrとかrtlと画像のパスを設定すると、その画像がどっちの書字方向の時に正転となる画像なのかっていうのを指定できて、書字方向が指定したものと逆だったら画像を反転してくれるというような感じになります。
加藤: 例えばimage()にltrという文字と画像のパスを設定したら、書字方向が左から右に流れる時には画像がそのまま表示されて、逆のその右から左に流れるようなアラビア語みたいな書字方向になると画像が反転するということですかね。
佐竹: そうです。
加藤: グローバルサイトの制作とかだと、やっぱり書字方向に合わせてスタイルを変えるっていうのは結構大変だと思うので、１つの設定で済むっていうのはやっぱり便利ですね。
佐竹: はい。えー次に画像全体ではなく範囲を指定して一部だけを表示というのは、スプライト画像のようなことがimage()だけで対応できるといった感じですね。
加藤: あーこれまでだとCSSでスプライト画像の対応をする時は複数の画像を1つの画像にまとめて、画像の表示サイズとか表示位置とかいろいろなプロパティを調整したりしますけど、それがimage()だけで完結するっていうことですかね？
佐竹: そうなんです。image()ではフラグメント付きの画像のパスを設定するだけで対応ができるようになるんですね。で、フラグメントでは画像の表示する部分の開始位置となる座標と幅と高さを指定します。
加藤: そのさっきみたいないろんなプロパティにバラバラに値を設定していくっていうよりも、やっぱりimage()でまとめて指定できたほうが画像のどの部分を表示するかとかが直感的でわかりやすくなりそうですね。
佐竹: はい。あとこれのいいところがもっとありまして、image()には第二引数を設定することができるんですけど、そこに色の設定をするともし画像が見つからなかった場合に、第一引数のフラグメントで設定していた幅と高さのサイズにその色をつけた代替画像を生成してくれるんですよね。
加藤: あー背景画像のフォールバックとして単色でべた塗りしてくれるってことですかね。なんか画像が何らかの原因で読み込めなかった時に背景色とテキストの色が同化しちゃったり、コントラスト比が低くなってしまうっていうことを防げるわけですね。
佐竹: そうなんです！画像が読み込まれなかった時の文字の可読性まで考えて対応できるっていうのがいいですよね。最後にimage()の第一引数の方に半透明の色を設定して、第二引数に画像のパスをurl()で設定します。そうすると画像の上に半透明の色を重ねて表示することができます。
加藤: これも地味に便利ですね。なんかたとえば背景画像をちょっと薄暗くしたい時とかに使える感じですかね。これまでは色がついたレイヤーも1つの画像としてまとめて書き出したりとか、あと半透明の疑似要素を背景画像の上に重ねるみたいな対応が必要でしたよね。
佐竹: はい。疑似要素で対応してしまうと、装飾が多かったりする時に足りなくなってしまうことがあるので、それを少し解消できるのも助かりますよね。
加藤: はい。えー今日は佐竹さんが最近注目しているscripting特性とimage()について話していただきました。両方とも特定の環境とか特定のサイトで結構効果を発揮しそうというところがポイントですかね！
佐竹: そうですね。@mediaのscripting特性もCSSのimage()もどちらも基本的な考え方としてはユーザーがどんな状況でも得られる情報に差が出ないようにというところが基になって作られているように感じています。で、image()の方はInterop 2023からは外れてしまったんですけど、そこから採用されるにはもっと多くの開発者に仕様が認知されて、需要が増えることが必要ということがわかったので、今回ご紹介できてよかったなと思っています。
加藤: はい。両方ともかゆい所に手が届くような機能で、私としてはとても勉強になりました！ありがとうございました。ブラウザの実装状況はまだまだという感じですけども、今後に期待したいと思います！
では最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。
また、このPodcastはApple Podcast、Google Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどもお待ちしております。 それでは今日はこの辺で！ありがとうございました！
佐竹: ありがとうございました！