Bootstrap - フローティングラベル：初心者向けの包括ガイド

こんにちは、ウェブ開発者の卵さんたち！今日は、Bootstrapのフローティングラベルの素晴らしい世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、この旅を案内するのがとても楽しみです。プログラミングが初めての方も安心してください。ステップバイステップで進め、すぐにプロのようにフローティングラベルを使えるようになるでしょう！

Bootstrap - Floating Labels

フローティングラベルとは？

まず、フローティングラベルとは何かを理解しましょう。フォームに記入していると、各入力フィールドのラベルが魔法のように上に浮かび上がることを想像してみてください。それがフローティングラベルの本質です！これにより、クリーンで直感的なユーザーインターフェースが提供され、スペースを節約しながらも非常に cool な見た目になります。

基本的な例

まずは基本的な例で手を濡らしましょう：

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">メールアドレス</label>
</div>

ここで何が起きているのでしょうか？以下に分解します：

我々は入力とラベルを div にラッピングし、クラス form-floating を追加します。
input が label よりも前に配置されています（この順序は重要です！）。
我々は入力フィールドに placeholder を追加し、Bootstrapがラベルのサイズを決定するために使用します。

入力フィールドにフォーカスを当てるか、入力を開始すると、ラベルが優雅に上に浮かび上がります。まるで魔法のようですが、这只是巧妙なCSSです！

テキストエリア

フローティングラベルは単純な入力フィールドだけでなく、テキストエリアにも対応しています：

<div class="form-floating">
<textarea class="form-control" placeholder="ここにコメントを残してください" id="floatingTextarea"></textarea>
<label for="floatingTextarea">コメント</label>
</div>

これは基本的な例と同じように動作しますが、textarea を使用しています。ユーザーが長いテキストを入力する必要がある場合に最適です！

ドロップダウンメニュー

ドロップダウンメニューはどうでしょうか？Bootstrapはあなたをサポートします：

<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="フローティングラベル選択例">
<option selected>この選択メニューを開く</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>
<label for="floatingSelect">ドロップダウンメニューに対応</label>
</div>

選択肢が選択されると、フローティングラベルが表示されます。異なる入力タイプ間で一貫したフォームの見た目を保つのに最適です。

无効化

時折、入力を無効にする必要があります。以下は、無効な入力でもフローティングラベルを保持する方法です：

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInputDisabled" placeholder="[email protected]" disabled>
<label for="floatingInputDisabled">メールアドレス（無効）</label>
</div>

入力フィールドに disabled 属性を追加するだけで、Bootstrapが適切なスタイルを適用します。

読取専用のプレーンテキスト

変更不可の情報を表示したい場合は、読取専用のプレーンテキストを使用します：

<div class="form-floating mb-3">
<input type="email" class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]" readonly>
<label for="floatingEmptyPlaintextInput">空の入力</label>
</div>

これにより、編集不可のフィールドがフローティングラベルのスタイルを引き継ぎます。

インプットグループ

フローティングラベルはインプットグループでも使用できます。より複雑なフォームレイアウトに対応します：

<div class="input-group mb-3">
<span class="input-group-text">$</span>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInputGroup1" placeholder="ユーザー名">
<label for="floatingInputGroup1">金額</label>
</div>
</div>

この例では、インプットグループ（ドル記号のプレフィックス）とフローティングラベル入力を組み合わせています。

レイアウト

最後に、フローティングラベル入力を応答型グリッドにどのように配置するかを見てみましょう：

<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]">
<label for="floatingInputGrid">メールアドレス</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid">
<option selected>この選択メニューを開く</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>
<label for="floatingSelectGrid">ドロップダウンメニューに対応</label>
</div>
</div>
</div>

これにより、2列のレイアウトが作成され、小さな画面では垂直にスタックされます。

すべてを組み合わせる

これまでのさまざまな要素をすべて組み合わせて、小さなフォームを作成してみましょう：

<form class="container mt-5">
<h2>お問い合わせください</h2>
<div class="row g-3">
<div class="col-md-6">
<div class="form-floating">
<input type="text" class="form-control" id="floatingName" placeholder="山田 太郎">
<label for="floatingName">氏名</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating">
<input type="email" class="form-control" id="floatingEmail" placeholder="[email protected]">
<label for="floatingEmail">メールアドレス</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<select class="form-select" id="floatingSelect">
<option selected>件名を選択してください</option>
<option value="1">一般質問</option>
<option value="2">技術サポート</option>
<option value="3">フィードバック</option>
</select>
<label for="floatingSelect">件名</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<textarea class="form-control" placeholder="ここにコメントを残してください" id="floatingTextarea" style="height: 100px"></textarea>
<label for="floatingTextarea">コメント</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">送信</button>
</div>
</div>
</form>

このフォームは、私たちが議論してきたすべての要素を組み合わせています：入力、選択肢、テキストエリア、すべてにフローティングラベルを使用し、応答型グリッドレイアウトで配置されています。

結論

そして、ここまでがBootstrapのフローティングラベルのすべてです！基本的な入力から複雑なレイアウトまで、あなたはユーザーを感動させるクールでユーザーフレンドリーなフォームを作成するためのツールを手に入れました。

練習は完璧を生みます。これらの例を試してみて、さまざまな要素を組み合わせて、何が作れるかを探ってください。すぐに、あなたもプロのようにフローティングラベルを使えるようになるでしょう！

お楽しみください、そして、あなたのラベルが常に優雅に浮かび上がることを祈っています！

Credits: Image by storyset