アクセシビリティ
アクセシビリティ（英: accessibility）とは、近づきやすさやアクセスのしやすさのことであり、利用しやすさ、交通の便などの意味を含む。現代では、広い種類の利用者が製品や建物、サービスなどを支障なく利用できる度合いを指していることが多い。 IT分野では、使いやすさや利用しやすさを意味するユーザビリティに近い意味として使われることが多い。この場合、技術に依存せずさまざまな情報...
アクセシビリティ（英: accessibility）とは、近づきやすさやアクセスのしやすさのことであり、利用しやすさ、交通の便などの意味を含む。現代では、広い種類の利用者が製品や建物、サービスなどを支障なく利用できる度合いを指していることが多い。 IT分野では、使いやすさや利用しやすさを意味するユーザビリティに近い意味として使われることが多い。この場合、技術に依存せずさまざまな情報...
RFSとは？（What is RFS?） BootstrapのサイドプロジェクトであるRFSは、当初はフォントサイズを変更するために開発されたユニットサイズ変更エンジンであった（故にResponsive Font Sizesの略でRFSと命名）。最新のRFSでは、margin, padding, border-radius, box-shadow などのユニットで、ほとんどのCSSプロパティの値...
まず慣れる（Get familiar） まず最初に「はじめに」のページを読んで、Bootstrapに慣れることを推奨。実行したらRTL（右書き）を有効にする方法についてこのページを読む。 また、RTLへのアプローチを強化するRTLCSSプロジェクトを読むことも推奨。 Bootstrapの右書き機能はまだ実験的なものなので、ユーザーのフィードバックによって進化していく。何か気づいたことや改善点...
ツールのセットアップ（Tooling setup）v5.0.0-alpha1ツール変更 Bootstrapは、npm scriptsを使用して、ドキュメントを作成し、ソースファイルをコンパイルできる。package.jsonには、コードのコンパイル、テストの実行などのためのこれらのスクリプトが組み込まれている。これらは、リポジトリやドキュメントの外部での使用を目的としたものではない。 構築システ...
.clearfix を親要素に追加することでfloatを簡単にクリアできる。ミックスインとしても使用できる。 実例（Examples） HTMLでの使用： 設定例 <div class="clearfix"></div> SCSSでミックスインを使用： custom.scss.element { @include clearfix(); } 以下の事例でクリアフィックスの...
概要（Overview） 文字&背景色ヘルパーは、.text-* ユーティリティと .bg-* ユーティリティの機能を1つのクラスにまとめたもの。Sassの color-contrast() 関数を使用して、特定の background-color のコントラスト color を自動的に決定。 注意！現在、CSSネイティブの color-contrast 機能はサポートされていないため、Sas...
リンクの色（Link colors）v5.3.0クラス追加、実例から変更 .link-{themecolor} クラスを使用して、リンクの色を強調する。.text-{color} クラスとは異なり、これらのクラスには :hover と :focus 状態がある。一部のリンクスタイルでは、比較的明るい前景色を使用しており、十分なコントラストを得るためには、暗い背景でのみ使用する必要がある。 注...
.focus-ring ヘルパーは :focus のデフォルトのアウトラインを削除し、より広範囲にカスタマイズ可能な box-shadow に置き換える。新しいシャドウは一連のCSS変数で構成されて:root レベルから継承され、任意の要素やコンポーネントに対して変更できる。 実例（Example） 下の見本をクリックし、Tab キー（進む）か Shift + Tab キー（戻る）を押すと、フ...
アイコンリンクヘルパーコンポーネントは、デフォルトのリンクスタイルを変更して外観を向上させ、アイコンとテキストのペアを素早く整列させる。配置はインラインのflexboxスタイルとデフォルトの gap 値によって設定され、アンダーラインはカスタムオフセットとカスタムカラーでスタイリングされる。アイコンは、関連するテキストの font-size に最も合うように自動的に 1em にサイズ調整される。...
最上部に固定（Fixed top） ビューポートの上部に、端から端まで要素を配置。プロジェクトの固定位置の影響を理解していることをご確認下さい。追加CSSを追加する必要がある場合もあり。 設定例 <div class="fixed-top">...</div> 【設定】 要素に .fixed-top を入れることで、その要素を画面の最上部に固定（ナビゲーション...