「Bootstrap」の記事 - Crieit

脱jQuery メモ

2022-04-30T00:03:10+09:00

経緯

Bootstrap でブレークポイント未満(スマホ時)のナビゲーションリンクにアンカーリンクがある場合、アンカーリンクをタップしてもナビゲーションリンクのメニューが開いたままアンカーリンクへ遷移するので、それを制御するコードを自前で書いていました。その部分を脱 jQuery したのでメモしておきます。

コード

jQuery

まずは Bootstrap 4 までの jQuery でのコード。

// ナビゲーションバー
const $navbar = $('#navbar');
// ブランド名とドロップダウンコンポーネント以外のナビゲーションリスト
$navbar.find('.navbar-brand, .nav-item:not(.dropdown) a, .dropdown-item').on('click', function (e) {
    // 略
    const navBarListID = 'navbarList';
    if ($(e.currentTarget).closest('#' + navBarListID).length > 0) {
        let breakpoint = 0;
        if (/(^|\s)navbar-expand-(\S*)/g.test($navbar.children('.navbar').prop('class'))) {
            switch (RegExp.$2) {
                case 'sm':
                    breakpoint = 576;
                    break;
                case 'md':
                    breakpoint = 768;
                    break;
                case 'lg':
                    breakpoint = 992;
                    break;
                case 'xl':
                    breakpoint = 1200;
                    break;
                default:
                    breakpoint = 0;
                    break;
                }
            }
            if ($(window).outerWidth() < breakpoint && !$navbar.find('.navbar-toggler[data-target="#' + navBarListID + '"]').hasClass('collapsed')) {
                // 現在の表示がハンバーガーメニューの場合
                $navbar.find('.navbar-toggler[data-target="#' + navBarListID + '"]').trigger('click'); // 移動したらハンバーガーを折りたたむ
            } else if ($(e.currentTarget).hasClass('dropdown-item') && $(e.currentTarget).closest('.dropdown').hasClass('show')) {
                // 現在の表示がハンバーガーメニューではなく、ドロップダウン内のメニューをクリックした場合
                $(e.currentTarget).closest('.dropdown').trigger('click'); // 移動したらドロップダウンを折りたたむ
            }
        }
        return false;
    }
};

ざっくりこんなコードでした。やっていることとしては

