比率ヘルパー
概要（About） 比率ヘルパーを使用して、<iframe>, <embed>, <video>, <object> などの外部コンテンツのアスペクト比を管理。これらのヘルパーは、デフォルトのHTML子要素（<div> や <img> など）でも使用できる。スタイルは、親要素の .ratio クラスから子に直接適用。 アスペ...
概要（About） 比率ヘルパーを使用して、<iframe>, <embed>, <video>, <object> などの外部コンテンツのアスペクト比を管理。これらのヘルパーは、デフォルトのHTML子要素（<div> や <img> など）でも使用できる。スタイルは、親要素の .ratio クラスから子に直接適用。 アスペ...
積み重ねヘルパーは、Bootstrapでレイアウトをすばやく簡単に作成するために、多数のFlexboxプロパティを適用するためのショートカットを提供。コンセプトと実装のすべての功績は、オープンソースのPylonプロジェクトにある。 注意！Flexboxを使用したギャップユーティリティのサポートが最近Safariに追加されたため、目的のブラウザサポートをご確認下さい。グリッドレイアウトに問題は...
リンクに .stretched-link を追加して、::after 擬似要素を経由して包含ブロックをクリック可能にする。ほとんどの場合、これは position: relative（相対位置）を持つ要素が .stretched-link クラスとのリンクを含めることで実現できる。CSSの位置がどのように機能するかを考えると、.stretched-link はほとんどのテーブル要素と混在させるこ...
より長いコンテンツの場合は、.text-truncate クラスを追加してテキストを省略記号で切り捨てられる。display: inline-block か display: block が必要。 実例（Examples） 見本 ブロックレベル このテキストは非常に長く、表示されると切り捨てられる。 インラインレベル このテキストは非常に長く、表示されると切り捨てられる。 ...
使い方（how it works） 縦仕切り線は <hr> 要素に着想を得ており、一般的なレイアウトで垂直方向の仕切りが作成できる。<hr> 要素と同じようなスタイルが設定されている。 線の幅は 1px min-height は 1em 色は currentcolor と opacity を経由して設定される 必要に応じて、スタイルを追加してカスタマイズする。 ...
.visually-hidden を使用すると、要素を視覚的に非表示にして（スクリーンリーダーなどの）支援技術に公開することができる。.visually-hidden-focusable を使用すると、デフォルトでは要素を視覚的に非表示にし、（キーボードのみのユーザーなど）フォーカスされたときに表示することができる。.visually-hidden-focusable はコンテナにも適用できる。:...
基本のコンセプト（Core concepts） ブレークポイントは、レスポンシブデザインの構成要素である。それらを使用して、特定のビューポートやデバイスサイズでレイアウトをいつ調整できるかを制御。 メディアクエリを使用して、ブレークポイントでCSSを構築。メディアクエリはCSSの機能であり、ブラウザとOSのパラメータのセットに基づいてスタイルを条件付きで適用。メディアクエリでは、通常 mi...
使い方（How they work） コンテナは、Bootstrapの最も基本的なレイアウト要素であり、デフォルトのグリッドシステムを使用する場合は必須。コンテナは、その中にコンテンツを包括、余白の調整、（場合によっては）中央に配置するのに使用。コンテナは入れ子もできるが、ほとんどのレイアウトは入れ子になったコンテナを必要としない。 Bootstrapには3つの異なるコンテナがある。 .co...
実例（Example） Bootstrapのグリッドシステムは、一連のコンテナ、行、列を使用して、コンテンツのレイアウトし、整列する。これはFlexboxで構築され、完全にレスポンシブする。以下は、グリッドシステムがどのように統合されるかについての例と詳細な説明。 初心者でFlexboxに不慣れなら、背景、用語、ガイドライン、コードスニペットについては、こちらのCSS Tricks flex...
注意！グリッド列の変更とカスタマイズ方法については、グリッドシステムの解説を必ず先に読んで下さい。 使い方（How they work） 列はグリッドのFlexbox構造上に構築される。Flexboxとは、行レベルで個々の列を変更したり、列のグループを変更したりするためのオプションがある。列の拡大縮小やその他の変更方法を選択する。 グリッドレイアウトを構築する場合、すべてのコンテンツ...