HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

Bootstrapヘルパークラスの使い方を解説！pull-left・pull-right・clearfixの基本

Bootstrapのヘルパークラスとは

Bootstrapには、レイアウトの調整を手軽に行うための「ヘルパークラス（ユーティリティクラス）」が用意されています。代表的なものとして、要素を左に浮かせる.pull-left、右に浮かせる.pull-right、ブロック要素を中央揃えにする.center-blockなどがあります。

これらのクラスを使いこなすことで、CSSを一から記述することなく、素早くレイアウトを組み立てることができます。


floatを解除する.clearfixクラス

要素にfloatを指定すると、親要素の高さが崩れてレイアウトが乱れることがあります。そんなときに便利なのが.clearfixクラスです。floatを含む親要素にこのクラスを適用するだけで、floatの影響を解除（クリア）できます。


サンプルコード

以下は、.clearfixと.pull-left、.pull-rightを組み合わせた実装例です。オレンジ色の親ボックスの中に、左寄せと右寄せの2つのボックスを配置しています。

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap サンプル</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "clearfix" style = "background: orange;border: 1px solid #000; padding: 10px;">
         <div class = "pull-left" style = "background:#58D3F7;">
            左にフロート
         </div>
         <div class = "pull-right" style = "background: #DA81F5;">
            右にフロート
         </div>
      </div>
   </body>
</html>

コードのポイント

  • 親要素のdivに.clearfixを指定することで、子要素のfloatによる高さの崩れを防いでいます。
  • 子要素にはそれぞれ.pull-leftと.pull-rightを指定し、左右に振り分けています。

まとめ

Bootstrapのヘルパークラスを活用すれば、floatの制御や中央揃えといった頻出のスタイル調整を短いコードで実現できます。特に.clearfixは、floatによるレイアウト崩れを防ぐ定番テクニックなので、ぜひ覚えておきましょう。

  1. C#の抽象クラス（abstract class）とは？基本から実例までわかりやすく解説

    抽象クラスとは C#における抽象クラス（abstract class）は、abstractキーワードを使って宣言される特殊なクラスです。抽象クラスには、実装を持たない「抽象メソッド」と、通常の処理を持つ「非抽象メソッド」の両方を含めることができます。 最大の特徴は、抽象クラスは直接インスタンス化できないという点です。newキーワードでオブジェクトを生成することはできず、必ず派生クラスを通じて利用します。この仕組みにより、「共通の設計図を基底クラスで定義し、具体的な実装は各派生クラスに任せる」というポリモーフィズム（多態性）を実現できます。 抽象クラスの基本的な宣言方法 以下は、抽象クラスVe

  2. なぜクラスを作るのか？抽象化の重要性と良いクラス設計の基本

    前回の記事「なぜnilを使うのか」に続き、普段当たり前と思って使っているものについても、同じ問いを立ててみるのは良いアイデアではないでしょうか。 例えば… 巨大で醜いコードの塊を1つ作るのではなく、なぜ私たちはクラスを使うのでしょうか？ 基本的なレベルで言えば、コードとデータを論理的な単位に整理するためにクラスを使います。しかし、それだけではありません。 クラスを使うと、抽象化（abstraction）を作り出せるのです。 抽象化とは何か？ 実は、私たちは毎日、毎分、抽象化を利用しています。 今この記事を書いているキーボードは、次のようなもので構成されています。 ケーブル Cherry MX