ブランド(.navbar-brand), ドロップダウンではないナビゲーションリンク(.nav-item:not(.dropdown) a, ドロップダウン内のリンク(.dropdown-item) がクリックされた場合
- クリック(タップ)された要素の直近の祖先要素に #navbarList の id属性がある要素が存在する場合
  - ナビゲーションバー要素のクラスにある .navbar-expand-XX のクラスのブレークポイントの文字列を取得してブレークポイント値をセット
  - その値と現在のウィンドウの幅を比較してウインドウ幅の方が小さい (=ハンバーガーメニューに表示が切り替わっている) 、かつ .navbar-toggler 要素が .collapsed のclass属性を持っている (=メニュー展開) 場合
    - ハンバーガーメニューを折りたたむ (ハンバーガーアイコンを1度クリックする)
  - またはクリックされた要素が .dropdown-item class属性を持っている (=ドロップダウンメニュー) 、かつ直近の祖先要素で .dropdown class属性を持つ要素が .show class属性を持っている (=ドロップダウンが開かれている) 場合
    - ドロップダウン要素を折りたたむ

という挙動。

プレーン JavaScript

これを Bootstrap 5 対応でプレーンな JavaScirpt に書き換え。

const navbar = document.querySelector('#navbar');
const navBarListID = 'navbarList';
if (
    typeof e.currentTarget.closest(`#${navBarListID}`) !== 'undefined'
     && e.currentTarget.closest(`#${navBarListID}`) !== null
) {
    let breakpoint = 0;
    if (/(^|\s)navbar-expand-(\S*)/g.test(navbar.className)) {
        switch (RegExp.$2) {
            case 'sm':
                breakpoint = 576;
                break;
            case 'md':
                breakpoint = 768;
                break;
            case 'lg':
                breakpoint = 992;
                break;
            case 'xl':
                breakpoint = 1200;
                break;
            case 'xxl':
                breakpoint = 1400;
                break;
            default:
                breakpoint = 0;
                break;
        }
    }
    if (window.innerWidth < breakpoint) {
        // ブレークポイント未満の幅のとき
        const navbarTogglers = navbar.querySelectorAll(`.navbar-toggler[data-bs-target="#${navBarListID}"]`);
        navbarTogglers.forEach((navbarToggler) => {
            if(!navbarToggler.classList.contains('collapsed')) {
                // 現在の表示がハンバーガーメニューの場合、
                // 移動したらハンバーガーを折りたたむ
                navbarToggler.dispatchEvent(new Event('click'));
            }
            else if(
                e.currentTarget.classList.contains('dropdown-item')
                 && e.currentTarget.closest('.dropdown').classList.contains('show')
            ) {
                // 現在の表示がハンバーガーメニューではなく、ドロップダウン内のメニューをクリックした場合
                // 移動したらドロップダウンを折りたたむ
                e.currentTarget.closest('.dropdown').dispatchEvent(new Event('click'));
            }
        });
    }
}

やっていることは大体同じです。ただし、いくつか置き換えが必要な部分があったので以下その点について触れていきます。

置き換えた部分

複数のクラス指定で要素を取得

const elms = document.querySelectorAll('.hoge, .fuga');

jQuery のようにカンマ区切りで document.querySelectorAll() でOK。

.on()

脱jQuery .on() .off() | q-Az

普通に .addEventListener('eventName', function) でOK。

複数の要素に対するイベントハンドラ

どうして！？document.querySelectorAll(selector).addEventListener()が動かないわけ | フロントエンドBlog | ミツエーリンクス

const elms = document.querySelectorAll('.hoge, .fuga');
elms.forEach(elm => {
    elm.addEventListener('click', process);
},
false);

.querySelectorAll() で取得した要素を .forEach() で反復処理させます。

親要素・祖先要素

【Javascript】親要素や祖先要素を取得する方法 parentNode\/closest | ゆうやの雑記ブログ

普通に .closet('.parent') 。

子要素

jQuery の .children('selectorName') は一応プレーンな JavaScript にも .childrenプロパティがある模様。

ただし、 jQuery のように .children へセレクタ指定はできなさそうなので、この部分は HTML のクラスを子要素の方に付けることで回避しました。

クラス名全てを取得

クラス名（class属性の値）をすべて取得 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website

jQuery では .prop('class') としていたところですが、 .className でOK。

子孫要素の中から探す

脱jQuery .find() | q-Az

jQueryでは .find() だったところを、 elm.querySelector('selectorName') と指定すればOK。

ウインドウ幅

jQuery で $(window).outerWidth() としてたところを、今回の用途では window.innerWidth へ置き換えました。

クラスの存在チェック

脱jQuery .addClass() .hasClass() .removeClass() .toggleClass() | q-Az

jQuery では .hasClass('className') だったところを、 .classList.contains('className') へ置き換え。

イベントハンドラの指定とイベント発火要素の取得

普通に関数指定で elm.addEventListener('click', hoge(elm), false) と書いてしまっていました。

しかし、参考記事に拠るとこれだとその関数の実行結果が渡されるとのこと。しかもイベント発火時ではなく該当コード読み込み時に実行されてしまうため、挙動がおかしくなってしまいます。

これについては第二引数はオブジェクト (または JavaScript の純粋な関数) なので elm.addEventListener('click', hoge, false) と関数名だけにしなければならず、その通りに書けばOK。

一方、 const hoge = (e) => { /* 処理 */ }; で普通にイベントは渡ってくるので、「クリックされた要素」をイベントハンドラ内で利用したい場合は e.currentTarget とすれば問題ないですね。

最初これに気付かずしばらく嵌まっていました。参考記事に感謝。

イベント発火

jQueryを使わない書き方 ajax, each, trigger, on\/off, extend, deferred, animate, css編 | maesblog

イベントがクラスで渡す必要がありますがほぼ同じで、 elm.dispatchEvent(new Event('click')) とすればOK。

このような形でガシガシ書き換えていけば大きな問題はなさそうです。

とはいえ、この置き換えは地味にアンカーリンクへのスクロールアニメーションを scroll-behavior: smooth; に移行したおかげで上述以外の大半の JS を破棄しても問題ないと判断できたのが非常に大きいですね。そうでなければもっと大きなボリュームと対峙する必要がありました……。

しかも Scroll-margin-top で上部固定ナビゲーションバーの裏側にアンカーリンクが隠れてしまう問題を回避できる、というのも JS コードを削減できた要因の一つなので、この2つのプロパティは個人的にかなり神がかっていると感じます。細かいイージングは犠牲になりますが、今回は全然目を瞑ることができるレベルなので良しとします。

参考

複数のクラス指定で要素を取得

子要素

クラス名全てを取得

クラス名（class属性の値）をすべて取得 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website

子孫要素の中から探す

脱jQuery .find() | q-Az

ウインドウ幅

クラスの存在チェック

脱jQuery .addClass() .hasClass() .removeClass() .toggleClass() | q-Az

イベントハンドラの指定とイベント発火要素の取得

イベント発火

jQueryを使わない書き方 ajax, each, trigger, on\/off, extend, deferred, animate, css編 | maesblog

その他

JQueryをVanilla JSに緩やかに置き換える - Qiita

Bootstrap 5 のブレークポイント

Bootstrap 5 の変数やマップを上書きする

2022-02-06T21:41:13+09:00

Bootstrap 5 が去年5月にリリースされてからかなり経ってしまいましたが、 4 とは変数の上書きや追加の方法が変わっていると知ったので実験をしてみました。

検証結果

ページ: Black in me - Black! - Blackout
リポジトリ: GitHub - arm-band\/test_bootstrap5_blackout: Bootstrap5 の変数を上書きできるかテスト。

コード

ディレクトリ (関連する部分のみ)

   /
  └ src/
    └ scss/
       └ foundation/
            ├ bootstrap/
            │    └ _import.scss
            │
            ├ _append.scss
            ├ _index.scss
            ├ _mixin.scss
            └ _variables.scss

ひとまずこんな形に。今回はデモ用なので globalディレクトリを用意しませんでしたが、実際には globalディレクトリで運用しようかな、と思います。

src/scss/foundation/bootstrap/_import.scss

@charset "utf-8";

// color custom (override)
@import "../variables";

// Configuration
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/utilities";

// color custom (add to map)
@import "../append";

// Layout & components
@import "node_modules/bootstrap/scss/root";
@import "node_modules/bootstrap/scss/reboot";
// 略

元々の Bootstrap 5 の bootstrap/scss/bootstrap.scss のパスを調整したコピーを用意。

このコピーに2箇所手を加えます。

Configuration の読み込みの前に src/scss/foundation/_variables.scss を読み込む
Configuration の読み込みの後に src/scss/foundation/_append.scss を読み込む

src/scss/foundation/_index.scss

@charset "utf-8";

//@forward "variables";
@forward "bootstrap/import";
@forward "mixin";

元々同じディレクトリにあった _variable.scss の読み込みを削除。これは先の src/scss/foundation/bootstrap/_import.scss で _variable.scss を読み込んでいるためです。

src/scss/foundation/_variables.scss (既存変数の上書き)

@charset "utf-8";

@use "sass:color";

$m-color: #333;
$m-main-color: #666;
$m-main-color_d: color.scale($m-main-color, $lightness: -8%);
$m-main-color_l: color.scale($m-main-color, $lightness: 8%);
$m-accent-color: color.adjust($m-main-color, $hue: 150deg);
$m-link-color: color.adjust($m-main-color, $hue: 210deg);
$m-link-v-color: color.scale($m-link-color, $lightness: -8%);
$m-link-ha-color: color.scale($m-link-color, $lightness: 8%);
$m-bg-color: #fff;

// override
$primary:       $m-main-color;
$secondary:     $m-bg-color;

変数宣言。前半は自分用の変数なのでお好みで。ただし $link-color 等は Bootstrap 側の変数とバッティングするのでそういった変数名は避けます。

その上で、今回は最後の部分に Bootstrap5 の変数の値を上書きするための $primary や $secondary を用意。このように Bootstrap 5 の変数より前に定義することで既存変数の上書きができます。

src/scss/foundation/_append.scss

@charset "utf-8";

$custom-colors: (
  "blackout": #000
);

// blackout をマップ $theme-colors に追加
$theme-colors: map-merge($theme-colors, $custom-colors);

一方、マップ $theme-colors に新たな要素を追加するためには先程の変数上書きとは異なり、 Bootstrap 5 の変数等の後でマップに追加する必要があります。

……確かに map-merge で合体するマップを指定する都合上、予め指定するマップが存在していなければならないですよね。

これで既存のマップ $theme-colors に要素 blackout を追加できました。

結果

Bootstrap のボタンで検証。左から2つの primary と secondary は上書きしたのでカスタマイズした色に、3つ目はオリジナルの blackout です。4つ目以降はデフォルトの success や info 等が続いており、上述のようにマップに一部の色のみを指定して map-merge しても他の色が影響を受けていないことを確認しました。

これで大丈夫そうですね。

参考

Honoka を node_modules 内で使用する

2020-12-21T23:39:29+09:00

今までは Honoka と Bootstrap 本体を別のディレクトリに引っ張り出して合体させて使用していたのですが、 node_modules の中にそのまま残っている状態で使用したくなったのでメモしておきます。

経緯

今までは以下のように Honoka と Bootstrap を node_modules 外のディレクトリに引っ張り出して合体させていました。

src/scss/assets/bootstrap/ ディレクトリを作成
node_modules/bootstrap-honoka/scss/bootstrap.scss を 1.のディレクトリにコピー
src/scss/assets/bootstrap/honoka/ ディレクトリを作成
node_modules/bootstrap-honoka/scss/honoka/_honoka.scss を 3.のディレクトリにコピー
src/scss/assets/bootstrap/honoka/honoka/ ディレクトリを作成
node_modules/bootstrap-honoka/scss/honoka/ ディレクトリの .scss ファイルで4. _honoka.scss 以外を 5.のディレクトリにコピー
src/scss/assets/bootstrap/honoka/bootstrap/scss ディレクトリを作成
7.のディレクトリの下に node_modules/bootstrap/scss 以下のファイル・ディレクトリをコピー

これを npm scripts 等でひとまとめのタスクにして実行していました。

そもそも、何故今までこの方法を取ったかというと、以下の2つの理由に拠ります。

node_modules 下に Honoka と Bootstrap があるそのままの状態では上手く動かなかったため
src/scss/assets/bootstrap/honoka/_honoka.scss を Git 管理対象にしたかったため
- 該当ファイルはコンポーネントの読み込みを司っており、不要なコンポーネントを切った状態を Git 管理したかった

しかし、 LibSass から Dart Sass への乗り換えたり、 Dart Sass (@use, @forward 使用)で Bootstrap 4 の変数やマップを上書きするで Scss 周りを改修している中で、もう少し良いやり方がないか、と思い始めた次第です。最初の1回だけとはいえ、ファイルコピーの待ち時間も必要になりますし……。

結果

結果、「src/scss/assets/bootstrap/honoka/_honoka.scss の代わりとなる各コンポーネント読み込みの Scss を自前で用意する」形で node_modules に Honoka と Bootstrap を残したまま使用できるようにしました。

package.json

    "dependencies": {
        // 略
        "bootstrap": "^4.5.3",
        "bootstrap-honoka": "^4.4.0",
        // 略
    },

package.json はそのまま。

src/scss/global/framework.scss

@charset "utf-8";

//@forward "../assets/bootstrap/bootstrap"; //bootstrap
@forward "honoka/honoka_import"; //bootstrap

今まで src/scss/assets/ 下のファイルを読み込ませていたのを、自前ファイルに切り替え。

src/scss/global/honoka/_honoka_import.scss

@charset "utf-8";

// Core functions
@import "node_modules/bootstrap/scss/functions";

// Honoka variables
@import "node_modules/bootstrap-honoka/scss/honoka/variables";

@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/root";

// Core CSS
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";
@import "node_modules/bootstrap/scss/tables";
@import "node_modules/bootstrap/scss/forms";
@import "node_modules/bootstrap/scss/buttons";

// Components
@import "node_modules/bootstrap/scss/transitions";
@import "node_modules/bootstrap/scss/dropdown";
@import "node_modules/bootstrap/scss/button-group";
@import "node_modules/bootstrap/scss/input-group";
@import "node_modules/bootstrap/scss/custom-forms";
@import "node_modules/bootstrap/scss/nav";
@import "node_modules/bootstrap/scss/navbar";
@import "node_modules/bootstrap/scss/card";
@import "node_modules/bootstrap/scss/breadcrumb";
@import "node_modules/bootstrap/scss/pagination";
@import "node_modules/bootstrap/scss/badge";
@import "node_modules/bootstrap/scss/jumbotron";
@import "node_modules/bootstrap/scss/alert";
@import "node_modules/bootstrap/scss/progress";
@import "node_modules/bootstrap/scss/media";
@import "node_modules/bootstrap/scss/list-group";
@import "node_modules/bootstrap/scss/close";
@import "node_modules/bootstrap/scss/toasts";
@import "node_modules/bootstrap/scss/modal";
@import "node_modules/bootstrap/scss/tooltip";
@import "node_modules/bootstrap/scss/popover";
@import "node_modules/bootstrap/scss/carousel";
@import "node_modules/bootstrap/scss/spinners";
@import "node_modules/bootstrap/scss/utilities";
@import "node_modules/bootstrap/scss/print";

// Honoka original setting
@import "node_modules/bootstrap-honoka/scss/honoka/override";

今回用意した自前ファイル。Honoka/_honoka.scss at v4.4.0 · windyakin/Honokaの内容をそのまま持ってきて、パスを調整したものになります。

これでファイルコピーやディレクトリを掘るタスクを整理できてすっきり。

参考

モーダルの中で Slick を動かす場合の諸注意(setPotion指定、 Uncaught TypeError: Cannot read property 'add' of null エラー回避のために slick-initialized クラスの確認、 unslick 指定)

2020-12-15T00:06:21+09:00

モーダルのような、初期状態で display: none; がかかっているような要素の中で Slick を動かす場合にハマった事項のメモです。

slick - the last carousel you'll ever need

やりたかったこと

lazyLoad
モーダルの中で Slick を動かす
複数のモーダルがある(それぞれに Slick あり)

シチュエーションとしてはこんなところ。

サンプル

以下に一つずつ解説してきますが、動作確認のためのサンプルを置いておきます。

Slick Test

リポジトリも。

Slick Test

1. lazyLoad

まずは lazyLoad ですが、これについては slick で用意されている lazyLoad プロパティが使えます。

$('slick').slick({
    lazyLoad: 'ondemand'
});

プロパティはスライドする度に画像を読み込む ondemand とページ読み込み後に読み込む progressive の2つ。

また、 lazyLoad で画像が読み込まれたときに発火するイベント lazyLoaded とエラー時に発火する lazyLoadError があるので、ケースによってはこれらも利用できそう。

$('slick').on('lazyLoaded', function (event, slick, image, imageSource) {
    // lazy load succeed
    console.log(`${event.type}: ${imageSource} / ${image[0].alt} の読み込みが完了しました。`);
    // 「lazyLoaded: http://placehold.jp/667x375.jpg / Slick 1-4 の読み込みが完了しました。」のようなメッセージを出力
});
$('slick').on('lazyLoadError', function (event, slick, image, imageSource) {
    // lazy load failed
    console.log(`${event.type}: ${imageSource} の読み込みが失敗しました。`);
});
$('slick').slick({
    lazyLoad: 'ondemand'
});

ちなみに、 lazyLoad は JS 側だけではなく、 HTML 側にも既述が必要です。

img タグの src 属性は画像が読み込まれるまでのダミー画像の指定、本番のスライドショーで表示させたい画像は独自の data-lazy 属性で指定、となります。

ここまでがサンプルの「Slick 1」のケース。

2. モーダルの中で Slick を動かす

2.1. 普通に Slick

さてここからが本題。

例として Bootstrap 4 のモーダルコンポーネントを利用しますが、モーダルのような初期状態で display: none; となっている要素の中に Slick をセットすると動かないようです。

原因としては、親要素が display: none; なので、 Slick の要素が width: 0px; で潰れてしまうようです(ついでに height: 1px; でもあった)。

※サンプルの「Slick 2」の「モーダルを開く (setPotion 指定なし)」のケース

2.2. setPotion

ここで Slick 公式やいくつかの記事を見ると「 setPotion を指定すると良い」という記述が散見されます。

これは setPotion を指定したタイミングで Slick 要素のサイズを再計算してくれるようです。

今回は「モーダルが開いた時」なので、ボタンの click イベントにバインドすると良さそうです。これならば複数モーダル + Slick でもクリックされたモーダルのみ Slick が動くようになるので処理も軽減できます。

注意点としては、 click イベント直後だとまだモーダルがフェードのエフェクトで表示されている途中なのでせっかく再計算しても潰れてしまう可能性があること。

そのため、 setTimeout で処理する時間を指定しましょう。

$('#setPotionModalButton').on('click', function () {
    // 0.3s 後に setPosition 付きで Slick 実行
    const slickInit = setTimeout(() => {
        const $setPotion = $('#setPotion');
        // Slick
        $setPotion.slick({
            lazyLoad: 'ondemand'
        });
        $setPotion.slick('setPosition');
    }, 300);
});

※サンプルの「Slick 2」の「モーダルを開く (setPotion 指定あり)」のケース

これでモーダルの中でも開くようになりました。よしよし……ではなかった。

3. Uncaught TypeError: Cannot read property 'add' of null エラーの回避 → .not('.slick-initialized')

先程のモーダル、1回開くだけならば良いのですが、2回目以降モーダルを開こうとすると

Uncaught TypeError: Cannot read property 'add' of null

というエラーが発せられます。既に Slick が動いているところに、 click イベントでもう一度 Slick をバインドしようとしたので怒られてしまったわけです。

回避策としては、 .not('.slick-initialized') を追加すること。

Slick は初期化を完了すると該当要素に slick-initialized を付与するため、 .not('.slick-initialized') で「まだ Slick の初期化が済んでいない要素」と指定することでエラーを回避できる、ということですね。

$('#unInitializedModalButton').on('click', function () {
    // 0.3s 後に setPosition 付きで Slick 実行
    const slickInit = setTimeout(() => {
        const $unInitialized = $('#unInitialized');
        // Slick
        $unInitialized.not('.slick-initialized').slick({ // .not('.slick-initialized') を追加
            lazyLoad: 'ondemand'
        });
        $unInitialized.slick('setPosition');
    }, 300);
});

※サンプルの「Slick 3」のケース

console.log() 等で拾うと2回目以降 $unInitialized.not('.slick-initialized') は undefined になっていますが、エラーは回避できています。これで良し……ではなかった。

4. unslick

稀ですが、高速でモーダルを開いたり閉じたりして(あるいは何らかの理由で Slick の初期化が遅れて)しまうと、それ以降モーダルを開いても正常に Slick が表示されない現象が発生します。

画像が多かったり重かったりすると出やすくなるかもしれません。

ページ再読み込みすれば大丈夫と言えば大丈夫ですが……今回のシチュエーションではこの頻度がわりと大きく、無視できない状態でした。そのため、さらに対策を講じる必要がありました。

そこで、以下のような処理を行うことにしました。

モーダルを開くボタンクリック時
1. click イベント発火
2. setTimeout で 0.3s 後に Slick 実行 (const slickInit = setTimeout())
  - .not('.slick-initialized') 付き
モーダルを閉じる時
1. hidden.bs.modal イベント発火(Bootstrap 独自イベント)
2. jqueryObject.slick('unslick'); で unslick 発動、 Slick を解除
3. clearTimeout(slickInit); によって見初期化であろうとも上述「モーダルを開くボタンクリック時 2.」の動作を解除
4. modalButtonjqueryObject.off('hidden.bs.modal'); でhidden.bs.modal イベントもバインド解除

// setPosition ありで モーダル内 Slick を実行させる
const $unSlickModalButton = $('#unSlickModalButton');
const unSlickModalID = $unSlickModalButton.attr('data-target');
const $unSlickModal = $(unSlickModalID);
const slickInitializedClass = 'slick-initialized';
$unSlickModalButton.on('click', function () {
    const $unSlick = $('#unSlick');
    // 0.3s 後に setPosition 付きで Slick 実行
    const slickInit = setTimeout(() => {
        // Slick
        $unSlick.not('.slick-initialized').slick({
            lazyLoad: 'ondemand'
        });
        $unSlick.slick('setPosition');
    }, 300);
    $unSlickModal.on('hidden.bs.modal', function () {
        // Bootstrap のモーダルを閉じるイベントが発火したら
        if ($unSlick.hasClass(slickInitializedClass)) {
            // Slick 対象要素が slick-initialized クラスを持っていたら
            // unslick で Slick をアンバインド
            $unSlick.slick('unslick');
        }
        // setTimeout 発動前にモーダルを閉じると setTimeout が生き残っているので、すぐまたモーダルを開いたりすると Slick のバインドが2回走ったりしておかしくなるので clearTimeout する
        clearTimeout(slickInit);
        // モーダルを閉じる度に hidden.bs.modal イベントがバインドされて重複処理してしまうので閉じられたらアンバインドする
        $unSlickModal.off('hidden.bs.modal');
    });
});

※サンプルの「Slick 4」のケース

ここまでやって、ようやく納得のいく挙動になりました。思ったよりも紆余曲折ありました……。

参考

Slick

lazyLoad

「slick.js」の使い方応用編 | takblog

setPotion

Uncaught TypeError: Cannot read property 'add' of null

Dart Sass (@use, @forward 使用)で Bootstrap 4 の変数やマップを上書きする

2020-12-02T23:50:23+09:00

Dart Sass (@use, @forward 使用)で Bootstrap 4 の変数・マップを上書きしたくなったので実験してみました。

今まで (node-sass / LibSass)

前提

   /
  └ src/
    ├ html/
    │    └ index.html
    │
    └ scss/
       ├ assets/
       │  └ bootstrap/
       │    │    └ bootstrap/
       │    │         └ 略
       │    └ bootstrap.scss
       │
       ├ foundation/
       │    ├ _index.scss
       │    ├ _mixin.scss
       │    └ _variables.scss
       │
       ├ layout/
       │    ├ _l-footer.scss
       │    ├ _l-header.scss
       │    └ _l-main.scss
       │
       ├ object/
       │    ├ component/
       │    │    └ 略
       │    ├ project/
       │    │    └ 略
       │    └ utility/
       │         └ 略
       │
       └ index.scss

今回の検証で使用するプロジェクトのディレクトリ構造は、このような状態とします。

src/html/index.html


    プライマリーボタン
    メインボタン

例として、こんな HTML があったとして。

src/scss/foundation/_scss_variable.scss

$theme-colors: (
    /* 上書き */
    primary: $own-color,
    /* デフォルトにないカラーの追加 */
    main: $own-main-color,
);

マップの定義を上書きするコードを書きます。

src/scss/foundation/_index.scss

@import "variables"; //変数(Bootstrap の変数上書きのコードあり)
@import "mixin";
@import "../assets/bootstrap/bootstrap"; //bootstrap

同じ foundation の中に読み込み用の Scss を用意します。

注意する点としては、「 Bootstrap の Scss を読み込むより前に、 Bootstrap の変数(マップ)を上書きするための自前の定義が書かれた Scss を読み込む」ということ。

src/scss/index.scss

@import "./foundation/index"; //読み込み

最後に、実際に index.css にコンパイルされる src/scss/index.scss で src/scss/foundation/_index.scss を読み込みます。

今までは、これで変数の上書きができました。

Dart Sass での検証1 (失敗 / 単純に `@import` を `@use`, `@forward` に書き換え)

さて、ここで単純に今まで @import で記述していたのを @use, @forward に書き換えてみます。

src/scss/foundation/_scss_variable.scss

$theme-colors: (
    /* 上書き */
    primary: $own-color,
    /* デフォルトにないカラーの追加 */
    main: $own-main-color,
);

上書きしたい変数(マップ)の定義はそのまま。

src/scss/foundation/_index.scss

@forward "scss_variables"; //変数(Bootstrap の変数上書きのコードあり)
@forward "mixin";
@forward "../assets/bootstrap/bootstrap"; //bootstrap

今度は @import ではなく、 @forward に書き換えます。

src/scss/layout/_l-header.scss

@use "../foundation" as f;

.l-header {
    .navbar-brand {
        &,
        &:link,
        &:visited {
            color: f.$own-main-color;
        }
        &:hover,
        &:active,
        &:focus {
            color: f.$own-main-color_l;
        }
    }
}

// 略

実際に src/scss/foundation/_index.scss を読み込んで使用する Scss で @use による読み込みを行います。

src/scss/index.scss

@use "layout/l-header"; //_l-header.scss の中で @use を使って src/scss/foundation/_index.scss を読み込み、使用
@use "layout/l-main";
@use "layout/l-footer";

こんな形に書き換えます。

流れとしては、「src/scss/index.scss -(@use)-> src/scss/layout/_l-header.scss -(@forward)-> src/scss/foundation/_index.scss」という関係。

この状態で Dart Sass によるコンパイルを実行すると、$theme-colors の変数名が重複しているのでエラーになってしまいます。

Error: src/scss/foundation/_index.scss
Error: Two forwarded modules both define a variable named $theme-colors.
    ╷
3   │ @forward "variables";
    │ ━━━━━━━━━━━━━━━━━━━━ original @forward
... │
5   │ @forward "../assets/bootstrap/bootstrap"; //bootstrap
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new @forward
    ╵
  src/scss/foundation/_index.scss 5:1  @use
  src/scss/layout/_l-header.scss 3:1   @use
  src/scss/index.scss 8:1              root stylesheet

回避するためにはいくつかの方法が考えられますが、 Bootstrap 4 の @import を書き換えていくのは大変な上に既存ライブラリに手を入れるのはできれば避けたいので今回は不採用。

他の方法としては with を使う方法が考えられます。

ただし、これもいくつか工夫が必要です。

Dart Sass での検証2 (失敗 / `@foward` ～ `with`)

安直に with を使おうかと考えましたが、構文的に with は @use でしか使えません。

そのため、以下のような書き換えは不可です。

src/scss/foundation/_index.scss

@forward "../assets/bootstrap/bootstrap" with (
    /* with の中では use で読み込んだファイルのスコープは使えない */
    $theme-colors: (
        /* 上書き */
        primary: #333,
        /* デフォルトにないカラーの追加 */
        main: red,
    ),
); //bootstrap

Dart Sass での検証3 (失敗 / ファイルスコープ)

@use とセットで使うということが分かったので、今度は @use で読み込んでいる場所で with を付けたそうと思いました。

src/scss/layout/_l-header.scss

@use "../foundation" as f with (
    $theme-colors: (
        /* 上書き */
        primary: f.$own-color,
        /* デフォルトにないカラーの追加 */
        main: f.$own-main-color,
    ),
);

.l-header {
    .navbar-brand {
        &,
        &:link,
        &:visited {
            color: f.$own-main-color;
        }
        &:hover,
        &:active,
        &:focus {
            color: f.$own-main-color_l;
        }
    }
}

// 略

ただし、このような既述をすると以下のエラーが発生します。

Error: src/scss/layout/_l-header.scss
Error: There is no module with the namespace "f".
  ╷
7 │         primary: f.$own-color,
  │                  ^^^^^^^^^^^^^
  ╵
  src/scss/layout/_l-header.scss 7:18  @use
  src/scss/index.scss 8:1              root stylesheet

with の中では、その直前で既述した名前空間はまだ使えません。

「独自に定義したメインカラーでプライマリーカラーを上書きしたい」というケースが多いと思われるので、 with で上書きするときにメインカラーが変数で指定できないのは困ります。

そこで、独自定義の変数読み込みと Bootstrap 4 の読み込み部分を分けることにしました。

最終形

ディレクトリ構造

   /
  └ src/
    ├ html/
    │    └ index.html
    │
    └ scss/
       ├ assets/
       │  └ bootstrap/
       │    │    └ bootstrap/
       │    │         └ 略
       │    └ bootstrap.scss
       │
       ├ foundation/
       │    ├ _index.scss
       │    ├ _mixin.scss
       │    └ _variables.scss
       │
       ├ global/
       │    └ _index.scss      # 追加
       │
       ├ layout/
       │    ├ _l-footer.scss
       │    ├ _l-header.scss
       │    └ _l-main.scss
       │
       ├ object/
       │    ├ component/
       │    │    └ 略
       │    ├ project/
       │    │    └ 略
       │    └ utility/
       │         └ 略
       │
       └ index.scss

src/scss/foundation/_scss_variable.scss

先程まであった上書き用のコードは削除。

src/scss/foundation/_index.scss

@forward "variables";
@forward "mixin";

Bootstrap 4 を読み込む @forward を削除。

src/scss/global/_index.scss

@forward "../assets/bootstrap/bootstrap"; //bootstrap

Bootstrap 4 を読み込む部分を切り出したのを、 src/scss/global/_index.scss とします。

src/scss/layout/_l-header.scss

@use "../foundation" as f;
@use "../global" as g with (
    $theme-colors: (
        /* 上書き */
        primary: f.$own-color,
        /* デフォルトにないカラーの追加 */
        main: f.$own-main-color,
    ),
);

.l-header {
    .navbar-brand {
        &,
        &:link,
        &:visited {
            color: f.$own-main-color;
        }
        &:hover,
        &:active,
        &:focus {
            color: f.$own-main-color_l;
        }
    }
}

// 略

実際に使う部分。変数は foundation, Bootstrap 4 は global で読み込み、 foundation を先に読み込むことで、 with の中で使用できるようにしました。

src/scss/index.scss

@use "layout/l-header";
@use "layout/l-main";
@use "layout/l-footer";

index.css になる部分は読み込みだけ。

この形にすることでようやく当初意図していた形にすることができました。

備考1

今回の方法では Bootstrap 4 の中身は一切触れない方向で実装しました。そのため、 Bootstrap 4 の中は以前として @import で読み込まれており、変数はグローバルスコープに定義されるようです。

そのため、今回は src/scss/layout/_l-header.scss でしか with を使用していませんが……

デフォルト状態ではこのような状態になります(プライマリーカラーがデフォルト、右側はデフォルト状態では存在しない btn-main クラスが付与されているため背景色なし)。

src/scss/layout/_l-header.scss に with を適用しただけで、メイン部分のボタンも影響を受けます。今回の場合は「全体で色を変更したい」のでこれで良いのですが、 @use や @forward の位置付けからすると役割を発揮できていない状態なので微妙なところ。

今後、 Bootstrap が @use, @forward に変更した場合にこの辺りの挙動は変わると思われます。

※ちなみに、v5.0.0-alpha3 でもまだ @import でした。

備考2

備考1と関連しますが、グローバルスコープに定義されるということは……

src/scss/layout/_l-header.scss

@use "../foundation" as f;
@use "../global" as g;

.l-header {
    .navbar-brand {
        &,
        &:link,
        &:visited {
            color: f.$own-main-color;
        }
        &:hover,
        &:active,
        &:focus {
            color: f.$own-main-color_l;
        }
    }
}

// 略

src/scss/layout/_l-header.scss は普通に src/scss/global/_index.scss を読み込み……

src/scss/layout/_l-main.scss

@use "../foundation" as f;
@use "../global" as g with (
    $theme-colors: (
        /* 上書き */
        primary: f.$own-color,
        /* デフォルトにないカラーの追加 */
        main: f.$own-main-color,
    ),
);

.l-main {
    background-color: f.$own-bg-color;
    color: f.$own-color;
    .btn-main {
        color: f.$own-color;
    }
}

// 略

src/scss/layout/_l-header.scss の後に読み込まれる src/scss/layout/_l-main.scss で with を使用した場合、以下のエラーが発生します。一度読み込んだモジュールが with 使用で再度読み込まれている、という旨のエラーですね。

Error: This module was already loaded, so it can't be configured using "with".
  ┌──> src/scss/layout/_l-main.scss
4 │ ┌ @use "../global" as g with (
5 │ │     $theme-colors: (
6 │ │         /* 上書き */
7 │ │         primary: f.$own-color,
8 │ │         /* デフォルトにないカラーの追加 */
9 │ │         main: f.$own-main-color,
10│ │     ),
11│ │ );
  │ └─^ new load
  ╵
  ┌──> src/scss/layout/_l-header.scss
4 │   @use "../global" as g;
  │   ━━━━━━━━━━━━━━━━━━━━━ original load
  ╵
  src/scss/layout/_l-main.scss 4:1  @use
  src/scss/index.scss 9:1           root stylesheet

Error: src/scss/layout/_l-main.scss
Error: This module was already loaded, so it can't be configured using "with".
  ┌──> src/scss/layout/_l-main.scss
4 │ ┌ @use "../global" as g with (
5 │ │     $theme-colors: (
6 │ │         /* 上書き */
7 │ │         primary: f.$own-color,
8 │ │         /* デフォルトにないカラーの追加 */
9 │ │         main: f.$own-main-color,
10│ │     ),
11│ │ );
  │ └─^ new load
  ╵
  ┌──> src/scss/layout/_l-header.scss
4 │   @use "../global" as g;
  │   ━━━━━━━━━━━━━━━━━━━━━ original load
  ╵
  src/scss/layout/_l-main.scss 4:1  @use
  src/scss/index.scss 9:1           root stylesheet

そのため、 with を使用するならば全体を通して src/scss/global/_index.scss が最初に @use で読み込まれる部分に既述する必要があります。

以上、知らないと全体的に嵌まり所が多い感じだったのでメモしておきます。

参考

with

今までのやり方 (参考)

Bootstrap4のテーマをカスタマイズする３つの簡単な方法 | ホムペディア

Bootstrap (v5.0.0-alpha3)

twbs/bootstrap at v5.0.0-alpha3

Next.jsでBootstrapのSticky Footerを利用する

2020-11-27T23:04:34+09:00

BootstrapにはSticky Footerのデモがあります。

https://v5.getbootstrap.jp/docs/5.0/examples/sticky-footer/

昔はCSSを使っていましたが、現在はBootstrapのユーティリティを利用してクラス指定だけで実現しています。そのため適切にクラスを指定していけばよいだけなのですが、Next.jsのようなフレームワークの場合は各HTMLタグがデフォルトでは編集できなかったり、配置が決まっていたりするためなかなか思うように行きません。

実際に対応した方法を書いておきます。

_document.jsを作成する

まずは全体のHTMLを編集するための _document.js というファイルを作ります。TypeScriptの場合は _document.tsx です。_app.js と同様、pagesの直下に配置します。

中身は公式で解説しているとおりです。

Advanced Features: Custom Document | Next.js

次にどんどんクラスを指定していきます。まずはhtmlとbodyタグに高さ100%のクラス h-100 を指定します。 _document.js 内です。

次にフッター以外のメインコンテンツを下記のタグで囲みます。ここからは _document.js ではなく各ページもしくは共通レイアウトに設定します。

      
        メインコンテンツ

そしてその下にSticky Footerを配置します。


  
    フッターのコンテンツをここに置きます。

Next.js用の対応

これで一通りBootstrapのデモと同じ設定は完了です。しかし、Next.jsの場合は下記のように __next というidのdivが全体を囲んでしまっています。そのためデモと同様にbodyに d-flex flex-column を指定しても全てそのdivに反映されてしまい、メインコンテンツとフッターが正常に動作しません。そのためbodyは h-100 だけにしていました。

そのため、ここだけはCSSで指定してあげます。

#__next {
  display: flex;
  flex-direction: column;
  height: 100%;
}

