「CSS3」の記事 - 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

パララックス

(css) scroll-behavior と scroll-margin-top についてメモ

2022-04-27T23:58:57+09:00

css の scroll-behavior と scroll-margin-top について検証したのでメモ。

経緯

Bootstrap 5 で何気なく検証をしていたら、特に何をしたわけでもないのに同一ページ内のアンカーリンクにアニメーション付きでスクロールしたので気になりました。

自前の JavaScript では何も記述していないプレーンな状態だったので、 Bootstrap 5 の JavaScript かと思ったのですが、該当の CDN からの読み込みの scriptタグを削除しても動作したので「すわ css 側か？」となり調べてみることにしました。

調査結果

結果、 scroll-behaviorプロパティに依るものと分かりました。具体的には、

html {
    scroll-behavior: smooth;
}

この記述でページ全体にスクロールアニメーションが付与されていました。

しかも調べてみると、別ページのアンカーリンクに遷移する場合は

ページ遷移
遷移先のページでアンカーリンクまで自動的にアニメーション付きでスクロール

という挙動をすることが分かりました。

css で別ページのアンカーリンクまで対応しているのであれば、上述の挙動が気になる場合を除けばもはやこれ1つで済んでしまうのではないでしょうか……。

注意点としては、 iOS Safari が15.4(2022/3/14リリース、2022/4/27記事執筆時点で最新版) のみサポートとなっているため、最新版以外の Safari のサポートが必要な場合は polyfill 等の代替手段を講じる必要性がありそうです。

PJAX 等のデフォルトではない遷移をした際の挙動については未検証なので何ともですが少し気になります。

それと、もう一点気になったのは Bootstrap のケースで言うとナビゲーションバーに .fixed-top を付けていた場合。つまりナビゲーションバーが画面上部に固定表示で追従するパターンですね。

頻出するパターンですが、このケースでは工夫しないとアンカーリンク移動時にナビゲーションバーの裏側にコンテンツが隠れてしまうという課題がありました。

かつてはこれを margin-top: -80px; padding-top: 80px; 等とネガティブマージンとパディングで調整・相殺するテクニックを使っていましたが……。

scroll-margin-top

ここで兼ねてより目を付けていたのが scroll-margin-top 。 scroll-snap と呼ばれるスクロール時に特定の位置で止めたり誘導するプロパティの1つで、上述のアンカーリンク遷移時にナビゲーションバーの裏側に隠れてしまう問題を解決する方法として利用できます。

.anchor-link {
    scroll-margin-top: 80px;
}

これまで上述のようなネガティブマージョンとパディングの相殺や、あるいは before疑似要素を利用した方法で調整していた手間が、上述の通り1行指定するだけで解決できます。

css変数を使用するならば、

:root {
    /* 変数定義 */
    --navbar-height: 80px;
}
html {
    /* スムーススクロール */
    scroll-behavior: smooth;
}
.header {
    /* ナビゲーションバーを上部固定表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    /* css変数を使用して高さを指定 */
    height: var(--navbar-height);
}
.main {
    /* スクロール可能なコンテンツ領域の上端部分はめり込むのでここは普通に margin-top でナビゲーションバー分下げる。css変数使用。 */
    margin-top: var(--navbar-height);
}
.anchor-link {
    /* アンカーリンクが裏側に隠れるのを抑止。css変数使用。 */
    scroll-margin-top: var(--navbar-height);
}

このようなイメージですね。

"scroll-margin-top" | Can I use... Support tables for HTML5, CSS3, etc

ちなみにこちらは iOS Safari 14.7 以降で有効ですが、やはりそこそこ新しめの Safari である必要があるので、こちらもケースによっては注意が必要そうです。

参考

scroll-behavior

ネガティブマージョンとパディングの調整

ネガティブマージン・パディングで固定ヘッダー使用時のアンカーリンクに対応する
【CSS】ページ内リンクのジャンプ先の位置を調整する at softelメモ
- 疑似要素を使う手法もあり

scroll-margin-top

俺的CSS便利Property・Value・Selector 50連発！

2019-08-16T15:05:02+09:00

最近すごくHTMLやCSSを書いている気がするので、ここらでCSSのよく使うプロパティや知っていると便利なプロパティをまとめてみることにしました。早速行ってみましょう！

よく使うもの

1. ::before, ::after

