まず、Bootstrap 5のCDNリンクをHTMLファイルに追加します。以下の例を参考にしてください。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Radio Group</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<!-- ラジオグループのコンテンツをここに追加します -->
</body>
</html>次に、ラジオグループを作成するためのHTMLコードを追加します。以下の例を参考にしてください。
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radio1" value="option1" checked>
<label class="form-check-label" for="radio1">
オプション1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radio2" value="option2">
<label class="form-check-label" for="radio2">
オプション2
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radio3" value="option3">
<label class="form-check-label" for="radio3">
オプション3
</label>
</div>上記のコードでは、form-checkクラスを使用してラジオボタンをグループ化し、それぞれのラジオボタンには同じname属性を設定しています。また、デフォルトで選択されるラジオボタンにはchecked属性を追加しています。
最後に、必要に応じてCSSスタイルを追加することができます。たとえば、ラジオグループの配置やスタイルをカスタマイズする場合は、独自のスタイルシートを作成して適用することができます。
以上がBootstrap 5でラジオグループを作成する基本的な方法です。このコード例を参考にして、自分のプロジェクトに適したラジオグループを作成してみてください。
このブログ投稿では、Bootstrap 5のラジオグループの作成方法について詳しく解説しました。コード例を提供し、基本的な手順を示しました。これにより、読者は簡単にラジオグループを作成し、プロジェクトに組み込むことができるでしょう。
タグは、Bootstrap 5、ラジオグループ、コード例、チュートリアルなどが適切なものです。これにより、読者が関連する情報を見つけやすくなります。