自動挿入されている要素ですのでidなど、仕様が変わったら適宜調整が必要です。

react-autosuggestをBootstrapで使う

2020-10-09T21:07:03+09:00

react-autosuggestはReactでオートコンプリートを実装できるライブラリ。しかしこれはデザインがない。自分で作るか、多分デモのやつを使う必要があるが、Bootstrapを使っている場合はそれのDropdownをそのまま使いたい。

その場合はthemeプロパティで使うクラスを指定できる。下記のように設定すればOKっぽい

      {{
          container: 'autosuggest',
          input: 'form-control',
          suggestionsContainer: 'dropdown open',
          suggestionsList: `dropdown-menu ${items.length ? 'show' : ''}`,
          suggestion: '',
          suggestionFocused: 'active'
        }}

あとはrenderSuggestionsも調整。

const renderItem = (item: Item) => (
  
    {item.name}
  
)

下記で話題に上がっている（最初の方に古くてちゃんと動かないのもあるのでご注意）。

https://github.com/moroshko/react-autosuggest/issues/64

CSSフレームワークのブレイクポイントを比べて(Bluma, Vuetify, Element, Bootstrap, etc..)

2019-08-27T18:28:49+09:00

いま開発している積読用の読書管理アプリでは、CSSフレームワークにBlumaを使ってる。
昔は、VuetifyやBootstrapを使っていたけど、ブレイクポイントが違っているのでまとめてみた(´ω｀)

