スポンサー
Support Framework7

ブロック / コンテンツブロック

    コンテンツブロックは、(主に)テキストコンテンツに追加のフォーマットや必要なスペースを追加するために設計されています。

    ブロック

    コンテンツブロック要素を追加するには、blockクラスを持つ<div>を追加します。

    <div class="block">
      <!-- ブロックコンテンツ -->
    </div>

    ブロック要素に特別なハイライトを追加するには、追加の block-strong クラスが必要です。

    <div class="block block-strong">
      <!-- ブロックコンテンツ -->
    </div>

    強いブロックの周りのヘアラインを削除するには、no-hairlinesクラスを追加する必要があります。

    <div class="block block-strong no-hairlines">
      <!-- ブロックコンテンツ -->
    </div>

    ブロックをインセットにするには、insetクラスを追加する必要があります。

    <div class="block block-strong inset">
      <!-- インセットブロックコンテンツ -->
    </div>

    大画面でのみブロックをインセットするには、代わりに medium-inset (>= 768px) クラスを使用する必要があります。

    <div class="block block-strong medium-inset">
      <!-- インセットブロックコンテンツ -->
    </div>

    このようなレスポンシブクラスの完全なセットについては、Grid docsをチェックしてください。それらは xsmall-inset, small-inset, medium-inset, large-inset, xlarge-inset です。

    ブロックタイトル

    ブロックやリストビューの前にブロックタイトルを付けるには、block-titleクラスの要素が必要です。

    <div class="block-title">Here comes block title</div>
    <div class="block">
      <!-- ブロックコンテンツ -->
    </div>
    
    <div class="block-title">Here comes the list</div>
    <div class="list">
      <!-- リストコンテンツ -->
    </div>
    
    <!-- 中サイズのブロックタイトル -->
    <div class="block-title block-title-medium">Medium Title</div>
    <div class="block">
      <!-- ブロックコンテンツ -->
    </div>
    
    <!-- 大きいサイズのブロックタイトル -->
    <div class="block-title block-title-large">Large Title</div>
    <div class="block">
      <!-- ブロックコンテンツ -->
    </div>

    ブロックヘッダー/フッター

    見出しやフッターのテキストが必要な場合は、Block Header要素を使用できます。この要素は、ブロック要素(ブロック、リストビュー)の内側と外側の両方で使用できます。

    <!-- ブロックの内側 -->
    <div class="block">
      <!-- ブロックヘッダ -->
      <div class="block-header">Block Header</div>
      ...
      <!-- ブロックフッター -->
      <div class="block-footer">Block Footer</div>
    </div>
    
    <!-- ブロックの外側 -->
    <div class="block-header">Block Header</div>
    <div class="block">
      ...
    </div>
    <div class="block-footer">Block Footer</div>
    
    <!-- ブロックタイトルの後 -->
    <div class="block-title">Block Title Here</div>
    <div class="block-header">Block Header</div>
    <div class="block">
      ...
    </div>
    <div class="block-footer">Block Footer</div>

    CSS Variables

    Below is the list of related CSS variables (CSS custom properties).

    :root {
      --f7-block-padding-horizontal: 16px;
      --f7-block-padding-vertical: 16px;
      --f7-block-font-size: inherit;
      --f7-block-text-color: inherit;
      --f7-block-header-margin: 10px;
      --f7-block-footer-margin: 10px;
      --f7-block-header-font-size: 14px;
      --f7-block-footer-font-size: 14px;
      --f7-block-title-text-transform: none;
      --f7-block-title-white-space: nowrap;
      --f7-block-title-medium-text-transform: none;
      --f7-block-title-large-text-transform: none;
      --f7-block-inset-side-margin: 16px;
      --f7-block-title-medium-text-color: #000;
      --f7-block-title-large-text-color: #000;
      --f7-block-strong-bg-color: #fff;
    }
    :root .theme-dark,
    :root.theme-dark {
      --f7-block-title-text-color: #fff;
      --f7-block-strong-border-color: rgba(255, 255, 255, 0.15);
      --f7-block-title-medium-text-color: #fff;
      --f7-block-title-large-text-color: #fff;
      --f7-block-strong-bg-color: #1c1c1d;
    }
    .ios {
      --f7-block-margin-vertical: 35px;
      --f7-block-strong-border-color: rgba(0, 0, 0, 0.22);
      --f7-block-title-text-color: #000;
      --f7-block-title-font-size: 16px;
      --f7-block-title-font-weight: 600;
      --f7-block-title-line-height: 20px;
      --f7-block-title-margin-bottom: 10px;
      --f7-block-title-medium-font-size: 22px;
      --f7-block-title-medium-font-weight: bold;
      --f7-block-title-medium-line-height: 1.4;
      --f7-block-title-large-font-size: 30px;
      --f7-block-title-large-font-weight: bold;
      --f7-block-title-large-line-height: 1.3;
      --f7-block-inset-border-radius: 8px;
      --f7-block-strong-text-color: #000;
      --f7-block-header-text-color: rgba(0, 0, 0, 0.45);
      --f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
    }
    .ios .theme-dark,
    .ios.theme-dark {
      --f7-block-header-text-color: rgba(255, 255, 255, 0.55);
      --f7-block-footer-text-color: rgba(255, 255, 255, 0.55);
      --f7-block-strong-text-color: #fff;
    }
    .md {
      --f7-block-margin-vertical: 32px;
      --f7-block-strong-text-color: inherit;
      --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
      --f7-block-title-font-size: inherit;
      --f7-block-title-text-color: rgba(0, 0, 0, 0.54);
      --f7-block-title-font-weight: 500;
      --f7-block-title-line-height: 16px;
      --f7-block-title-margin-bottom: 16px;
      --f7-block-title-medium-font-size: 24px;
      --f7-block-title-medium-font-weight: 500;
      --f7-block-title-medium-line-height: 1.3;
      --f7-block-title-large-font-size: 34px;
      --f7-block-title-large-font-weight: 500;
      --f7-block-title-large-line-height: 1.2;
      --f7-block-inset-border-radius: 4px;
      --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
      --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
    }
    .md .theme-dark,
    .md.theme-dark {
      --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
      --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
    }
    .aurora {
      --f7-block-margin-vertical: 32px;
      --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
      --f7-block-title-font-size: 16px;
      --f7-block-title-text-color: #000;
      --f7-block-title-font-weight: 600;
      --f7-block-title-line-height: 1.5;
      --f7-block-title-margin-bottom: 10px;
      --f7-block-title-medium-font-size: 22px;
      --f7-block-title-medium-font-weight: bold;
      --f7-block-title-medium-line-height: 1.4;
      --f7-block-title-large-font-size: 28px;
      --f7-block-title-large-font-weight: bold;
      --f7-block-title-large-line-height: 1.3;
      --f7-block-inset-border-radius: 8px;
      --f7-block-strong-text-color: inherit;
      --f7-block-header-text-color: rgba(0, 0, 0, 0.6);
      --f7-block-footer-text-color: rgba(0, 0, 0, 0.6);
    }
    .aurora .theme-dark,
    .aurora.theme-dark {
      --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
      --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
      --f7-block-strong-text-color: #fff;
    }
    

    Examples

    <div class="page">
      <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
          <div class="title">Block</div>
        </div>
      </div>
      <div class="page-content">
        <p>This paragraph is outside of content block. Not cool, but useful for any custom elements with custom
          styling.</p>
        <div class="block">
          <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet
            sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel,
            sagittis felis. </p>
        </div>
        <div class="block block-strong">
          <p>Here comes another text block with additional "<b>block-strong</b>" class. Praesent nec imperdiet diam.
            Maecenas vel lectus porttitor, consectetur magna nec, viverra sem. Aliquam sed risus dolor. Morbi
            tincidunt ut libero id sodales. Integer blandit varius nisi quis consectetur. </p>
        </div>
        <div class="block-title">Block title</div>
        <div class="block">
          <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis
            tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
        </div>
        <div class="block-title">Another ultra long content block title</div>
        <div class="block block-strong">
          <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis
            tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
        </div>
        <div class="block-title">Inset</div>
        <div class="block block-strong inset">
          <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis
            tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
        </div>
        <div class="block-title">Tablet Inset</div>
        <div class="block block-strong medium-inset">
          <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis
            tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
        </div>
        <div class="block-title">With Header & Footer</div>
        <div class="block">
          <div class="block-header">Block Header</div>
          <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet
            sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel,
            sagittis felis. </p>
          <div class="block-footer">Block Footer</div>
        </div>
        <div class="block-header">Block Header</div>
        <div class="block">
          <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet
            sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel,
            sagittis felis. </p>
        </div>
        <div class="block-footer">Block Footer</div>
        <div class="block block-strong">
          <div class="block-header">Block Header</div>
          <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet
            sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel,
            sagittis felis. </p>
          <div class="block-footer">Block Footer</div>
        </div>
        <div class="block-header">Block Header</div>
        <div class="block block-strong">
          <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet
            sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel,
            sagittis felis. </p>
        </div>
        <div class="block-footer">Block Footer</div>
        <div class="block-title block-title-large">Block Title Large</div>
        <div class="block block-strong">
          <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis
            tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
        </div>
        <div class="block-title block-title-medium">Block Title Medium</div>
        <div class="block block-strong">
          <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis
            tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
        </div>
      </div>
    </div>