Image may be NSFW.
Clik here to view.
Twitter謹製フレームワークBootstrap 3は、フロントデベロッパーの開発スピードアップの手助けをしてくれる機能が多数収録されています。ときには特別なコンテンツのためにCSSやJavaScriptを使ってプログラムした後に、Bootstrap初期設定だけで解決できることに気付いたことがあるかもしれません。 これではWebアプリやサイト制作に、余分な時間がかかってしまいます。
今回はいくつかのプロジェクトを制作してきた中で、実践で活用できるBootstrapの小技テクニック16個をまとめてご紹介します。人気フレームワークBootstrapでも、あまり知られていないレア系テクニックを中心にまとめています。
詳細は以下から。
あまり知られていないBootstrapスタイルテクニック、小技16個まとめ
テクニック 1 ホバーエフェクトによるドロップダウン表示
Image may be NSFW.
Clik here to view.
Bootstrapのナビゲーションメニューは、クリック操作でドロップダウンを表示するように設定されています。以下のコードを追加することで、ホバー操作による展開が可能になります。
@media only screen and (min-width : 768px) {
/* デスクトップ表示ではホバー操作でドロップダウンを表示 */
.dropdown:hover .dropdown-menu {
display: block;
}
}
しかしこれでは、親リンク部分はクリックすることができません。シンプルなJS用コードを追記することで、この問題を解決することができます。
$('.dropdown-toggle').click(function() {
var location = $(this).attr('href');
window.location.href = location;
return false;
});
テクニック 2 クラス名「container-fluid」の使い方
フルワイズでスタイリングするときに、class=”container”を利用しているというひとは多いのではないでしょうか。class=”row”には-15pxが適用されているので、実はデスクトップ表示ではうまくpaddingが反映されません。class=”container-fluid”を利用することで、一発でこの問題を解決することができます。
Image may be NSFW.
Clik here to view.
テクニック 3 メディア・クエリの設定について
各デバイスごとに異なるレイアウトを実現したいときは、以下のリストを参考にするとよいでしょう。
/*==================================================
= Bootstrap 3 メディア・クエリ =
==================================================*/
/*========== モバイル・ファーストの場合 ==========*/
/* カスタム, iPhone Retinaディスプレイ */
@media only screen and (min-width : 320px) {
}
/* XSサイズ : Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Sサイズ、タブレット : Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Mサイズ、デスクトップ : Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Lサイズ、ワイドスクリーン : Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== 非モバイル・ファーストの場合 ==========*/
/* Lサイズ、ワイドスクリーン : Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Mサイズ、デスクトップ : Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Sサイズ、タブレット : Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* XSサイズ : Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* カスタム, iPhone Retinaディスプレイ */
@media only screen and (max-width : 320px) {
}
テクニック4 デバイスごとにグリッドカラム数を変更する方法
Boostrapのグリッドシステムを使うことで、レスポンシブ対応のWebサイトを作成をよりパワーアップしてくれます。デバイスごとに異なるカラム数を並べることも自由自在です。
Image may be NSFW.
Clik here to view.
各カラムに複数のクラスを入力することで、よりフレキシブルなグリッドレイアウトを実現することができます。以下のコードではタブレット端末では2カラム、デスクトプでは４カラムで表示されます。
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-6">
<i class="fa fa-heart"></i>
</div>
<div class="col-md-3 col-sm-6">
<i class="fa fa-heart"></i>
</div>
<div class="col-md-3 col-sm-6">
<i class="fa fa-heart"></i>
</div>
<div class="col-md-3 col-sm-6">
<i class="fa fa-heart"></i>
</div>
</div>
</div>
テクニック5 グリッドのネスト（入れ子）スタイリング方法
Image may be NSFW.
Clik here to view.
一度分けたカラムを更に分けたいときに活躍するネスト（入れ子）テクニック。ポイントはrowで囲むことで、何度でもメディア・クエリに対応したカラムに分けることができます。
Twitter公式ドキュメントでも詳しく解説されています、こちらも参考にどうぞ。
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-sm-3">
<span>1</span>
</div>
<div class="col-sm-3">
<span>2</Span>
</div>
<div class="col-sm-3">
<span>3</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-8">
<span>1</span>
</div>
<div class="col-md-4">
<span>2</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-xs-2">
<span>1</span>
</div>
<div class="col-xs-2">
<span>2</span>
</div>
<div class="col-xs-2">
<span>3</span>
</div>
<div class="col-xs-2">
<span>4</span>
</div>
<div class="col-xs-2">
<span>5</span>
</div>
<div class="col-xs-2">
<span>6</span>
</div>
</div>
</div>
</div>
</div>
テクニック6 カラムの順序を入れ替えるスタイリング方法
カラムの順番を入れ替えて表示がしたいという場合も、クラス名を追加するだけの簡単設定。モバイル端末では、HTMLコードに書かれた順番どおり表示されます。
Image may be NSFW.
Clik here to view.
<!--
デスクトップ表示:
[1 2 3] [1 2 3 4 5 6 7 8 9]
モバイル表示:
[1 2 3]
[1 2 3 4 5 6 7 8 9]
-->
<div class="row">
<div class="col-md-9 col-md-push-3">1 2 3 4 5 6 7 8 9 </div>
<div class="col-md-3 col-md-pull-9">1 2 3 </div>
</div>
<!--
デスクトップ表示:
[ 2nd col ] [ 1st col ]
モバイル表示:
[ 2nd col ]
[ 1st col ]
-->
<div class="row">
<div class="col-md-6 col-md-push-6">1st col</div>
<div class="col-md-6 col-md-pull-6">2nd col</div>
</div>
テクニック7 見出しタイトルに有効なLeadクラス
文字テキストにクラス名「lead」を加えるだけで、フォントサイズを大きく表示してくれ、まえがきやイントロダクションにオススメしたい機能。
Image may be NSFW.
Clik here to view.
テクニック8 引用文に使えるスタイリング
コンテンツを引用するときなどに活用されるblockquoteタグ。左右揃えのスタイリングが使えるのをご存じですか。
Image may be NSFW.
Clik here to view.
テクニック9 リストを横並びにする方法
リストを横並びにする方法としては、li {display: inline-block;}を利用するテクニックがよく知られていますが、Bootstrapではクラス名list-inlineを追加することで解決できます。
Image may be NSFW.
Clik here to view.
テクニック10 モバイル用入力ラベル
入力フィールドにplaceholderのみを利用している方は、labelの設定も行うようにしましょう。こうすることでスクリーン・リーダーがページを読むことができます。
Image may be NSFW.
Clik here to view.
テクニック11 モバイル用入力ラベル
Bootstrapにはイメージ画像のカスタマイズに使える、3種類のスタイリングが用意されています。その中でも使用頻度の高いimg-thumbnailとimg-circleをデモページでは公開しています。
Image may be NSFW.
Clik here to view.
テクニック12 ガター溝をなくす方法
Image may be NSFW.
Clik here to view.
Bootstrapを利用することで、自分のニーズにあったデザインを作成することができます。ときにはカラムに適用されているpaddingを削除したレイアウトが必要になるかもしれません。そんなときは以下のCSSスニペットを追加しましょう。
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
後は適用したいrowに、新しく作成したクラス名を追加したら完成です。
<div class="row no-gutter">
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>
テクニック13 Containerのサイズをカスタムする方法
Image may be NSFW.
Clik here to view.
サイト制作を行っていると、異なるカラムやコンテイナーサイズを利用したいというケースに出くわすかもしれません。Bootstrapにおいて各カラムは、親要素となるコンテイナー幅いっぱいに自動的に広がります。このテクニックを利用すれば、お好みのコンテイナーサイズにカスタムすることができます。
@media (min-width: 768px) {
.container-small {
width: 300px;
}
.container-large {
width: 970px;
}
}
@media (min-width: 992px) {
.container-small {
width: 500px;
}
.container-large {
width: 1170px;
}
}
@media (min-width: 1200px) {
.container-small {
width: 700px;
}
.container-large {
width: 1500px;
}
}
一点注意が必要なのは、作成したカスタムコンテイナーがウィンドウ幅からはみ出てしまうケースです。これを解決するために、最大幅（max-width）の設定を行いましょう
.container-small, .container-large {
max-width: 100%;
}
テクニック14 テキストサイズをクラス設定で解決する方法
Image may be NSFW.
Clik here to view.
Bootstrapでは、Webサイトのマークアップをコンピュータが効率よく情報収集、解釈できる、セマンティック構造で作成することが考慮されています。たとえば見出しタイトルに、異なるフォントサイズを指定するのは以下のとおりです。
<h1 class="h2">H2要素のテキストサイズをつかったH1見出しタイトル</h1> <h2 class="h4">H4要素のテキストサイズをつかったH2見出しタイトル</h2> <h3 class="h1">H1要素のテキストサイズをつかったH3見出しタイトル</h3>
テクニック15 レスポンシブ対応でアスペクト比の調整可能なビデオ動画の埋め込み方法
Image may be NSFW.
Clik here to view.
YouTube動画などiframesのサイト埋め込みも、クラス名を指定するだけで、レスポンシブに対応するだけでなく、画面のアスペクト比も調整することができます。
<!-- 16:9 アスペクト比 -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>
<!-- 4:3 アスペクト比 -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>
テクニック16 デフォルトスタイルを上書きせずに、ボタン用クラスを追加する方法
Image may be NSFW.
Clik here to view.
デベロッパーの中にはBootstrapでスタイリングされたボタン要素を、完全に上書きしてカスタムしているひともいるかもしれません。しかしこれではすぐにコードが汚れてしまう恐れがあるため、元々あるボタン用クラスを拡張してあげましょう。
.btn-yellow {
background: rgb(250, 255, 140);
color: #574500;
border: none;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important; /* !important tags aren't necessarily always bad */
}
.btn-yellow:hover, .btn-yellow:focus {
background: rgb(252, 255, 179);
}
.btn-yellow:active {
background: rgb(247, 255, 71);
}
この方法を使えば、通常のボタンスタイル.btn-lgや.btn-blockなどにも対応することができます。以下は特大サイズのボタンを作成用スタイルとなります。
.btn-xxl {
padding: 20px 26px;
font-size: 35px;
border-radius: 8px;
}
さいごに、、
すべての案件、プロジェクトにおいてBootstrap 3が適しているとはかぎりません。しかし覚えておきたいことは、Bootstrapは拡張性を考慮して設計されています。必要に応じてクラス名などを拡張することで、よりデベロッパーが楽に開発を進めることができ、将来的なメンテナンスのしやすさにもつながります。
参照元リンク : Bootstrap 3 Tips and Tricks You Might Now Know – Scotch
参照元リンク : Bootstrap 3 Tips and Tricks You Still Might Now Know – Scotch