Bootstrapで枠線（border）を作成する方法を解説！
この記事では、Bootstrapで枠線(border)を作成する方法について解説します。基本的な枠線の作成方法だけでなく、様々なスタイルの枠線を作る方法も紹介します。Bootstrapを使用したサンプルコードも載せているので是非参考にしてください。
Bootstrapで枠線（border）を作成する方法
枠線(border)を追加する
Bootstrapでは、borderというクラスを使用すると囲み枠(ボックス)をつけることができます。このクラスには罫線の太さ（1px）、種類（solid）、色（$gray-300）の設定が予め組み込まれていて、このスタイルの枠線が描かれます。
その他にも、四方のうち一つの辺だけに線を引く事もできます。
この場合は、border-{方向}というクラスを使用します。「方向」の部分にはtop,bottom,right,leftの４つの方向を指定することができます。
例えば、下線を引きたい場合にはborder-bottomというクラスを使用します。
また、これを組み合わせて上下に枠線をつける、などの使い方もできます。
枠線(border)を削除する
次に、枠線を削除するクラスを紹介します。
枠線を削除するには、{削除したい枠線を描いているクラス名}-0というクラスを使用します。{削除したい枠線を描いているクラス名}というのは、一つ前で紹介したborder-topなどのクラス名のことです。
例えば、上の枠線を削除したい場合にはborder-top-0というクラスを使用すればよいです。
Bootstrapで様々なスタイルの枠線を作成する方法
色を変える
Bootstrapでは、枠線の色も簡単に指定できます。
枠線の色を指定するには、border-{color}というクラスを使用します。
枠線を作成するクラスと一緒にこのクラスを使用すると、枠線の色を変更することができます。{color}の部分には、指定したい色に合わせて適切な文字列を使用します。
点線などに変える
Bootstrapのborderクラスでは、種類はsolidに予め指定されているという説明をしましたが、CSSを別で指定すれば点線などの他のデザインを使うことができます。
枠線を点線にするには、以下のように指定します。
index.html
<p class="border-primary">点線の枠</p>index.css
/* スタイルを適用したい要素 */
p{
border: dashed;
}
HTMLの方では、枠線そのものを指定するクラス(borderやborder-top)を書かず、CSSで指定します。枠線の色やこの後紹介する角丸などのデザインを指定するクラスは書いたままにして大丈夫です。
以下の記事で線のデザインを紹介しているので、こちらも参考にしてください。
Bootstrapで角丸の枠線を作成する方法
枠線の角を丸くする(角丸にする)こともできます。枠線の角を丸くするには、roundedというクラスを使用します。
このクラスを使用すると、枠線の4つの角全てが角丸になります。
上下左右を指定して角丸を設定することもできます。この場合は、rounded-{方向}というクラスを使用します。{方向}の部分にはtop,bottom,right,leftのいずれかが入ります。
これを組み合わせて、3つの角を角丸にする事もできます。例えば、右上以外を角丸にする場合には、rounded-leftとrounded-bottomを使用すればよいです。
この角丸は、囲み枠だけでなく、下線を引く時（border-bottom）などでも使用することができます
角丸の大きさ
角丸の大きさをデフォルトより小さく、または大きくすることができます。小さくしたい場合にはrounded-sm、大きくしたい場合にはrounded-lgを使用します。
Bootstrapで枠線を円や長円にする方法
枠線を円や長円にすることもできます。円にしたい場合にはborder-circle、長円にしたい場合にはrounded-pillというクラスを使用します。
円の場合、高さと幅を指定しない場合は画面の幅に合わせて引き伸ばされます。正円にしたい場合には、高さと幅を同じ値で設定する必要があります。
<p class="rounded-circle">このままだと引き伸ばされる</p>
<p class="rounded-circle " style="width: 100px;height: 100px;">正円になる</p>また、背景色の形として円、長円、角丸などを指定することもできます。
上のサンプルコードで背景色や文字色の指定に使っているクラスについては、以下の記事で紹介しています。
まとめ
いかがでしたか？
枠線は、文字を囲んで目立たせたり区切り線にしたりといろいろな用途で効果的に使うことができます。
様々なスタイルの枠線を使って、見やすいWebページを作成してみてください！