これを指定した要素の子要素として挿入される疑似要素。子要素を持てない要素(img, inputなど)には指定不可能。contentプロパティを指定しない限り挿入されない。なにも入れるcontentがない場合はcontent: ""を指定する。

2. min-height, min-width

高さや幅の最小値を指定する。mainコンテナのように、必ずある大きさ以上の大きさが必要な要素に指定すると、コンテンツの大きさにかかわらず設定した大きさより小さくならない。

3. max-height, max-width

上のmin-系とは逆に、高さや幅の最大値を設定する。指定すると、コンテンツの大きさにかかわらず、設定した大きさより大きくならない。

4. order

HTMLの要素の兄弟順をオーバーライドする。これを指定すると、強制的に兄弟要素の中でその順番になるように表示される。nth-系には影響しない。

5. visibility

display: noneと違って、表示したくないけれど領域は確保したいという場合に使える。

6. z-index

要素の描画順を設定するプロパティ。position: fixed;と使うことが多い。

7. clip-path

要素の見かけの外形を設定するプロパティ。うまく使えばCSSだけでいろんな表現が可能に。

8. will-change

要素のCSSプロパティがアニメーションで変化することをあらかじめブラウザに知らせる。パフォーマンス爆上がり。

9. transform

要素を移動、回転、拡縮、変形させるプロパティ。ちょっと場所がずれるときとか、アニメーションで動かしたいときに便利。

10. :root

root疑似クラス。document.documentElementを指し示すセレクタ。カスタムプロパティと組み合わせると応用範囲は無限大。メディアクエリと組み合わせるとモバイルビュー判定にも使える。

@media screen and (max-width: 960px) {
    :root {
        --is-mobile: yes;
    }
}
@media screen and (min-width: 961px) {
    :root {
        --is-mobile: no;
    }
}

11. transform-origin

transformプロパティの基準になる点を指定するプロパティ。ローディング画面のスピナなどを作るときなど、意外と使える場面が多い。

12. position: relative

position: absoluteが親要素を基準とした位置取りにならない！？って思ったときは大概こいつの設定忘れが原因。これが設定された要素の子要素にposition: absoluteが指定された場合、これが設定された要素を基準とした位置取りになる。

13. appearance: none

デフォルトの見た目をなくすプロパティ。input要素に独自のスタイルを当てたいときなど、これを設定するとうまくいくことが多い。

14. box-shadow

要素が落とす影を設定するプロパティ。背景が設定されていない要素につけると違和感マシマシ。そういうインラインなテキスト要素に影をつけたい場合は、text-shadowプロパティを使うこと。

15. background-clip

きれいなタイトル文字の修飾をしたいときに。ヘッディング要素のbackground-imageプロパティに適当な画像を設定して、このプロパティの値をtextにすると、背景が文字の形で切り抜かれる。

16. background-attachment: fixed

要素内のコンテンツが動いても、背景を動かしたくない場合に使う。サイトの背景に設定するといい感じになるかも。

17. border-radius

要素を角丸にできる。もはや説明不要。

18. :not

セレクタにマッチしない要素にマッチする。例えば、:not(.not-select)というセレクタは、not-selectクラスを持たない要素にマッチする。

19. :first-child, :last-child, :nth-child, :nth-last-child

指定された順番にある兄弟要素にマッチする疑似クラス。

20. :first-of-type, :last-of-type, :nth-of-type, nth-last-of-type

指定された順番にある同じタグ(spanどうし、divどうしなど)の兄弟要素にマッチする疑似クラス。

21. :required

required属性のあるformパーツにマッチする。

22. :invalid

入力された値が要求された形式に従っていないformパーツにマッチする。

23. outline

borderの外側に描画されるborderみたいなやつ。borderと違って、それ専用に場所が確保されない。

24. attr()

print画面でだけ::after疑似要素にurlを表示したいときなど、CSSのプロパティに特定のHTML属性を設定したいときに使用する。

25. user-select

ユーザーが要素を選択可能かどうかを設定する。spanにclickイベントを設定したときなど、選択されるのが鬱陶しかったり、要素を選択してほしくないときに使う。

26. pointer-events

要素のどこがマウスイベントをキャプチャするか指定するプロパティ。オーバーレイなど、ほかの要素より前に出るがマウスイベントをキャプチャしたくない要素にはnoneを設定すると吉。

27. cursor

要素の上に乗ったカーソルの表示の種類を設定する。ユーザビリティが上がるらしい。

28. :checked

