Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。

第10回MLCマークアップ部お題のスクープ型ボックスをCSSマスクで再現した話の余談

皆さんこんにちは！UI開発者の宇賀です。

今回の記事は、先日当社のUI開発者 古川が第10回MLCマークアップ部お題のスクープ型ボックスをCSSマスクで再現した話と題して公開した記事に関連したものです。

もしまだお読みでなければ先にそちらの記事をご覧ください。あわよくばシェアしていただけると嬉しいです笑

本題

さて、イベントのお題として登場したデザインがこちらです。

このデザインは、イベントに参加したスタッフの中でもどのような再現方法が考えられるか引き続き議論が交わされていました。

「第10回MLCマークアップ部お題のスクープ型ボックスをCSSマスクで再現した話の余談」の全文を読む

近づくダークモード対応の足音

Apple Developer DocumentationにおいてSafari 12.1 Release Notesが公開されました。いずれリリースされるiOS 12.2とmacOS 10.14.4に同梱される、Safari 12.1のリリースノートです。注目は、昨年Safari Technology PreviewのRelease 68で実装されて以来、言及される機会が徐々に増えてきているように思うメディアクエリ、prefers-color-schemeのサポートです。

prefers-color-schemeは、私が講師の一人として登壇している2019年のWebデザイントレンド 解説セミナーでもご紹介しているのですが、ユーザーの選択したOSレベルのカラーテーマに合わせてWebページのスタイルを変更できるようにするメディアクエリです。ユーザーのニーズなり嗜好に寄り添ったビジュアルデザインをWebで提供できる可能性を更に広げるもの、と私は理解しています。

prefers-color-schemeは、Media Queries Level 5（本稿執筆時点では草案段階）で定義されています。例えばライトモードを選択しているユーザーには全体的に明るい色調の、ダークモードを選択しているユーザーには逆に暗い色調のデザインを提供できるようになります。

@media (prefers-color-scheme:light) {
/* ライトモード向けのスタイル */
}
@media (prefers-color-scheme:dark) {
/* ダークモード向けのスタイル */
}

本稿執筆時点ではCan I useにある通り唯一Safari Technology Previewがサポートしている状況ですが、他のブラウザでも対応が進められています。Chromeのレンダリングエンジン、Blinkについては889087 - Add support for CSS prefers-color-scheme media feature - chromium - Monorailにある通り、実装作業中というステータスです。またFirefoxについても前向きな動きが1494034 - Add support for CSS prefers-color-scheme media featureで見受けられますが、[css-mediaqueries] prefers-color-scheme and printing · Issue #3522 · w3c/csswg-draftsで指摘されているような、仕様の不明点なり不備がなくなってからの実装になるかもしれません。

Webデザイン関連の英文記事を眺めますと、わざわざダークモードに対応することの意義や是非を問うものもあります。技術的に可能になるからといって即、対応すべきかといえばそうではないでしょう。ダークモードとライトモードの違いを踏まえて考慮すべきポイントが、単なる背景色と前景色の変更にとどまらないことは、Redesigning your product and website for dark mode -- Stuff & Nonsenseで論じられている通りです。結局は費用対効果次第というお話ではありますが、対応の要不要を検討するにはDo I have to add a dark mode now? | Koos Looijesteijnにある表などが参考になるでしょう。

果たして、ダークモード対応はこれからのWebデザインのトレンドとなるでしょうか？　Safari 12.1のリリースを目前に、その足音が近づいて聞こえているのは、きっとアクセシビリティ視点から注目している私だけではないはずです。

第10回MLCマークアップ部お題のスクープ型ボックスをCSSマスクで再現した話

先日社内で開催された第10回MLCマークアップ部の総評の中で、「お題のボックス部分はどのように再現するか」という問いかけがありました。

筆者は当初SVGでマスクを適用して再現する想定だったのですが、CSSのみではどのように再現するのだろうかと思い実際に作成してみることにしました。

「第10回MLCマークアップ部お題のスクープ型ボックスをCSSマスクで再現した話」の全文を読む

第10回MLCマークアップ部 開催レポート

皆さんこんにちは！UI開発者の宇賀です。

遅ればせながら、あけましておめでとうございます🎍⛩！
読者の皆様本年もどうぞよろしくお願いいたします🙇。

さて、毎年1月恒例行事となりましたMLCマークアップ部による「かきぞめマークアップ部」を、先週1月16日（水）に開催しましたので当日の様子をお伝えします（昨年の様子）。

MLCマークアップ部について

テックラウンジBlogでおなじみのテックラウンジ運営委員会が運営するイベントで、html5jマークアップ部が開催しているMarkupCafeにインスパイアされ発足しました。

お題のワイヤーフレームやデザインを見ながら、「正解がない」マークアップの中で「より品質の高いマークアップとは何か」を模索します。

この活動は、HTMLの仕様やアクセシビリティ、情報構造化等に対する理解を深めると共に、議論や発表の機会を通じファシリテーション能力を高めることを目的としています。

お題

「第10回MLCマークアップ部 開催レポート」の全文を読む

webpack 4とmini-css-extract-pluginを使ってCSSを別ファイルに書き出す方法

Vue.jsで単一ファイルコンポーネントを用いる際にCSSをひとつのファイルに書き出す方法は公式のドキュメントに掲載されています。しかしドキュメント内で紹介されているExtract Text Pluginの最新バージョン（v3.0.2）は2018年12月現在webpack 4に未対応なため、webpack 4の環境下で実際に導入するとエラーが出てしまいます。

そこで今回は、Extract Text Pluginで利用を推奨されているmini-css-extract-pluginを用いてVue.jsの単一ファイルコンポーネントに記述されているCSSを別のファイルに書き出す方法をご紹介します。

「webpack 4とmini-css-extract-pluginを使ってCSSを別ファイルに書き出す方法」の全文を読む