プロジェクトで Bootstrap CSS ヘルパークラスを使用する

ウィレム・ゴリス
2015 年 10 月 7 日
分読み

Bootstrapには、ビューの作成に役立つCSSヘルパークラスが多数用意されていることをご存知ですか？テーマ設定を最適化し、 MendixBootstrap 統合についてご存知ですか? もしそうなら、読み進めてください。

ヘルパークラスとは何か

まず最初に、ヘルパークラスとは一体何でしょうか。概念を完全に理解するには、一歩下がって CSS の全体像を見るのがよいでしょう。多くの開発者は CSS はプログラミング言語ではないと主張しますが、優れた CSS プラクティスは、確立されたコーディングのベストプラクティスと非常によく似ています。特に、DRY (Don't Repeat Yourself) や、アーキテクチャの概念を使用して構築する (BEM、OOCSS、Smaccs の 3 つは最もよく知られているものです)。

CSS 自体には、おそらくすべてのプログラマが最初のプロジェクトで認識している「スパゲッティコード」になる傾向が非常に強いです。コードはあちこちに散らばっていて、まともな構造が欠けており、多くのコードの繰り返しと未使用のコード部分の組み合わせになっています。CSS 自体にはスコープの概念がなく、HTML に完全にバインドされており (依存関係があります)、詳細度などの概念のために非常にわかりにくいことがよくあります。

当然ながら、多くの人が、現代においてこれは絶対にやってはいけないことだと感じました。そこで、HTML ビュー自体が変わっても、CSS コードをよりモジュール化、拡張性、保守性、再利用性に優れたものにするためのアーキテクチャコンセプトが考案されました。Bootstrap の CSS コードは、こうした実践の非常に良い例です。次の CSS ルールを比較してください。


#newButton {
display: inline-block;
padding: 6px 12px;
color: #333;
font-size: 14px;
text-align: center;
border: 1px solid transparent;
background-image: none;
background-color: #fff;
}

#deleteButton {
display: inline-block;
padding: 6px 12px;
color: #fff;
font-size: 14px;
text-align: center;
border: 1px solid transparent;
background-image: none;
background-color: #f00;
}

このような書き方で中規模プロジェクトのテーマ設定を想像してみてください (アプリケーション全体のすべてのボタンをターゲットにする必要があり、基本的に同じコードを何度も書き直すことになります)。さらに悪いことに、アプリケーションの小さな再設計さえ実装する必要があると想像してみてください。幸いなことに、Bootstrap にあるような適切なアーキテクチャとベストプラクティスにより、作業ははるかに簡単になります。


.btn {
display: inline-block;
padding: 6px 12px;
font-size: 14px;
text-align: center;
border: 1px solid transparent;
background-image: none;
}
.btn-default {
color: #333;
background-color: #fff;
}
.btn-warning {
color: #fff;
background-color: #f00;
}

これで、完全にモジュール化された CSS が完成しました。HTML 要素のクラス名を組み合わせるだけです。(注: この書き方の利点は、たとえば 10 個のボタンをスタイル設定するとより明確になりますが、ここでは CSS コードの繰り返しで読者を退屈させたくありませんでした)。

基本的に、個々の要素のスタイル設定をやめて、要素に視覚的な動作を追加することにしました。私たちは、私たちに代わってすべての面倒な作業を実行するシステムまたはアーキテクチャを作成しています。ここで、ヘルパークラスのような概念が登場します。

本質的に、ヘルパークラスは「独立した視覚的な動作ルール」と説明できます。つまり、特定の HTML 要素または要素のグループに結び付けられておらず、オブジェクトの追加クラスとして使用されて、コードの繰り返しを防ぎながら目的の動作を実現します。基本的に、要素に少しだけ追加の動作が必要な場合、たとえば、画面の左側ではなく右側に配置されるボタンなど、その利点は明らかです。

数は限られていますが、Bootstrapには、次のような便利なヘルパークラスがあります。 Mendix プロジェクト。最も重要なものをリストし、その目的を簡単に説明します。

Bootstrap カラーヘルパークラス

カラーヘルパークラスは、テキストの色を変更するクラスと背景の色を変更するクラスの 2 つのカテゴリに分けられます。

テキストの色:

.text ミュート
.text-プライマリ
.テキスト成功
.テキスト情報
.テキスト警告
.テキスト危険

背景色:

.bg-プライマリ
.bg-成功
.bg-info
.bg-警告
.bg-危険

以前に Bootstrap のスタイル設定を試したことがあれば、ボタンの種類や使用できるものから「primary」、「success」、「info」などを認識できるかもしれません。Bootstrap 全体で、これらの用語は色の種類を定義するために使用されます。

Bootstrap ポジショニングヘルパークラス

多くの場合、要素自体の特定のスタイルは、ページ上の位置とは独立している必要があります。通常のレイアウトが自動的にサポートしない位置に対応するために、要素を適切な場所に配置するのに役立つヘルパークラスがいくつかあります。

フロートレギュレーター:

.左に引く
.右に引っ張る
.クリアフィックス

.pull-left および .pull-right クラスを使用して、それぞれ左フロートまたは右フロートを作成し、レイアウト内の要素をフロートさせることができます。フローティング動作で最も一般的な問題は、親コンテナーがコンテンツの寸法を認識しなくなることです。.clearfix ヘルパークラスを使用してこの問題を解決し、親コンテナーに正しい高さを再び与えることができます。

コンテンツを中央揃えにする:

.センターブロック

残念ながら、コンテンツの中央揃えは、特に垂直方向の中央揃えの場合、コンテンツが配置されているコンテキストに大きく依存します。.center-block ヘルパークラスは、幅が既知のブロックレベル要素の水平方向の中央揃えを容易にします。

Bootstrap 可視性ヘルパークラス

要素の配置とは別に、インタラクティブなアプリケーションでは、たとえば表示しているページの状態に応じて可視性を変更する必要が生じることもよくあります。

標準的な可視性ヘルパー:

。見えない
.hidden
。公演

CSS では、2 種類の「非表示」コンテンツが使用されます。可視性を none に設定するか、表示を none に設定します。可視性を none に設定すると、要素は表示されませんが、ページレイアウトの「プレーヤー」としてスペースを占有します。表示を none に設定すると、ブラウザーは要素を存在しないかのように無視します。.invisible を使用して項目を非表示にし、.hidden を使用して実際に表示を none に設定します。.show ヘルパークラスは、実際には .hidden クラスに対抗するために使用されます。これらの基本的な可視性ヘルパークラスは、JavaScript カスタムウィジェットを介してカスタムのインタラクティブ動作を構築するのに非常に役立ちます。

エキゾチックな可視性ヘルパー:

.srのみ
.テキスト非表示

.sr-only クラスは、要素がメディアとしてスクリーンリーダーでのみ表示されることを意味します。.text-hide クラスは、要素のテキストコンテンツを非表示にし、テキストを背景画像に置き換えるためによく使用されます。

例

可能性は無限ですが、小さな例を簡単に示すことができます。以下は、で作成された小さなアプリケーションのスクリーンショット2枚です。 Mendixページヘッダーには .bg-info が使用され、テキストコンテンツには .pull-right が使用されました。3 つのタイルヘッダーには、さまざまなテキストカラークラスが追加されました。すべて 1 分以内に完了しました。