ブレイクポイントのまとめ

	xs	sm	md	lg	xl
Bluma	< 769	< 1024	< 1216	< 1408	1408
Bootstrap	< 576	< 767	< 992	< 1200	1200
MaterialDesign	< 600	< 1024	< 1440	< 1920	1920
Vuetify	< 600	< 960	< 1264	< 1904	1904
Material-UI	< 600	< 960	< 1280	< 1920	1920
Element	< 768	< 992	< 1200	< 1920	1920
TwilwindCSS	< 640	< 768	< 1024	< 1280	1280

だいたい5段階になってるっぽい。上限や下限がそれぞれ違うのがおもしろい(´ω｀)
ちなみに単位はpx。収まらなかったので省略...

調べたのはこの7つ

Bluma ... Responsiveness | Bulma
Bootstrap ... Overview · Bootstrap
Material Design ... Responsive layout grid - Material Design
Vuetify ... Breakpoints — Vuetify.js
Material-UI ... Breakpoints - Material-UI
Element ... Component | Element
Twilwind CSS ... Breakpoints - Tailwind CSS

Material DesingはCSSフレームワークではないけど参考として。

Bluma

参照元: Responsiveness | Bulma: Free, open source, & modern CSS framework based on Flexbox

まずは使っているBluma。
Bluma独特なのが、コードがxsなどではなく、デバイスの種類になっている点。
classに書くときもわかりやすい。が、全体的に狭い範囲で細かい切り替えになっているよう。

