サイトのデザインを更新（2021年）
内容
概要
当サイトのデザインを、従来よりも平面的なものに変更すると共に、OSもしくはブラウザーのカラーテーマに応じて、ライトモード／ダークモードへ自動的に切り替わるようにしました。こうした変更を設定したWordPressのテーマ「krzm2021」を作成し、サイトに適用しています。
また、グローバルナビゲーションのリンクボタンは、画面右辺に垂直で表示するようにしました。
カラーテーマ
カラーテーマに関しては、CSSメディアクエリーの「prefers-color-scheme」メディア特性を利用し、スタイルシートで切り替えています。また、この切り替えをCSS上で容易にするため、CSSカスタムプロパティ（CSS変数）も併用しています。
当サイトの基本的な配色はモノクロ（グレースケール）であるため、最も単純な切り替え方法は、最背面の要素であるhtml要素に対し、色の反転を一括で行うことです。これは、filterプロパティーのinvert()値で実現できます。
しかし、単純に白黒反転を行うと、白色系（ライト）での配色では問題なかったとしても、黒色系（ダーク）ではコントラストや画面の雰囲気が損なわれてしまう配色があります。たとえば、RGBの白（255,255,255）が黒（0,0,0）に変わってしまうと、非常に平板なイメージとなります。同様に、白色系で採用したグレー値を、単純に反転すると雰囲気だけでなくコントラスト等が損なわれる場合もあります。
また、いくつかの箇所にはグレーではなく赤や緑のカラー値も採用している他、写真等のカラー画像も存在するため、これらを反転してしまうと、いわゆる「ネガ」となってしまいます。
そこで、filterプロパティーによる反転は行わず、サイトに使用する色はすべてカスタムプロパティとして登録し、黒色系にした際に適切な色を指定して、これらを「prefers-color-scheme:dark」の条件で切り替えるようにしました。
その他の採用技術
上記のように、新しいメディア特性やカスタムプロパティを採用したため、当サイトの表示には最新ブラウザーが必須となります。実際のところ、Internet Explorer 11や旧Microsoft Edge（EdgeHTML版）が実質的にサポート外となったので、Microsoft Edge（Chromium版）や他のChromium系ブラウザー（Chrome、Opera、Vivaldi等）、そしてFirefoxの最新版であれば使用可能な技術に合わせ、サイトを更新したのです。
このため、なるべく新しいCSSのプロパティを取り入れ、他の部分でもレイアウトに採用しています。たとえば、ページのレイアウトには基本的にグリッドレイアウトを使用し、部分的にフレキシブルボックスレイアウトを援用するようにしています。
グリッドレイアウトでは、グリッド領域を名称で定義するgrid-template-areas、grid-areaプロパティを使用しています。エリアの隙間を指定するgapプロパティや、グリッドアイテムの配置にはjustify-selfやalign-selfプロパティも使いました。元々、gapはマルチカラムレイアウト、整列関係はフレキシブルボックスレイアウトで用意されたものでしたが、現在のCSSではグリッドレイアウトとも共用になっています。
また、CorelDRAWで言うところの「マージモード」（Adobe系では「描画モード」）を適用するmix-blend-modeやbackground-blend-modeプロパティ、値を比較して適用するmin()、max()、clamp()値、ぼかし効果を得るためのfilterプロパティblur()値、要素をパスでトリミングするためのclip-pathプロパティpolygon()値、画面にスムーズスクロールを適用するscroll-behaviorプロパティsmooth値等も使用しています。
ブラウザーの互換性
こうした技術を採用したため、先に述べたとおり、対応するブラウザーはChromium系とFirefoxの最新版となります。
ただし、所有するAndroidタブレットで試したところ、Chromium系ではあるもののAndroid版Microsoft Edge（バージョン46）ではmin()、max()、clamp()値に対応していないため、レイアウトが崩れます。このブラウザーに関しては、対応は見送ります。
また、カラーテーマ対応に関しては、Windows版のChrome、Vivaldi、Firefoxでは、ブラウザー自体のテーマ設定でダーク系のものを選んでも、prefers-color-scheme:darkの対象とはならないようです。これらのブラウザーの場合、Windowsの「設定」-「個人用設定」-「色」の「既定のアプリモードを選択します」で「ダーク」を選んだ場合に、カラーモードがサイトに反映されます。Microsoft EdgeやOpera GXでは、OSの設定の他に、ブラウザー側の設定（Microsoft Edgeでは「設定」-「外観」-「既定のテーマ」）でも切り替えに対応し、OS設定よりも優先されます。Android版の各ブラウザーでは、ブラウザーでのテーマ設定が表示に直接反映されます。
なお、当然ながらSafari系のブラウザーでの表示は、一切確認していません。