財団CSSリファレンス
財団のデフォルト
財団は、ブラウザのデフォルトのフォントサイズ（使用するfont-size:100% ）。 ほとんどのデスクトップブラウザのデバイスの場合、デフォルトのフォントサイズは16pxにあります。 モバイルデバイス向けのブラウザの場合は、デフォルトのフォントサイズは12ピクセルです。 デフォルトのフォントは"Helvetica Neue"に、行の高さのデフォルトは1.5 。
これらの設定は、に適用され<body>要素内の要素。
また、 <p>外部要素との距離（マージン下）の底部は、1.6の1.25rem、行の高さです。
テキスト
次のHTML要素は、財団は、ブラウザのデフォルトのスタイルを使用しませんレンダリング別々のスタイルを設定します。 オンラインインスタンスを表示するには、 "してみてください」をクリックします。
| 要素 | 説明 | オンラインの例 |
|---|---|---|
| <H1> - <H6> | H1 - H6の見出し | 試します |
| <A> | ライトブルーリンク、リンクにマウスを移動下線が表示されます | 試します |
| <小> | ライトグレーテキスト字幕 | 試します |
| <BLOCKQUOTE> | 引用モジュール | 試します |
| <STRONG> | 太字テキスト | 試します |
| <エム> | イタリック | 試します |
| <略称> | 単語の省略形を指定し、要素が点在下線のテキストを表示されます使用し、マウスを上に移動プロンプトが表示されます | 試します |
| <Kbdを> | キーボード入力コマンドを受信：CTRL + P | 試します |
| <HR> | レベル | 試します |
| <コード> | 断片 | 試します |
| <UL> | 順不同リスト | 試します |
| <オル> | 順序付きリスト | 試します |
| <のDI> | 記述リスト | 試します |
テキストアラインメント
テキストの配置を変更するCSSクラスを使用します。
| カテゴリ | 説明 | 例 |
|---|---|---|
| .textの左 | 左揃えのテキスト | 試します |
| .textの右 | 右揃えテキスト | 試します |
| .text-センター | センター | 試します |
| .text-正当化 | 正当化 | 試します |
異なる画面サイズを合わせます
異なる画面サイズのテキストの配置を変更するCSSクラスを使用します。
| カテゴリ | 説明 | 例 |
|---|---|---|
| 左 | ||
| .smallテキスト、左 | 左のすべての画面サイズ | 試します |
| .small専用テキスト左 | 小さな画面左（幅40em未満） | 試します |
| .mediumテキスト、左 | 幅は、画面サイズ40.0625em左より大きい | 試します |
| .medium専用テキスト左 | 40.0625em幅は、画面サイズ64emの左側に整列します | 試します |
| .largeテキスト、左 | 幅は、画面サイズ64.0625em左より大きい | 試します |
| .large専用テキスト左 | 64.0625em幅は、画面サイズ90emの左側に整列します | 試します |
| .xlargeテキスト、左 | 幅は、画面サイズ90.0625em左より大きい | 試します |
| .xlarge専用テキスト左 | 90.0625em幅は、画面サイズ120emの左側に整列します | 試します |
| .xxlargeテキスト、左 | 幅は、画面サイズ120em左より大きい | 試します |
| 右揃え | ||
| .smallテキスト右 | 画面の寸法はすべて右寄せ | 試します |
| .small専用テキスト右 | 小さな画面右アライメント（40emよりも小さい幅） | 試します |
| .mediumテキスト右 | 画面のサイズは右詰め40.0625emよりも大きな幅 | 試します |
| .medium専用テキスト右 | 右の画面サイズ64emに合わせ40.0625em幅 | 試します |
| .largeテキスト右 | 画面のサイズは右詰め64.0625emよりも大きな幅 | 試します |
| .large専用テキスト右 | 右の画面サイズ90emに合わせ64.0625em幅 | 試します |
| .xlargeテキスト右 | 画面のサイズは右詰め90.0625emよりも大きな幅 | 試します |
| .xlarge専用テキスト右 | 右の画面サイズ120emに合わせ90.0625em幅 | 試します |
| .xxlargeテキスト右 | 画面右詰め120emのサイズよりも大きな幅 | 試します |
| 整列します | ||
| .smallテキストセンター | すべての画面サイズを合わせます | 試します |
| .small専用テキストセンター | 画面のサイズが小さい中心（40emよりも小さい幅） | 試します |
| .mediumテキストセンター | 画面のサイズよりも大きな幅が40.0625emを中心に | 試します |
| .medium専用テキストセンター | 64emの画面サイズに40.0625em幅が中心 | 試します |
| .largeテキストセンター | 画面のサイズよりも大きな幅が64.0625emを中心に | 試します |
| .large専用テキストセンター | 90emの画面サイズに64.0625em幅が中心 | 試します |
| .xlargeテキストセンター | 画面のサイズよりも大きな幅が90.0625emを中心に | 試します |
| .xlarge専用テキストセンター | 中心の画面サイズを120emする幅90.0625em | 試します |
| .xxlargeテキストセンター | 画面中心120emのサイズよりも大きな幅 | 試します |
| 正当化 | ||
| .smallテキスト-正当化 | すべての画面サイズが正当化されます | 試します |
| .small専用テキストを正当化 | 画面の小さいサイズを正当化する（40em未満の幅） | 試します |
| .mediumテキスト-正当化 | 幅は両端揃え40.0625em画面サイズよりも大きいです | 試します |
| .medium専用テキストを正当化 | 64emサイズ40.0625emに画面幅の両端を合わせます | 試します |
| .largeテキスト-正当化 | 幅は両端揃え64.0625em画面サイズよりも大きいです | 試します |
| .large専用テキストを正当化 | 90emサイズ64.0625emに画面幅の両端を合わせます | 試します |
| .xlargeテキスト-正当化 | 幅は両端揃え90.0625em画面サイズよりも大きいです | 試します |
| .xlarge専用テキストを正当化 | 120emする画面サイズ90.0625emの幅の両端を合わせます | 試します |
| .xxlargeテキスト-正当化 | 幅は両端揃え120em画面サイズよりも大きいです | 試します |
他の
| カテゴリ | 説明 | 例 |
|---|---|---|
| .LEFT | 左浮動要素 | 試します |
| .RIGHT | 右浮動要素 | 試します |
| .clearfix | クリアフロート - 親要素浮動要素に追加する必要があります | |
| .hide | 隠し要素（CSS display: none ） | 試します |
| .LISTインライン | 同じ行に配置されたすべての要素 | 試します |
| .lead | <p>要素がより顕著であるしましょう | 試します |
| .subheader | <H6>要素 - 明るい色の<H1>を設定します | 試します |