bootstrap5とは

bootstrapとは、何に役立つのか?

  • bootstrapが流行したきっかけは、レスポンシブデザインを簡単にしたこと。スマホとPCの双方のデザインを区別することなく対応することができる。
  • bootstrapを使えば、自分でCSSを一切書かずに、用意されているクラス名だけを使って、それなりのデザインのサイトができること。(デザインができない開発者には嬉しい)
  • bootstrapをコピーして使う感じだと思うが、bootstrapが達成しようとしているゴールは高い。それを学ぶこで、よりよいCSSの書き方を学ぶことにつながる。きっかけとして、実務に使えるよい教材になる。
  • スマホだけを対象にするサイトなら、デザインはシンプルになり、レスポンシブを考える必要がない。どちらかといえば、デザイナーの出番になる。

ブレイクポイントとレスポンシブ

  • ブレークポイント付きのクラスによって、デバイスごとに表示を切り替えること。つまり、今までの設定をブレークして(無くして)、新しいクラスの値を設定する。
  • レスポンシブ対応のナビゲーション
  • レスポンシブ対応の画像

レイアウト

  • レイアウトだから、シンプルに考えれば、配置と余白を決めること(そのバランスで見え方、伝わり方が変わる)
  • レイアウトを構成するのは、Breakpoints、コンテナ、グリッドシステム、カラム→余白を与える(コンテンツ、アイテム)
  • アイテムの設置方法については、かなりバリエーションがある(いろいろな自動が増えている、マージンユーティリティも使える、オフセットやオーダー、z-index)

グリットシステム

  • レスポンシブを対応可能にするためにグリッドシステムを採用していること
  • 行とカラムでレイアウトを構成する形式とも言う
  • 1行は、カラム(column:列)とガター(gutter:溝)で構成される
  • コンテナとアイテムで構成する形式とも言う
  • レスポンシブを対応可能にするために、ブレークポイントに応じた表示、非表示、ガター、幅や高さの調整、配置等の切り替え
  • bootstrap4から、flexboxの適用により、面倒な設定は無くなりつつあり、自動化してくれるものが多くなり、よりシンプルに作ることが出来るようになってきている

コンポーネンツとユーティリティー

  • コンポーネンツは部品で、部品を組み込むことで完成させる仕組み
  • ユーティリティは、CSSのデザインパターンで、そのデザインパターンについてbootstrapがclass名を付けてあらかじめ用意しているもの
  • 出来る限り、独自にCSSを追加せずに、ユーティリティを使うことを考えることが、よいCSSとは何かを知る機会になる。

