Bootstrapを使うときに追加しておくと便利なカスタムクラス

Bootstrap

Bootstrapは言わずと知れたCSSフレームワークで、大変お世話になっております

ただ使ってる人はわかると思うんですが、なんていうか、いまいちかゆいところに手が届かないというか、

なんでその指定ができないの？

と思うようなところが多々あるんですよね

そいういうところをカバーするために、あらかじめ追加しておくと便利なカスタムクラスを公開します

追加しておくと便利なCSSクラス

僕はbase.cssという名前をつけて、全てのページからロードして参照できるようにしています

html

<link rel="stylesheet" type="text/css" href="CSSのおいてあるディレクトリ/base.css">

こうしておけば、どのページの装飾をするにもかゆいところに手が届きます

そして追加するカスタムCSSがこちらです

base.css

/* ボーダーの太さ */
.border-2{
    border-width:2px !important;
}

.border-3{
    border-width:3px !important;
}

.border-4{
    border-width:4px !important;
}

.border-5{
    border-width:5px !important;
}

/* アンダーライン */
.u{
    text-decoration: underline;
}

/* アンダーライン */
.b{
    font-weight: bold;
}

borderの太さ

Bootstrapには、なぜかborder（枠線）の太さを指定するクラスがない

標準は最も細い１pxのラインなんだけど、いつでもどこでも1pxじゃちょっと困ることも

「眉毛の細さは幸の薄さ」じゃないけども、もうちょっと太くしたいことだってある

ということでこのカスタムクラスを追加しておく

あとはhtml側でクラスを指定すれば、borderが指定した太さになる

html

<div class="border border-3">
    ボーダーの太さ！
</div>

指定なし（標準）

border-2

border-3

border-4

border-5

文字の装飾

下線

文字のアンダーライン（下線）を追加

html

<h1 class="u">
    タイトル
</h2>

太字

太文字用の装飾って、もともとBootstrapにはあるんですが、「font-weight-bold」っていう長ったらしく覚えにくい名前なんで、短い名前で登録しておくと便利です

大切なことを<span class="b">1回だけ</span>言います