コード	説明	範囲
mobile	Mobile	< 769px
tablet	Tablet	< 1024px
desktop	Desktop	< 1216px
widescreen	Widescreen	< 1408px
fullhd	FullHD	1408px

// Extra Small (phones)

// Small devices (tabletS)
@media (min-width: 770px) { ... }

// Medium devices (desktops)
@media (min-width: 1024px) { ... }

// Large devices (widescreen desktops)
@media (min-width: 1216px) { ... }

// Extra large devices (fullhd desktops)
@media (min-width: 1408px) { ... }

Bootstrap

参照元: Overview · Bootstrap

xsのブレイクポイントが一番小さいのが印象的。

コード	説明	範囲
xs	portrait phones	< 576px
sm	landscape phones	< 767px
md	tablets	< 992px
lg	desktops	< 1200px
xl	large desktops	1200px

// Extra Small (portrait phones)

// Small devices (landscape phones)
@media (min-width: 576px) { ... }

// Medium devices (tablets)
@media (min-width: 768px) { ... }

// Large devices (desktops)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops)
@media (min-width: 1200px) { ... }

Material Design

参照元: Responsive layout grid - Material Design

ホントの分類はこんな感じ。
縦向き・横向きでそれぞれ決められているので、かなり細かい。

コード	説明	範囲
xsmall	Portrait: small handset	< 360px
xsmall	Portrait: medium handset	< 400px
xsmall	Portrait: large handset	< 480px
xsmall	Portrait: large handsetLandscape: small handset	< 600px
small	Portrait: small tabletLandscape: medium handset	< 720px
small	Portrait: large tabletLandscape: large handset	< 840px
small	Portrait: large tabletLandscape: large handset	< 960px
small	Landscape: small tablet	< 1024px
medium	Landscape: large tablet	< 1280px
medium	Landscape: large tablet	< 1440px
large		< 1600px
large		< 1920px
xlarge		1920px