container(コンテナ)

  • container(コンテナ)は、荷物を積む箱。CSSでは、コンテンツを入れる箱。
  • bootstrapのcontainer(コンテナ)は(widthとpaddingとmarginが設定されているシンプルなもの) 但し、mediaごとに max-widthが設定され、レスポンシブ仕様になる。
  • 固定幅コンテナと可変幅コンテナ(container-fluid)があり、 リキッド(流動)レイアウト(ブランザー幅に応じてグリッドの横幅を常に100%に変化させる。

block(ブロック)の歴史

  • ブロックは表示形式の1つで、ブロックとインラインからスタートした。divは、display: blockで、spanは、display: inlineになる。
  • デザイナーは、デザインするにあたり、その要素をblock(ブロック)として扱うか、inline(インライン)として扱うか、どちらかに決める必要があった。
  • block(ブロック)にすることにより、幅(width)と高さ(height)が指定できる、余白が指定できる。横並びにも出来る。一方、inline(インライン)は幅と高さを指定しても反映されない。また、inline(インライン)は前後に改行が入らないが。block(ブロック)では前後に改行が入る。
  • また、inline(インライン)の要素(span)の中には、block(ブロック)の要素(div)を基本的に入れないという決まりもあった。
  • divに対してdisplay:inlineを指定すれば、spanと同じ働きをするようにンあり、そのためdivは、便利で、divが頻繁に使用されるようになる。
  • そんな歴史があったが、インライン要素という呼び方は、HTML5で廃止された。

再構築されたdisplay要素

displayの値 説明 bootstrapのクラス
display: none; レスポンシブデザインで、画面が小さければ非表示にする d-none
display: block; 幅や高さ、マージンやパディングが変更できる d-block
display: inline; 従来のインライン要素、主に文字の装飾 d-inline
display: inline-block; 幅や高さが変更できるインライン要素(従来インラインでは設定出来なかった幅や高さ指定ができる) d-inline-block
display: flex; フレックスバックスのコンテナになる(親要素としてコンテナになる) d-flex
display: list-item; list-style-type や list-style-position と共に使用する d-block、d-inline-block
display: table; table タグを使わずに、同様のスタイルを利用することができる d-table

さらに1歩進んだFlexレイアウト

  • rowとcolから1歩進んだもの
  • floatから1歩進んだもの
  • フレキシブルボックスFlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組める
  • 何がフレキシブルなのかと言えば、colなし、幅サイズなし、羅列するだけで、画面の大きさによって、勝手に自動整列してくれる、折り返してくれる。
  • 必然的に、必要なアイテムの配置方法を決める便利な機能が用意されている

bootstrapとjavascript

  • bootstrap5からjquery依存が無くなる(jqueryが不要にになる、これは時代の流れに対応)
  • javascriptを使って実現するモノをあからじめ用意してくれている。(htmlに属性を追加するだけで実現してしまう。もとろん、jsファイルは一切触る必要がなし)
  • boostrapが用意しているjsファイルとPopper.jsの2つのjsファイルが必要で、これをバンドルしたものbootstrap.bundle.jsも用意されている。
  • data-bs-が付いているところが、裏でjavascriptが動作して、実現される機能。とくにjavascriptを手動で書く必要はなく、ルールに応じてhtmlに属性を持てば、その属性から必要な値を取得し、勝手にイベントと機能が動作してくれる。
  • bootstrapのjavascriptを使って、手動で意識的にjavascriptを制御することもできる。

視覚支援機能(目が不自由な人に対する支援)

  • dorpdwonや通知、アイコン化されたボタンの意味、現在がアクティブやカレントの位置にいる、など裏に隠れている機能や表示について、視覚支援の属性を追加することにより、読み上げ機能などで目が不自由な人でも、間違えることなく、操作できるようにする仕組みをbootstrapは持っている。
  • 具体的には、aria-で始まる属性になる

Sassを使ってカスタマイズする

  • Sassは、プログラム的な書き方でCSSを書き、コンパイルして、cssファイルを作ること。
  • 全体を変えるとか、何度も書き換える場合には、すごく便利だが、そこそも覚えなければならないこともあり、特に必須ではでいいと思う。(個人的な感想)

CSSの書き方(セレクターの書き方)

セレクターの書き方 セレクター例、説明
table td {} スペースは絞り込み。tableの中にあるtd全部。CSS側で多様すると、わかりずらくなるので使わない方がいい
div, span {} カンマは、双方に適用。同じCSSを適用される。
.container > span {} クラス名の中にあるhtmlタグにCSSを設定する。マッチ回数が多くなり、CSS適用まで時間が掛かるため、使わない方がいい。
.row>.col, .row>[class^=col-] {} クラスの中のクラスで正規表現で一括指定。マッチ回数が多くなり、CSS適用まで時間が掛かるため、使わない方がいい。
.form-check-input[type="radio"] {} 属性指定。クラスが設定され、かつtypeがradioのモノ
div.class {} htmlに.でクラス名で限定(スペースなし)。これも速度という観点からは、単独class名にした方がいい。
div .class {} スペースありだと、子要素全部(divの中にあるclass全部)
#img p:nth-child(1) string{} imgの中の1番目のp 添え字を使うのは、配列を考え方は同じ
p:first-child{} 1番目のpタグのみ適用される
#id { ... !important } !impotant+IDセレクタ。優先順位が最大化(同じclassが定義されていても、これが適用される) CSSがすでに冗長だから、使わない方がいいCSSになる
.custom-file-input:lang(ja)~.custom-file-label::after {content: "参照";} A ~ B(要素の後ろにある同じ階層のセレクタの指定)~ である要素の後にある要素にスタイルを適用します。(後ろにある先頭だけ)
a:link { color: red; } 属性は:で指定で行なう。特定の状態に対して、CSSを適用する
link a:before {content: '>';} before
.form-control-lg::file-selector-button ::は、特定の要素に対して、CSSを適用する
p::first-line { } Pの最初の行に適用
:root :root 疑似クラスは、html セレクターと同じ

html5 実体参照(HTML特殊文字のエスケープ)

  • < < 大なり記号
  • > > 小なり記号
  • & & アンバーサンド
  • " " ダブルクォート
  •   半角スペース

ベンダープレフィックス

CSS3で採用される予定の機能が各ブラウザで先行実装されていますが、 それらの機能を動作させるには、 先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要がありましたが、既に不要になりつつある。

プレフィックス ブラウザーベンダー
-moz- Firefox
-webkit- Google Chrome、Safari
-o- Opera (すでに不要)
-ms- Internet Explorer(スルーしていい)

用語

用語 説明
スニペット【snippet】とは スニペットはプログラム用語で、本来は「断片」という意味。 小さなテキスト領域を表す。 SEOでは、descriptionや本文から抽出した内容のこと。
プレフィックスとは 先頭に分類のための記号を付けるルールのこと。
コンテナとアイテム コンテナは積載する箱(枠)。アイテムに箱に詰めるモノ(コンテンツ)。
キャレット 校正で、脱字の挿入を指示する記号。WEBではドロップダウンの▼マーク。