こんにちわ!!
さてと,,
早速、今回の本題をみていければと思います。
Bootstrapの活用法 : バッチの作成
※ HTMLファイルは、各自準備お願い致します。
これから紹介させて頂くコードに関しましては、
基本的にbodyタグ内に記述するものになります。
【コード】
<span>[通知バッチ]</span><br> <button type="button" class="btn badge-danger"> 通知が届いています。 <span class="badge badge-light">3</span> </button> </span>
■ 以下はBootstrap経由で使用
[ class = btn ] → ボタンを作成する上で必要なCSS
[ class = badge-danger ] → 色の指定 : 赤
[ class = badge-light ] → 色の指定 : 白
↓
【実行結果】
【コード】
<!-- バッチの外観の変更 --> <!-- badge-○○は色の指定 --> <span>[バッチの外観の変更]</span><br> <span class="badge badge-primary">青</span> <span class="badge badge-secondary">ねずみ色</span> <span class="badge badge-success">緑</span> <span class="badge badge-danger">赤</span> <span class="badge badge-warning">黄土色</span> <span class="badge badge-info">水色</span> <span class="badge badge-light">白</span> <span class="badge badge-dark">黒</span>
■ 以下はBootstrap経由で使用
[ class = badge ]
→ バッチを作成する上で必要なCSSが準備されている。
※ それぞれの色の違いについては上記のコードを確認してください。
↓
[ 実行結果 ]
【コード】
<!-- バッチの外観の変更 : 角丸(badge-pill) --> <span>[バッチの外観の変更 : 角丸(badge-pill)]</span><br> <span class="badge badge-pill badge-primary">青</span> <span class="badge badge-pill badge-secondary">ねずみ色</span> <span class="badge badge-pill badge-success">緑</span> <span class="badge badge-pill badge-danger">赤</span> <span class="badge badge-pill badge-warning">黄土色</span> <span class="badge badge-pill badge-info">水色</span> <span class="badge badge-pill badge-light">白</span> <span class="badge badge-pill badge-dark">黒</span>
■ 以下はBootstrap経由で使用
badge及び色に関しては、これまでと意味は、同様です。
[ class = badge-pill ]
→ 角丸にするためのCSSが含まれている
↓
【実行結果】
【コード】
<!-- バッチにリンクを貼る --> <span>[バッチにリンクを貼る]</span><br> <a href="https://getbootstrap.com/" class="badge badge-primary">Bootstrap</a> <a href="https://www.softbank.jp/" class="badge badge-secondary">Softbank</a> <a href="https://www.google.com/" class="badge badge-success">Google</a> <a href="https://www.au.com/" class="badge badge-danger">au</a> <a href="https://www.amazon.co.jp/" class="badge badge-warning">Amazon</a> <a href="https://www.facebook.com/" class="badge badge-info">Facebook</a> <a href="https://twitter.com/" class="badge badge-light">Twitter<a> <a href="https://github.com/" class="badge badge-dark">Github</a>
Bootstrap経由で使用しているCSSを受け取るclassは、二番目の際と同様でありますが、違いといえばspanタグではなく、リンクを表すために使用されるaタグを利用している点になりますね。
そのため、それぞれのバッチをクリックするとリンクで設定しているサイトへ飛びます。
↓
【実行結果】
今回は試しにGoogleのサイトへ飛べるか見てみましょう。
↓
皆さんは無事にGoogleのサイトへ飛べましたか??
もし、辿りつけなかった場合は、コードをもう一度見直してみましょう!!
スペルの誤りなど細かい点で間違っている可能性があります。
ここまで4つ程、Bootstrapを活用したバッチの作成方法について紹介させて頂きましたが、如何でしたでしょうか??
決して難易度が高いものでは御座いませんが、他のタグとどのように結びつけるべきか…などを含め、様々な疑問が発生すると思います。
そのような問題点や不明点なども遠慮なく、コメント欄から質問して頂ければお答えしますので気軽に相談してくださいね♪
では、本日はここまでとします!!
最後まで見て頂き、有難う御座いました。
入会申込
ログイン
