ガター
使い方（How they work） ガター（グリッド列の間隔）は、列のコンテンツ間のギャップであり、水平方向のpaddingによって作成される。 各列に padding-right と padding-left を設定し、負のmarginを使用して各行の最初と最後にそれをオフセットし、コンテンツを揃える。 ガターの幅は 1.5rem（24px）。これにより、グリッドをパッディングとマージ...
使い方（How they work） ガター（グリッド列の間隔）は、列のコンテンツ間のギャップであり、水平方向のpaddingによって作成される。 各列に padding-right と padding-left を設定し、負のmarginを使用して各行の最初と最後にそれをオフセットし、コンテンツを揃える。 ガターの幅は 1.5rem（24px）。これにより、グリッドをパッディングとマージ...
display を変更（Changing display） display プロパティの一般的な値をレスポンシブで切り替えるには、表示ユーティリティを使用。グリッドシステム、コンテンツ、コンポーネントと組み合わせて、特定のビューポートで表示か非表示にする。 Flexboxのオプション（Flexbox options） BootstrapはFlexboxで構築されているが、不必要な再定義を多く追加...
いくつかのBootstrapのコンポーネントでは、コンテンツを配置するための第3の軸を提供することによってレイアウトを制御するのに役立つCSSプロパティである z-index を利用している。ナビゲーション、ツールチップ、ポップオーバー、モーダルなどを適切にレイヤー化するように設計されたBootstrapのデフォルトのz-indexスケールを使用。 これらは、理想的に競合を回避するのに十分な任意...
※参考 グリッドレイアウトの基本概念（MDN日本語版） CSS Grid Layout を極める！（基礎編）（Qiita） 一番分かりやすいCSS Grid Layoutの使い方ガイド（Web Design Trends） Bootstrapのデフォルトのグリッドシステムは、何百万人もの人々によって試され、10年以上テストされたCSSレイアウト技術の集大成を表している。ただし、新しいC...
Bootstrapユーティリティは、ユーティリティAPIを使用して生成され、Sassを経由してユーティリティクラスのデフォルトセットの変更や拡張に使用できる。このユーティリティAPIは、さまざまなオプションを備えたクラスのファミリーを生成するための一連のSassマップと関数に基づく。Sassマップに慣れていない場合は、公式のSassドキュメントを参照。 scss/_utilities.scss ...
アクセシビリティのヒント：意味を付加するために（"赤"とか"青"とか）カラー名を使用しても、視覚的な表示を提供するだけでスクリーン・リーダーのような支援技術のユーザーには伝わらない。意味は、（十分なカラーコントラストを持つ可視テキストなどの）文脈自体で明白にするか、.visually-hidden クラスで非表示にした追加テキストなどの代替手段を入れるように心がけて下さい。 背景色（Bac...
枠の罫線（Border）v5.0.0-beta1一部クラス名変更 罫線ユーティリティを使用して、要素枠の境界線の追加や削除をする。すべての罫線から選択するか、一度に1つずつ選択する。 罫線を追加（Additive） カスタム要素に罫線を追加： 罫線の種類 四面全てに線：.border 一面に線 上部に線：.border-top 行末側に線：.border-endv5.0.0-beta1クラス名...
アクセシビリティのヒント：意味を付加するために（"赤"とか"青"とか）カラー名を使用しても、視覚的な表示を提供するだけでスクリーン・リーダーのような支援技術のユーザーには伝わらない。意味は、（十分なカラーコントラストを持つ可視テキストなどの）文脈自体で明白にするか、.visually-hidden クラスで非表示にした追加テキストなどの代替手段を入れるように心がけて下さい。 文字色（Col...
使い方（How it works） レスポンシブな表示ユーティリティクラスを使用して、displayプロパティの値を変更。Bootstrapでは意図的に表示可能なすべての値のサブセットのみをサポート。クラスは、必要に応じてさまざまなエフェクトが組み合わせられる。 記法について（Notation） xs から xxl までのすべてのブレークポイントに適用されるユーティリティクラスを表示するには、そ...
※参考 CSS flexible box の利用（MDN日本語版） flex レイアウト詳説〜Flex Box Layout（IT工房） Flex動作を有効にする（Enable flex behaviors） 表示ユーティリティを適用してFlexコンテナを作成し、直接の子要素をFlexアイテムに変換。Flexコンテナとアイテムは、追加のFlexプロパティを使用してさらに変更できる。 見本...