スポンサースポンサーになる

タイポグラフィ

Framework7には、追加のスタイリングとフォーマットに役立つ多くの追加CSSヘルパークラスが用意されています。

コンテンツ間隔

マージン

マージン
marginすべての辺にマージンを適用します。
margin-left左側にマージンを適用します。
margin-right右側にマージンを適用します。
margin-top上側にマージンを適用します。
margin-bottom下側にマージンを適用します。
margin-horizontal左右にマージンを適用します。
margin-vertical上下にマージンを適用します。
margin-halfすべての辺に半分値のマージンを適用します。
margin-left-half左側に半分値のマージンを適用します。
margin-right-half右側に半分値のマージンを適用します。
margin-top-half上側に半分値のマージンを適用します。
margin-bottom-half下側に半分値のマージンを適用します。
margin-horizontal-half左右に半分値のマージンを適用します。
margin-vertical-half上下に半分値のマージンを適用します。
no-marginマージンを削除します。
no-margin-left左マージンを削除します。
no-margin-right右マージンを削除します。
no-margin-top上マージンを削除します。
no-margin-bottom下マージンを削除します。
no-margin-horizontal左右のマージンを削除します。
no-margin-vertical上下のマージンを削除します。

例えば

<p class="margin-left">Text with left margin</p>
<p class="margin-right">Text with right margin</p>

パディング

パディング
paddingすべての辺にパディングを適用します。
padding-left左側にパディングを適用します。
padding-right右側にパディングを適用します。
padding-top上側にパディングを適用します。
padding-bottom下側にパディングを適用します。
padding-horizontal左右にパディングを適用します。
padding-vertical上下にパディングを適用します。
padding-halfすべての辺に半分値のパディングを適用します。
padding-left-half左側に半分値のパディングを適用します。
padding-right-half右側に半分値のパディングを適用します。
padding-top-half上側に半分値のパディングを適用します。
padding-bottom-half下側に半分値のパディングを適用します。
padding-horizontal-half左右に半分値のパディングを適用します。
padding-vertical-half上下に半分値のパディングを適用します。
no-paddingパディングを削除します。
no-padding-left左パディングを削除します。
no-padding-right右パディングを削除します。
no-padding-top上パディングを削除します。
no-padding-bottom下パディングを削除します。
no-padding-horizontal左右のパディングを削除します。
no-padding-vertical上下のパディングを削除します。

例えば

<p class="padding-left">Text with left padding</p>
<p class="padding-right">Text with right padding</p>

フロート要素

float-left要素は、その包含ブロックの左側にフロートされます。
float-right要素は、その包含ブロックの右側にフロートされます。
float-noneフロートを無効にします。

例えば

<div class="float-left">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda earum tempora, voluptatem quas? Beatae cumque, ea porro, eius sed nemo impedit tempora nesciunt, nam necessitatibus quis animi. Nobis, dicta, sit!</p>
</div>
<div class="float-right">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda earum tempora, voluptatem quas? Beatae cumque, ea porro, eius sed nemo impedit tempora nesciunt, nam necessitatibus quis animi. Nobis, dicta, sit!</p>
</div>

テキスト配置

text-align-leftインラインコンテンツは、ラインボックスの左端に配置されます。
text-align-rightインラインコンテンツは、ラインボックスの右端に配置されます。
text-align-centerインラインコンテンツは、ラインボックスの中央に配置されます。
text-align-justifyインラインコンテンツは、両端揃えされます。

例えば

<p class="text-align-center">Center aligned text</p>
<p class="text-align-right">Right aligned text</p>

要素の表示

display-block要素はブロック要素として表示されます。
display-inline要素はインライン要素として表示されます。
display-inline-block要素はインラインブロック要素として表示されます。
display-flex要素はフレックス要素として表示されます。
display-inline-flex要素はインラインフレックス要素として表示されます。
display-none要素は非表示になります。

例えば

<div class="display-flex">
  <div>Hello</div>
  <div>World!</div>
</div>

フレックスボックス

フレックスモデルを制御するためのいくつかのヘルパークラスがあります。

フレックス方向

CSSの`justify-content`プロパティは、ブラウザがコンテナのメイン軸に沿ってコンテンツアイテム間のスペースと周囲のスペースをどのように分配するかを定義します。

flex-direction-row方向は線状にレイアウトされます。
flex-direction-row-reverse`flex-direction-row`と似ていますが、反転しています。
flex-direction-column行が積み重ねられる方向です。
flex-direction-column-reverse`flex-direction-column`と似ていますが、反転しています。

ジャスティファイコンテンツ

