Bootstrap - スピンナー

ウェブ開発者の卵の皆さん、こんにちは！今日は、Bootstrapのスピンナーの楽しい世界に飛び込みます。あなたの近所の親切なコンピュータの先生として、私はこの旅をステップバイステップでガイドします。お気に入りの飲み物を手に取り、リラックスして、このチュートリアルを一緒にスピンしていきましょう！

仕組み

Bootstrapのスピンナーは、ウェブアプリケーション内でローディング状態を示すために使用されます。これらは、ウェブサイトがコンテンツをロードしているときに見かける小さな回転する円と同じです。これらの便利なコンポーネントは、背後で何かが起こっているという視覚的なフィードバックを提供することで、ユーザーエクスペリエンスを向上させます。

Bootstrapのスピンナーは、HTML、CSS、そして少しのJavaScriptの魔法で構築されています。カスタムCSSを使用して回転アニメーションを作成し、異なるブラウザやデバイス間でスムーズで一貫した外観を確保します。

ボーダースピンナー

まず最基本的なスピンナー、ボーダースピンナーから始めましょう。これはBootstrapのデフォルトのスピンナースタイルです。

<div class="spinner-border" role="status">
<span class="visually-hidden">ロード中...</span>
</div>

この例では、div要素に2つのクラスがあります：spinner-borderとrole="status"。spinner-borderクラスは回転アニメーションを適用し、role="status"はスクリーンリーダーがこれがステータスインジケータであることを理解するのを助けます。

divの中には、span要素がvisually-hiddenクラスを持っています。このテキストは画面上では見えませんが、スクリーンリーダーによって読み取ることができ、視覚障害のあるユーザーのアクセシビリティを向上させます。

カラー

カメレオンが色を変えるように、私たちのスピンナーもさまざまなテーマに対応できます！Bootstrapを使用して、スピンナーの色をテキストカラーユーティリティでカスタマイズできます。

<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">ロード中...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">ロード中...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">ロード中...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">ロード中...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">ロード中...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">ロード中...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">ロード中...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">ロード中...</span>
</div>

この例の各スピンナーには、text-primary、text-secondaryなどの追加クラスがあります。これらのクラスは、Bootstrapのカラースキームに合わせてスピンナーの色を変更します。

グローイングスピンナー

ボーダースピンナーが好みでない場合は、Bootstrapは別の味、グローイングスピンナーを提供しています。このスピンナーは拡大と縮小を繰り返します。

<div class="spinner-grow" role="status">
<span class="visually-hidden">ロード中...</span>
</div>

この構造はボーダースピンナーと似ていますが、spinner-growクラスを使用しています。

アラインメント

スピンナーのアラインメントは、Bootstrapのflexboxユーティリティで簡単にできます。いくつかの例を見てみましょう：

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">ロード中...</span>
</div>
</div>

<div class="d-flex align-items-center">
<strong>ロード中...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

最初の例では、justify-content-centerを使用してスピンナーを水平方向に中央に配置します。2番目の例では、テキストと一緒にスピンナーを垂直方向にアラインメントします。

マージン

スピンナーの周りにスペースが必要な場合は、Bootstrapのマージンユーティリティが助けます！

<div class="spinner-border m-5" role="status">
<span class="visually-hidden">ロード中...</span>
</div>

m-5クラスは、スピンナーのすべての側に3remのマージンを追加します。

プレースメント

スピンナーはさまざまな他の要素内に配置できます。以下に、スピンナーをボタン内に配置する方法を示します：

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">ロード中...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
ロード中...
</button>

これらの例では、ボタン内にボーダースピンナーとグローイングスピンナーを組み込み、小さなサイズにしています。

フレックス

Flexboxユーティリティを使用して、スピンナーでより複雑なレイアウトを作成できます：

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">ロード中...</span>
</div>
</div>

これは、スピンナーを水平方向に中央に配置します。

フロート

スピンナーを浮かせたいときは、Bootstrapの浮動ユーティリティが助けます：

<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">ロード中...</span>
</div>
</div>

float-endクラスは、スピンナーをコンテナの右側に浮かせます。

テキストアラインメント

テキストアラインメントユーティリティもスピンナーと一緒に使用できます：

<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">ロード中...</span>
</div>
</div>

これは、スピンナーをテキストアラインメントで中央に配置します。

サイズ

時にはサイズが重要です！スピンナーのサイズをBootstrapのサイズクラスで調整できます：

<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">ロード中...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">ロード中...</span>
</div>

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">ロード中...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">ロード中...</span>
</div>

spinner-border-smまたはspinner-grow-smを使用して小さなスピンナーを作成します。カスタムサイズが必要な場合は、インラインスタイルで特定のサイズを設定します。

ボタン

最後に、ボタン内でスピンナーを使用する方法を見てみましょう：

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">ロード中...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
ロード中...
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">ロード中...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
ロード中...
</button>

これらの例では、ボタン内にボーダースピンナーとグローイングスピンナーを組み込み、小さなサイズにしています。

そして、ここまでで、皆さんはBootstrapのスピンナーのエキスパートになりました。実践が完璧を生むことを忘れずに、これらのコンポーネントをあなたのプロジェクトで実験してみてください。ハッピーコーディング、そしてあなたのウェブページが常にスタイル良くスピンすることを願っています！

Credits: Image by storyset