.net column
.NET開発者のためのブログメディア

イヤホンはOK

Bootstrapにおけるborderの使い方とは?borderの色・追加・削除・丸み

2020年12月07日

SE
borderの使い方について教えてください。

PM
borderとは枠線のことを指します。実際のコードを見て理解を深めていきましょう。

Bootstrapにおけるborderの使い方とは?


今回は、Bootstrapにおけるborderの使い方について説明します。borderとは枠線のことです。

枠線に色を付けたり、特定の部分だけ枠線を付けたり、特定の部分だけ枠線を消したりできます。また、枠線に丸みをつけることもできます。

Bootstrapにおけるborderの使い方に興味のある方はぜひご覧ください。

borderの色

Bootstrapでは、borderの色を変更できます。

border-primaryやborder-secondaryのように指定します。

 

See the Pen
bootstrap_border1
by kskumd (@kskumd)
on CodePen.

このように、Bootstrapではborderの色を変更できます。

borderの追加

Bootstrapでは、特定部分にborderを追加できます。

 

See the Pen
bootstrap_border2
by kskumd (@kskumd)
on CodePen.

このように、Bootstrapでは特定部分にborderを追加できます。

borderの削除

Bootstrapでは、特定部分からborderを削除できます。

 

See the Pen
bootstrap_border3
by kskumd (@kskumd)
on CodePen.

このように、Bootstrapでは特定部分からborderを削除できます。

borderの丸み

Bootstrapでは、borderの丸みを指定できます。

 

See the Pen
bootstrap_border4
by kskumd (@kskumd)
on CodePen.

このように、Bootstrapではborderの丸みを指定できます。

SE
色の他に枠線を尽かしたり削除したりできる機能なんですね。
PM
枠線自体の形を変えることもできますので、ぜひマスターしてください。

まとめ

いかがでしたでしょうか。今回は、Bootstrapにおけるborderの使い方について説明しました。borderとは枠線のことです。

枠線に色を付けたり、特定の部分だけ枠線を付けたり、特定の部分だけ枠線を消したりできます。また、枠線に丸みをつけることもできます。

ぜひご自身でソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs