Advertisement

bootstrap-tip-top

 

[fancy_box]この記事は海外デザインブログScotch.ioで公開された「Bootstrap 3 Tips and Tricks You Might Not Know」と「Bootstrap 3 Tips and Tricks You Still Might Not Know」の著者Nicholas Cerminaraより許可をもらい、ポイントをまとめて抄訳しています。Thanks again, @nickforthought!![/fancy_box]

 

Twitter謹製フレームワークBootstrap 3は、フロントデベロッパーの開発スピードアップの手助けをしてくれる機能が多数収録されています。ときには特別なコンテンツのためにCSSやJavaScriptを使ってプログラムした後に、Bootstrap初期設定だけで解決できることに気付いたことがあるかもしれません。 これではWebアプリやサイト制作に、余分な時間がかかってしまいます。

 

今回はいくつかのプロジェクトを制作してきた中で、実践で活用できるBootstrapの小技テクニック16個をまとめてご紹介します。人気フレームワークBootstrapでも、あまり知られていないレア系テクニックを中心にまとめています。

 

 

 

詳細は以下から。

 

 

 

あまり知られていないBootstrapスタイルテクニック、小技16個まとめ

 

テクニック 1 ホバーエフェクトによるドロップダウン表示

 

hover-dropdown

 

Bootstrapのナビゲーションメニューは、クリック操作でドロップダウンを表示するように設定されています。以下のコードを追加することで、ホバー操作による展開が可能になります。

 

 

しかしこれでは、親リンク部分はクリックすることができません。シンプルなJS用コードを追記することで、この問題を解決することができます。

 

 

デモページ

 

 

 

テクニック 2 クラス名「container-fluid」の使い方

 

フルワイズでスタイリングするときに、class=”container”を利用しているというひとは多いのではないでしょうか。class=”row”には-15pxが適用されているので、実はデスクトップ表示ではうまくpaddingが反映されません。class=”container-fluid”を利用することで、一発でこの問題を解決することができます。

 

container-fluid

 

デモページ

 

 

 

テクニック 3 メディア・クエリの設定について

 

各デバイスごとに異なるレイアウトを実現したいときは、以下のリストを参考にするとよいでしょう。

 

 

 

 

テクニック4 デバイスごとにグリッドカラム数を変更する方法

 

Boostrapのグリッドシステムを使うことで、レスポンシブ対応のWebサイトを作成をよりパワーアップしてくれます。デバイスごとに異なるカラム数を並べることも自由自在です。

 

different-column

 

各カラムに複数のクラスを入力することで、よりフレキシブルなグリッドレイアウトを実現することができます。以下のコードではタブレット端末では2カラム、デスクトプでは4カラムで表示されます。

 

 

デモページ

 

 

 

テクニック5 グリッドのネスト(入れ子)スタイリング方法

 

nested-column

 

一度分けたカラムを更に分けたいときに活躍するネスト(入れ子)テクニック。ポイントはrowで囲むことで、何度でもメディア・クエリに対応したカラムに分けることができます。

 

Twitter公式ドキュメントでも詳しく解説されています、こちらも参考にどうぞ。

 

 

デモページ

 

 

 

テクニック6 カラムの順序を入れ替えるスタイリング方法

 

カラムの順番を入れ替えて表示がしたいという場合も、クラス名を追加するだけの簡単設定。モバイル端末では、HTMLコードに書かれた順番どおり表示されます。

 

column-ordering

 

 

デモページ

 

 

 

テクニック7 見出しタイトルに有効なLeadクラス

 

文字テキストにクラス名「lead」を加えるだけで、フォントサイズを大きく表示してくれ、まえがきやイントロダクションにオススメしたい機能。

leadclass

 

デモページ

 

 

 

テクニック8 引用文に使えるスタイリング

 

コンテンツを引用するときなどに活用されるblockquoteタグ。左右揃えのスタイリングが使えるのをご存じですか。

 

blocquote

 

デモページ

 

 

 

テクニック9 リストを横並びにする方法

 

リストを横並びにする方法としては、li {display: inline-block;}を利用するテクニックがよく知られていますが、Bootstrapではクラス名list-inlineを追加することで解決できます。

 

inline-list

 

デモページ

 

 

 

テクニック10 モバイル用入力ラベル

 

入力フィールドにplaceholderのみを利用している方は、labelの設定も行うようにしましょう。こうすることでスクリーン・リーダーがページを読むことができます。

 

input-label

 

デモページ

 

 

 

テクニック11 モバイル用入力ラベル

 

Bootstrapにはイメージ画像のカスタマイズに使える、3種類のスタイリングが用意されています。その中でも使用頻度の高いimg-thumbnailimg-circleをデモページでは公開しています。

 

thumb-style

 

デモページ

 

 

 

テクニック12 ガター溝をなくす方法

 

gutter-padding

 

Bootstrapを利用することで、自分のニーズにあったデザインを作成することができます。ときにはカラムに適用されているpaddingを削除したレイアウトが必要になるかもしれません。そんなときは以下のCSSスニペットを追加しましょう。

 

 

 

後は適用したいrowに、新しく作成したクラス名を追加したら完成です。

 

 

デモページ

 

 

 

テクニック13 Containerのサイズをカスタムする方法

 

custom-container

 

サイト制作を行っていると、異なるカラムやコンテイナーサイズを利用したいというケースに出くわすかもしれません。Bootstrapにおいて各カラムは、親要素となるコンテイナー幅いっぱいに自動的に広がります。このテクニックを利用すれば、お好みのコンテイナーサイズにカスタムすることができます。

 

 

 

一点注意が必要なのは、作成したカスタムコンテイナーがウィンドウ幅からはみ出てしまうケースです。これを解決するために、最大幅(max-width)の設定を行いましょう

 

デモページ

 

 

 

テクニック14 テキストサイズをクラス設定で解決する方法

 

heading-title

 

Bootstrapでは、Webサイトのマークアップをコンピュータが効率よく情報収集、解釈できる、セマンティック構造で作成することが考慮されています。たとえば見出しタイトルに、異なるフォントサイズを指定するのは以下のとおりです。

 

 

 

デモページ

 

 

 

テクニック15 レスポンシブ対応でアスペクト比の調整可能なビデオ動画の埋め込み方法

 

aspect-ratio

 

YouTube動画などiframesのサイト埋め込みも、クラス名を指定するだけで、レスポンシブに対応するだけでなく、画面のアスペクト比も調整することができます。

 

 

デモページ

 

 

 

テクニック16 デフォルトスタイルを上書きせずに、ボタン用クラスを追加する方法

 

cuustom-button

 

デベロッパーの中にはBootstrapでスタイリングされたボタン要素を、完全に上書きしてカスタムしているひともいるかもしれません。しかしこれではすぐにコードが汚れてしまう恐れがあるため、元々あるボタン用クラスを拡張してあげましょう。

 

 

 

この方法を使えば、通常のボタンスタイル.btn-lg.btn-blockなどにも対応することができます。以下は特大サイズのボタンを作成用スタイルとなります。

 

 

デモページ

 

 

さいごに、、

 

すべての案件、プロジェクトにおいてBootstrap 3が適しているとはかぎりません。しかし覚えておきたいことは、Bootstrapは拡張性を考慮して設計されています。必要に応じてクラス名などを拡張することで、よりデベロッパーが楽に開発を進めることができ、将来的なメンテナンスのしやすさにもつながります。

 

 

参照元リンク : Bootstrap 3 Tips and Tricks You Might Now Know – Scotch

参照元リンク : Bootstrap 3 Tips and Tricks You Still Might Now Know – Scotch