はじめに
Bootstrap、便利ですよね。私もよく使っています。
これ、ほんとに使い込んでくるほどいろんな技があって使いやすいですよね。
しかし、Bootstrapの弱点ですかね・・・どうしてもBootstrap臭は消えないんです。
仕方ないです。こればっかりは。
というわけで、単純なHTMLを構築する際には私もよくBootstrapっぽさを極力減らすために、CSS上書きで使っています。
基本的にはBootstrapに対して、塩コショウをしていくイメージですかね。
実際に使用しているページは以下
https://shino3.net/
私のポートフォリオサイトです。
GitHub Pagesに向けて、自分のドメインを設定しています。
Bootstrapに上書きする。
普通は、以下のようにBootstrapを読み込みますね。
<link rel="stylesheet" href="./css/bootstrap.min.css">
これを上書きするように
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/my-sheet.css">
これで、別ファイルから読み込みます。
あとは規定の要素を上書きするように埋めていきます。
要素を上書きする
ボタンなどのコンポーネントに味付け
Bootstrapというのは各コンポーネントを細かくclassで指定していきます。
例えばボタンなど。だいたいこのように書きます。
<btn class="btn btn-success">ログイン</a>
いかにもBootstrapっぽいボタンになります。
ここからなるべくBootstrapっぽさを無くす方法は割と簡単です。
my-sheet.cssに要素を書き足してあげましょう。
.btn {
border-radius: 2px;
}
角丸の半径を削るだけですね。だいたい半分ぐらいを目安に設定していきます。
ボタン要素については、small, largeもありますので、以下のように全部、約半分にします。
これだけでもだいぶ違うはず。
.btn {
border-radius: 2px;
}
.btn-small {
border-radius: 1px;
}
.btn-large {
border-radius: 3px;
}
フォームなども、各要素に対して角丸の設定を変更していきます。
同様に、約半分を狙うといいでしょうか。ノーマルサイズのボタンと縦のサイズが同じなので、フォームも角丸を2pxに指定するといい感じになります。
Web-Fontを使用する
割と重要でもあるのがこれ。素のBootstrapのフォントは日本語設定がありません。また、英字フォントも使っていると
「いかにもこれ・・・」
な感じがマシマシになります。
Google Font等を使用して、Stylesheetに追記しています。
フォントの指定は、先程のmy-sheet.cssに対して要素を追加していきます。
まず全体に向けたフォントを指定
:root{
--font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
body {
font-family: var(--font-family-sans-serif);
}
これだけでもだいぶ変わりますが、タイトルからは相変わらずのBootstrap感があります。
そこで、Bodyと同様に、タイトル要素についても指定します。
:root{
--font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
body {
font-family: var(--font-family-sans-serif);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-sans-serif);
}
どうでしょうか。フォントも今までの素のフォントから変更したことで、だいぶページに統一感が出たかと思います。
Bootstrapを使用した場合のSNSボタン
Shareボタンとか、SNSのリンクに飛ぶボタン、Bootstrap使っている場合って実装わりとしんどいですよね。
各カラーを設定して・・・
先程と同様に、SNSのテーマカラーを設定したCSSを実装すると割と使いやすくなります。
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/my-sheet.css">
<link rel="stylesheet" href="./css/bootstrap_button_sns.css">
こんなかんじで。
内容はこんな感じに。カラーはブランドごとのテーマカラーに合わせて作っています。
.bg-twitter {
background-color: #55acee;
text: #FFF;
}
.bg-mastodon {
background-color: #2b90d9;
text: #FFF;
}
.bg-facebook {
background-color: #3b5998;
text: #FFF;
}
.bg-linkedin {
background-color: #0079ba;
text: #FFF;
}
.bg-github {
background-color: #333;
text: #FFF;
}
.bg-qiita {
background-color: #79bd28;
text: #FFF;
}
.bg-misskey {
background-color: #00acc1;
text: #FFF;
}
.bg-soundcloud{
background-color: #ff3300;
text: #FFF;
}
これ、ボタンのデザインに継承しつつ、リンクとして機能させるといい感じになりますね。
Font-Awesomeと組み合わせるとなおいい感じに。
<a href="" class="btn bg-twitter text-left"><i class="fab fa-twitter fa-fw"></i> Twitter</a>
要点はbg-twitterなどブランド名をセットして指定するところでしょうか。
また、btn要素は先に書いたように、角丸設定を継承するので、いい感じになります！
まとめ
最低限、これだけやってあるとそれなりにBootstrap感は減らせた気がします。
BootstrapのGridレイアウトや、FlexBoxすごく魅力的で使いやすいし、これらはレイアウト組んでいく上でレスポンシブデザインが簡単に実現するため、私自身も一押しの機能です。
しかし、各コンポーネントやコンテンツからBootstrap感はひしひしと伝わるので、このあたりを必要に応じて味付けし、作り込むことで大きく化けます。
皆様もぜひ自分の求める味付けをしていきましょう！