【基本】bootstrap4のまとめ一覧
bootstrapとは
bootstrapとは、CSSのフレームワークです。CSSは通常、設定したいスタイルを基にすべて自身で記述しなければなりませんが、bootstrapには、よく使用されるスタイルが雛形のような形で用意されているため、設定したいスタイルに見合うようなものを利用するだけでWebサイトの見た目を整えることが可能です。
bootstrapの使用方法
公式サイトからbootstrapのダウンロードをします。(Compiled CSS and JS) ダウンロードしたzipファイルを解凍し、解凍したフォルダに設定を加えたいHTMLファイルを置くことでbootstrapを使用することができます。
bootstrap一覧
では早速、bootstrapに用意されているスタイルで代表的なものを紹介します。
①グリッド
グリットでは、画面を指定した数に均等に分けることができます。 グリットの設定方法としては、それぞれのclassに「col」を指定し、divタグでそれらを囲みclassに「row」を指定、さらにdivタグで囲みclassを「container」もしくは「container-fluid」と指定します。
②テーブル
テーブルは表のようなリスト形式です。 テーブルを作成するには、tableクラスを指定します。 テーブルのグループのclassには「container」を、tableのclassには「table」を指定します。
user_id | name |
---|---|
1 | tanaka |
2 | saito |
3 | nakajima |
4 | sasaki |
通常指定しなければ、背景は白のテーブルになりますが、色の指定をすることも可能です。tableのclassに「table table-dark」を指定すると、背景が黒色のテーブルとなります。
また、同様にヘッダーの色を変更することも可能です。 theadタグをヘッダーの部分に設置しそのclassに、「thead-dark」を指定することによって、黒色のヘッダーとなります。
③ボタン
ボタンは、下記のようにtypeにbotton、classにbtnボタンで記述します。また、classに「btn-」と記述し、続く部分でボタンの種類を指定することができ、それに伴い背景色が変わります。ここでは抜粋して、いくつかご紹介します。左からclassが「btn」「btn btn-primary」「btn btn-danger」「btn btn-warning」「btn btn-success」です。
classに「btn-lg」を指定すると、ボタンの大きさが通常よりも大きく、「btn-sm」を指定すると、ボタンの大きさは通常よりも小さくなります。
また、classにactiveを指定することで、選択状態の見た目に設定することが可能です。
④フォーム
フォームは、ユーザーに対して入力箇所を設ける際に使用されます。 テキストやテキストボックスを作成する場合は、それぞれグループとなる部分のクラスに「form-group」、テキストの入力箇所に「form-control」を指定します。 また、フォームにはテキストの入力だけではなく、「ラジオボタン」や「チェックボックス」なども設置することが可能なので、興味のある方は調べてみてください。
⑤ドロップダウン
ドロップダウンは、下向きの矢印を選択すると、指定した選択肢が表示されるものです。アンケートで使用されたことがあるかたも多いかと思います。 ドロップダウンは、グループのクラスに「dropdown」を、選択肢のクラスに「dropdown-item」を指定します。
⑥アラートメッセージ
メッセージを表示させる際に、背景色をデザイン性のあるものに設定することができます。ここではいくつか抜粋して表示させます。 classに「alert alert-」を設定し、続けて決まった文字列を設定することで背景色が変わります。一番上から「alert alert-」に続けて、「primary」「danger」「warning」「success」を設定しています。
⑦シャドウ
シャドウを使用することによって、縁取りに影(シャドウ)を作成することができます。 設定方法は、classに「shadow」もしくは「shadow-」のあとに指定された文字列の記述を行います。後述の種類としては、「shadow-lg」で通常より大きい影を、「shadow-sm」では通常より小さい影を表示させるものがあります。
まとめ
いかがでしたでしょうか?bootstrapは、webサイトを効率的に作成するために非常に有効なCSSのフレームワークといえます。導入も比較的しやすいので、webサイトの作成を検討されている方はデザイン性の高い見た目を簡単に設定することができるbootstrapを取り入れてみてください。
70万円 フロントエンドエンジニア |