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

2020年5月31日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(枠線)の太さを指定するクラスがない

標準は最も細い1pxのラインなんだけど、いつでもどこでも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>言います

エンジニアの年収を上げる方法

フリーランスエンジニアで年収を大幅アップしませんか?
実際に僕は会社員からフリーランスエンジニアになって年収が87万円アップしました

今なら相談(ヒアリング)するだけで3,000円分のamazonギフト券がもらえます!
初めての案件契約で最大10万円分の準備金がもらえます
非公開の高単価案件(100万円超え)が多数あります

詳しくはこちら