【Bootstrap5】実践！クイズ問題の形を作ってみた

今回はWeb初心者が、Bootstrapを用いてクイズ問題の型を作ったので、ご紹介したいと思います。

Bootstrapについては、別の記事をご参照ください。

完成図
1. HTML
解説

完成図

HTML

<h3 class="text-center mt-2">
            クイズ問題に挑戦
<small class="text-body-secondary text-center">簡単バージョン</small>
</h3>

<p></p>

   <div class="alert alert-danger mx-auto text-center w-50 fs-3" role="alert">
                 question
   </div>
            
   <div class="text-center">
         <button type="button" class="btn btn-danger me-3 bd-highlight d-inline-block">・・・</button>
         <button type="button" class="btn btn-danger me-3 bd-highlight d-inline-block">・・・</button>
         <button type="button" class="btn btn-danger me-3 bd-highlight d-inline-block">・・・</button>
         <button type="button" class="btn btn-danger">・・・</button>
   </div>

解説

<h3 class="text-center mt-2">

これはテキストを中央揃え、上部マージンを0.5remあけました。

mt-1　は　0.25rem
mt-3　は　1rem
mt-4　は　1.5rem
mt-5　は　3rem

ここでの基準は、1rem = 16pxです。

<h3 class="text-center mt-2">
            クイズ問題に挑戦
<small class="text-body-secondary text-center">簡単バージョン</small>
</h3>

見出しのアレンジとして、small class=”text-body-secondary で、<h3>に小さな副見出しテキストを追加しました。

<div class="alert alert-danger mx-auto text-center w-50 fs-3" role="alert">
                 question
</div>

Bootstrapにあるアラートをつかって、質問文をわかりやすく表示します。
「alert-danger」は赤のアラートを指します。

「mx-auto」は、このアラートを中央揃えにしています。

「w-50」これは、幅50％を表します。

「fs-3」は、文字の大きさです。

 <div class="text-center">
         <button type="button" class="btn btn-danger me-3 bd-highlight d-inline-block">・・・</button>
         <button type="button" class="btn btn-danger me-3 bd-highlight d-inline-block">・・・</button>
         <button type="button" class="btn btn-danger me-3 bd-highlight d-inline-block">・・・</button>
         <button type="button" class="btn btn-danger">・・・</button>
   </div>

<div class=”text-center”>は、ボタンすべてを中心にそろえるようにしています。

<button type=”button” class=”btn btn-danger me-3 bd-highlight d-inline-block”>・・・</button>
これはBootstrap のボタン機能を使用しています。