// Extra Small (phones)


// Small devices (portrait tablets)
@media (min-width: 600px) { ... }

// Medium devices (landscape tablets)
@media (min-width: 1024px) { ... }

// Large devices (laptops)
@media (min-width: 1440px) { ... }

// Extra large devices (desktops)
@media (min-width: 1920px) { ... }

Vuetify

参照元: Breakpoints — Vuetify.js

Material Designを実現するためのCSSフレームワークなので、
Material Designと区分けが近いが、少し異なるので注意が必要かも?

コード	説明	範囲
xs	small to large handset	< 600px
sm	small to medium tablet	< 960px
md	large tablet to laptop	< 1264px
lg	desktop	< 1904px
xl	4k and ultra-wides	1904px

// Extra Small (small to large handset)


// Small devices (small to medium tablet)
@media (min-width: 600px) { ... }

// Medium devices (large tablet to laptop)
@media (min-width: 960px) { ... }

// Large devices (desktop)
@media (min-width: 1264px) { ... }

// Extra large devices (4k and ultra-wides)
@media (min-width: 1904px) { ... }

Material-UI

参照元: Breakpoints - Material-UI

こちらもMaterial Designを実現するためのCSSフレームワーク。
ドキュメントには詳しい説明がないが、「Material DesignのSpecをsimplifiedしたぜ」とのこと。