チェックが入っているチェックボックスにマッチする。うまく活用するとHTML/CSSだけで開閉するメニューなどの2つの状態を持つUIが記述できる。

29. display: flex

要素をflexboxにする。子要素の数によって、自動でいい感じに配置を決めてくれる。すごく便利。ついつい多用しがち。

30. justify-content

要素の配置を決めるプロパティ。上のdisplay: flexと組み合わせて使うことが多い。

31. flex-flow

flexboxで、要素を配置する向きを決める。

32. flex

flexboxの子要素に指定するプロパティ。flex-grow、flex-shrink、flex-basisの3つを一気に指定できる。flex-growは要素がコンテナより小さいときにどれくらい大きくするか、flex-shrinkは逆に要素がコンテナより大きいときにどれくらい小さくするか、flex-basisは要素がコンテナの中でどれくらいの初期サイズを持っているのかを指定する。

そこまで使うわけでもないけど知っていたら便利なもの

33. position: sticky

これを設定された要素が親要素の中でrelative + fixedのような振る舞いをするようになる。Qiitaのいいねボタンやストックボタンのスマホ版みたいな振る舞いがこれ(とtop, bottom, right, leftプロパティのどれか1つ以上)だけで記述可能。

34. text-indent

行頭字下げをするプロパティ。パラグラフの先頭で字下げしたいときに有効。

35. ::first-letter

ある要素の中で、最初の文字にマッチする疑似要素。パラグラフの最初の文字だけ大きくするような表現に使える。

36. ::select

ある要素の中で、現在選択されているものにマッチする疑似要素。選択部分の強調などに使える。

37. ::target

urlのターゲットになっている要素にマッチする。ページ内リンクで飛んだ先の要素を強調するのに使える。

38. perspective

transformと組み合わせて使う。遠近法をどの程度かけるか指定するプロパティ。

39. transform-style: preserve-3d

これを三次元の移動回転変形を指定したtransformプロパティを持つ要素の親に指定することで、3次元的な描写を可能にすることができる。

40. filter

要素に指定したSVGフィルタをかける。::beforeに指定して背景をぼかしたり、グレイスケール化したり、いろいろな視覚効果を追加することができる。

41. ::marker

::marker
リストのマーカーにマッチする疑似要素。

←これがリストのマーカー。

42. ::placeholder

formパーツ要素のplaceholderにマッチする。placeholderの色やフォントなどを変えたいときに便利。

43. :defined

任意のCustomElementにマッチする。

44. quotes

～のタグを使ったときに表示される引用符を制御できる。それ以外のタグの場合も、以下のようにして利用できる。

blockquote {
    quotes: "「" "」";
}
blockquote::before {
    content: open-quote;
}
blockquote::after {
    content: close-quote;
}

より正確な動作の説明としては「open-quoteとclose-quoteの値を制御する」ということになる。

45. text-overflow

文字がコンテナのサイズを超過したときの処理を設定する。...のような記号で省略したり、それ以外の文字で省略したり、あるいはそれ以上を表示しなかったりするような表現が可能。

46. writing-mode

文字を縦書きにするか横書きにするか設定できる。サイトの種類によっては多用することもあるかも。

47. text-orientation

writing-modeをvertical-rlまたはvertical-lrにしたときに、文字をどの向きで配置するか設定する。

48. clear

浮動要素のまわりの固定要素の配置(回り込み)を指定する。浮動要素しか含まないような要素の高さを維持するために使うこともできる。

.float-only::after {
    content: "";
    display: block;
    clear: both;
}

49. all

すべてのプロパティを一気に設定できる。親要素からすべてのスタイルを継承したいときや、逆に継承したくないとき、デフォルトの見た目にしたいときに使える。

50. touch-action

要素に対して可能なタッチアクションの種類を制限できる。たとえば、ズームしてほしくないとか、縦方向のスクロールを制限したいとかそういう場合に便利。Cookie Clickerのタッチ領域にこれを指定してほしいと何度思ったことか。

まとめ

CSS難しい……。MDNの解説ってプロパティごとに内容の質にけっこうばらつきが大きいんですね。

参考

https://developer.mozilla.org/en-US/docs/Web/CSS
https://www.w3schools.com/cssref/

Happy Hacking!

この記事はブログにも投稿しています。

「CSS3」の記事 - Crieit

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

ほげ

ぴよ

(css) scroll-behavior と scroll-margin-top についてメモ

俺的CSS便利Property・Value・Selector 50連発！

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