「ダークモード」の記事 - Crieit

Bootstrap 5 + scroll-margin-top + ダークモード + パララックスについてメモ

2022-04-28T00:04:15+09:00

経緯

Bootstrap 5 で JavaScript の記述なしにアンカーリンクへのアニメーション付きスクロールが scroll-behavior で実装されていることを最小限構成で確認したので、改めて Bootstrap 5 で検証したいと思います。

デモ

Home - Vault Celestia

早速ですがデモを。

scroll-margin-top

上述の通り、 Bootostrap 5 ではアンカーリンクへのアニメーション付きスクロールは scroll-behavior: smooth; で実装されているのでこの部分はそちらに任せて、 scroll-margin-top のみ自前で記述。

// foundation/_variable.scss
$navbar-height: 56px;

/* css変数 + Scss変数 */
:root {
    --navbar-height: #{$navbar-height};
}


// object/utility/_u-ssnapmt.scss
.u-ssnapmt {
    scroll-margin-top: var(--navbar-height);
}

今回は css変数 + Scss の併用で記述してみました。

css変数 + ページごとのキービジュアル画像の変更

キービジュアル (ページ最上部にある画像 + 見出し + キャッチコピー等のパーツ) の背景画像について、ページごとに異なる画像を表示させたい、というのはよくある話だとは思います。

今回は css変数を使って

予め headタグ内の styleタグでは background-image: var(--img); でcss変数で指定しておく
各要素で変数の値を都度差し替える

という形で画像を切り替える形式を採ってみました。

なお、今回はデモなので Jumbotron風の実装で。

ダークモード

// layout/_l-main.scss
@charset "utf-8";

@use "../foundation" as f;

.l-main {
    background-color: f.$bg-color;
    color: f.$color;
    #dark > & {
        /* ダークモード対応 */
        @media (prefers-color-scheme: dark) {
            background-color: f.$color;
            color: f.$bg-color;
        }
    }
}

メディアクエリ @media (prefers-color-scheme: dark) によるダークモードを試しに記述。

ブログのような色に対して中立性の高いコンテンツの場合は使えそうですが、ブランドカラーが決まっている場合は難しそうな感。

個人的には基本ダークモードの方がありがたいのですが……。

パララックス

最後はパララックス。これについてはパッケージを利用しました。

    "dependencies": {
        "ukiyojs": "^3.0.0"
    },

import Ukiyo from 'ukiyojs';

window.addEventListener( 'load', () => {
    const ukiyoParallaxes = document.querySelectorAll( '.ukiyo' );
    ukiyoParallaxes.forEach( ( ukiyoParallax ) => {
        new Ukiyo( ukiyoParallax, {
            scale: 1.75,
            speed: 1.75,
        } );
    });
});

公式のドキュメント通りです。

GitHub - yitengjun\/ukiyo-js: ⛰️Modern parallax library for picture elements and any images

検索すると自前実装も出てくるのですが、後々を考えるとパッケージの方が良さそうな気がするので。

参考

scroll-margin-top

パララックス

意外と簡単！自分のサイトをダークモード対応してみた【技術編】

2019-09-24T04:49:33+09:00

スプランプ（splamp.info）というサイトの管理人をしているウラルです。

来ましたよ、ダークモードの時代が。2019年はダークモード元年です。

ダークモードの時代が来た

何を言っているかお分かりでしょうか。
実は、2019年はWindows・iOS・Androidという三大OSがダークモード対応をするという、大きな時代の節目なのです。

OSの更新日とダークモード設定方法

2019年5月22日
Windows 10 May 2019 Update配信開始。「個人用設定 > 色」から「既定のアプリモード」を「黒」にする。

2019年9月4日
Android10配信開始。「設定 > ディスプレイ」から「ダークテーマ」をオンにする。

2019年9月20日
iOS13配信開始。「設定 > 画面表示と明るさ」から「外観モード」を「ダーク」にする。

Webが対応しないでどうする

個人的な所感ですが、開発者の中でダークモード対応は興味としては薄いように感じます。

しかし、Webこそダークモードの流れに乗るべきなのです。なぜなら、ほとんどのWebサイトの背景は真っ白じゃないですか！目が眩むし、夜眠れなくなりそうです。

私は、以前からWebサイトでダークモードの対応をしたかったのですが、OSレベルでのダークモード対応が普及していなかったため、ずっと待っていました。サイト内にダークモードボタンを設置しても、ブラウザが真っ白では意味がありませんからね。

三大OSが対応した今、もう何も遮るものはありません。

CSSだけで実装できる

ダークモード対応は、難しい技術が必要なのでしょうか。いいえ、CSSだけでいいんです。

CSSのメディアクエリの１つである、prefers-color-schemeを使います。

prefers-color-scheme は CSS のメディア特性で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。
prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN

構文によると、ダークモードがオンになるとprefers-color-schemeがdarkになり、オフだとlight、そもそも機能を持ち合わせていない場合はno-preferenceという値になります。

実際に利用する場合はどう使うのでしょうか。
おすすめは、CSS変数との併用です。既存の構造を崩さずに、ダークモード用の色彩設定を追加することができます。

例

:root {
    --header-bg: white;
    --body-bg: white;
    --body-color: black;
}

@media (prefers-color-scheme: dark) {
:root {
    --header-bg: hsl(212, 38%, 12%);
    --wrapper-bg: hsl(212, 40%, 17%);
    --body-color: #e4e4e4;
}
}

header {
    background: var(--header-bg);
}

body {
    background: var(--body-bg);
    color: var(--body-color);
}

CSS変数を参照させることで、ダークモードに切り替わると一斉に色が変わります。

imgタグの画像の切り替えは若干面倒ですが、私はライト用とダーク用の2つを連続で並べて、CSSでdisplay: noneとdisplay: inlineを入れ替えるようにしました。

大変だけど

これまで白ベースで作ってきたサイトにとっては、ダークモードの対応は破壊的な修正にあたります。角丸で四隅が白い画像だとか、色でごまかしていた要素の境目などを、見直さなければいけません。

しかし、それはデメリットばかりではありません。それは、負の遺産になりかけていたCSSを直すチャンスかもしれません。（少なくともうちのサイトは構造から改善しました）

三大OSがダークモードに対応した今、時代の流れはダークモード対応です。
実装自体は簡単ではあるものの、色使いの検討や構造の見直しに割と時間がかかるので、早め早めに手を付けたいものです。
アクセシビリティとか言って、やがて対応に迫られてくるのは間違いありません。

次回は【デザイン編】として、ダークモードデザインについて記事にしようと思います。

「ダークモード」の記事 - Crieit

Bootstrap 5 + scroll-margin-top + ダークモード + パララックスについてメモ

経緯

デモ

scroll-margin-top

css変数 + ページごとのキービジュアル画像の変更

ほげ

ぴよ

ダークモード

パララックス

参考

scroll-margin-top

Bootstrap 5 での jumbotron

css変数で背景画像指定

ダークモード

パララックス

意外と簡単！自分のサイトをダークモード対応してみた【技術編】

ダークモードの時代が来た

OSの更新日とダークモード設定方法

Webが対応しないでどうする

CSSだけで実装できる

大変だけど

「ダークモード」の記事 - Crieit

Bootstrap 5 + scroll-margin-top + ダークモード + パララックス についてメモ

ほげ

ぴよ

意外と簡単！自分のサイトをダークモード対応してみた【技術編】

Bootstrap 5 + scroll-margin-top + ダークモード + パララックスについてメモ