CSSの`justify-content`プロパティは、ブラウザがコンテナのメイン軸に沿ってコンテンツアイテム間のスペースと周囲のスペースをどのように分配するかを定義します。

justify-content-flex-start先頭からフレックスアイテムを配置します。
justify-content-centerアイテムを中心付近に配置します。
justify-content-flex-end末尾からフレックスアイテムを配置します。
justify-content-space-betweenアイテムを均等に分散します。最初のアイテムは先頭に、最後のアイテムは末尾に揃えられます。
justify-content-space-aroundアイテムを均等に分散します。アイテムは両端に半分サイズのスペースを持ちます。
justify-content-space-evenlyアイテムを均等に分散します。アイテムの周囲に均等なスペースがあります。
justify-content-stretchアイテムを均等に分散します。 'auto'サイズのアイテムはコンテナに合わせて伸縮します。
justify-content-start先頭からアイテムを配置します。
justify-content-end末尾からアイテムを配置します。
justify-content-left左からアイテムを配置します。
justify-content-right右からアイテムを配置します。

アラインコンテンツ

CSSの`align-content`プロパティは、ブラウザがフレックスボックスコンテナとして機能するコンテナのクロス軸に沿って、コンテンツアイテム間のスペースと周囲のスペースをどのように分配するかを定義します。

align-content-flex-start先頭からフレックスアイテムを配置します。
align-content-flex-end末尾からフレックスアイテムを配置します。
align-content-centerアイテムを中心付近に配置します。
align-content-space-betweenアイテムを均等に分散します。最初のアイテムは先頭に、最後のアイテムは末尾に揃えられます。
align-content-space-aroundアイテムを均等に分散します。アイテムは両端に半分サイズのスペースを持ちます。
align-content-stretchアイテムを均等に分散します。 'auto'サイズのアイテムはコンテナに合わせて伸縮します。

アラインアイテム

CSSの`align-items`プロパティは、ブラウザがコンテナのクロス軸に沿ってフレックスアイテム間のスペースと周囲のスペースをどのように分配するかを定義します。これは、`justify-content`と同様に機能しますが、垂直方向です。

align-items-flex-start先頭からフレックスアイテムを配置します。
align-items-flex-end末尾からフレックスアイテムを配置します。
align-items-centerアイテムを中心付近に配置します。
align-items-stretchアイテムを均等に分散します。 'auto'サイズのアイテムはコンテナに合わせて伸縮します。

アラインセルフ

align-self CSSプロパティは、`align-items`の値を上書きして、現在のフレックスラインのフレックスアイテムを配置します。アイテムのクロス軸マージンが`auto`に設定されている場合、`align-self`は無視されます。

align-self-flex-startフレックスアイテムを先頭に配置します。
align-self-flex-endフレックスアイテムを末尾に配置します。
align-self-centerアイテムを中心付近に配置します。
align-self-stretch'auto'サイズのアイテムはコンテナに合わせて伸縮します。

フレックスシュリンク

flex-shrink CSSプロパティは、フレックスアイテムのフレックスシュリンク係数を指定します。フレックスアイテムのデフォルトの幅がフレックスコンテナよりも広い場合、フレックスアイテムはflex-shrinkの数値に従ってコンテナを埋めるように縮小されます。

flex-shrink-0CSSプロパティ`flex-shrink: 0`を設定します。
flex-shrink-1CSSプロパティ`flex-shrink: 1`を設定します。
flex-shrink-2CSSプロパティ`flex-shrink: 2`を設定します。
flex-shrink-3CSSプロパティ`flex-shrink: 3`を設定します。
flex-shrink-4CSSプロパティ`flex-shrink: 4`を設定します。
flex-shrink-5CSSプロパティ`flex-shrink: 5`を設定します。
flex-shrink-6CSSプロパティ`flex-shrink: 6`を設定します。
flex-shrink-7CSSプロパティ`flex-shrink: 7`を設定します。
flex-shrink-8CSSプロパティ`flex-shrink: 8`を設定します。
flex-shrink-9CSSプロパティ`flex-shrink: 9`を設定します。
flex-shrink-10CSSプロパティ`flex-shrink: 10`を設定します。

例えば

<div class="display-flex justify-content-space-between align-items-flex-start">
  <div class="flex-shrink-0">Item 1</div>
  <div class="align-self-center">Item 2</div>
  <div class="align-self-flex-end">Item 3</div>
</div>

CSS変数

以下は、関連するCSS変数（CSSカスタムプロパティ）のリストです。

:root {
  --f7-typography-padding: 16px;
  --f7-typography-margin: 16px;
}
このドキュメントを改善する
このページで