コード	説明	範囲
xs	extra-small	< 600px
sm	small	< 960px
md	medium	< 1280px
lg	large	< 1920px
xl	extra-large	1920px

// Extra Small


// Small devices
@media (min-width: 600px) { ... }

// Medium devices
@media (min-width: 960px) { ... }

// Large devices
@media (min-width: 1280px) { ... }

// Extra large devices
@media (min-width: 1920px) { ... }

Element UI

参照元: Component | Element

こちらもMaterial-UIと同様に、あまり説明はない。
smやmdの値が少し独自な感じ。

コード	説明	範囲
xs	extra small viewports	< 768px
sm	small viewports	< 992px
md	medium viewports	< 1200px
lg	large viewports	< 1920px
xl	extra large viewports	1920px

// Extra Small


// Small devices
@media (min-width: 768px) { ... }

// Medium devices
@media (min-width: 992px) { ... }

// Large devices
@media (min-width: 1200px) { ... }

// Extra large devices
@media (min-width: 1920px) { ... }

Tailwind CSS

参照元: Breakpoints - Tailwind CSS

他と比べ、全体的に低めな値が印象的。

コード	説明	範囲
xs	phones	< 640px
sm	tablet	< 768px
md		< 1024px
lg	laptop	< 1280px
xl	desktop	1280px

