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>言います
ディスカッション
コメント一覧
まだ、コメントがありません
よくLoadingされてるDocs
新たにPostされたDocs
: ウェブサービス
メルカリやラクマの商品がいつ出品されたのかを調べる裏技
メルカリやラクマなどで商品を探してると、ときどき、 「この商品はいつ出品されたも ...: 仕事環境
15年前のエアコンに洗浄スプレーしたら想像以上にキレイになった
うちのエアコンは新品で購入してからすでに15年が経過しています にもかかわらず、 ...: Laravel
一定時間で消えるフラッシュメッセージを簡単に実装[Laravel8]
以前、手軽にフラッシュメッセージが実装できるnotieを紹介しました 今回は、そ ...: Laravel
ランダムな文字列やユニークなIDをLaravelで生成
random use Illuminate\Support\Str; // 引数 ...: スマホ
4,837円あげるって言うからOCNモバイルOneにLinksmateから乗り換えたんですよ
これまでは僕はスマホの通信会社に、MVNOのLinksmateを使ってきました ...HashMap
created_by
はやぴ
Web/アプリ開発エンジニア
Sierにてお堅いB向けのソフトウェア開発を経て、現在はC向けのWebやアプリを中心に開発しています。
Utilities