// Extra Small


// Small devices
@media (min-width: 640px) { ... }

// Medium devices
@media (min-width: 768px) { ... }

// Large devices
@media (min-width: 1024px) { ... }

// Extra large devices
@media (min-width: 1280px) { ... }

おわりに

いろんなフレームワークを横串で見ていくといろいろおもしろい。
個別の対応をどこまで考えないといけないかなども見えてくるかも。
実際にBlumaを使ってるけど、xs以下のサイズは、個別でブレイクポイントを設定したりなども。

新しいものを使うときはいろいろ見ないといけない(´ω｀)

こんなのつくってます。

最近、積読用の読書管理アプリ「積読ハウマッチ」をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!
CSSフレームワークにBlumaを使ってます(´ω｀)

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで。

Laravelのページネーションをレスポンシブ対応する

2019-05-01T23:44:03+09:00

Laravelではクエリ実行時にgetじゃなくてpaginateメソッドを呼んでデータを取得することで、テンプレート側で$posts->links()とするだけでBootstrap4のページネーションのリンク一覧を表示することができる。

便利ではあるのだが、ページ数が増えると非常に横長になり、スマホ表示の場合は画面からはみ出しておかしくなってしまう。

この対処として、Laravel5.7から

{{ $users->onEachSide(5)->links() }}

のようにすることで表示するページ番号数を調整することができるようになった。これは良いと思って試してみたのだが、最小の１にしてもたいして減らず、相変わらず画面からはみ出してしまう。このためだけに頑張って5.6から5.8に上げたのにもかかわらずだ。

レスポンシブ対応

仕方がないのでレスポンシブ対応することにした。具体的には公式マニュアルに書いてあるように

php artisan vendor:publish --tag=laravel-pagination

としてテンプレートをアプリケーション側に吐き出し、それを修正することで表示を調整することができるようになっている。なのでページ番号と「…」のところのspanとaタグのクラスにd-none d-md-blockを追加することで、スマホ表示の場合は前のページと次のページへのリンクだけを表示するようにすることで対処した。

まあ、本来はCSS書いた方がスマートな気がするけど。

「Bootstrap」の記事 - Crieit

脱jQuery メモ

Bootstrap 5 の変数やマップを上書きする

Honoka を node_modules 内で使用する

src/scss/global/framework.scss

モーダルの中で Slick を動かす場合の諸注意(setPotion指定、 Uncaught TypeError: Cannot read property 'add' of null エラー回避のために slick-initialized クラスの確認、 unslick 指定)

Dart Sass (@use, @forward 使用)で Bootstrap 4 の変数やマップを上書きする

Dart Sass での検証1 (失敗 / 単純に @import を @use, @forward に書き換え)

Dart Sass での検証2 (失敗 / @foward ～ with)

Next.jsでBootstrapのSticky Footerを利用する

react-autosuggestをBootstrapで使う

CSSフレームワークのブレイクポイントを比べて(Bluma, Vuetify, Element, Bootstrap, etc..)

Laravelのページネーションをレスポンシブ対応する

Dart Sass での検証1 (失敗 / 単純に `@import` を `@use`, `@forward` に書き換え)

Dart Sass での検証2 (失敗 / `@foward` ～ `with`)