CSS

Foundationで用意されているCSSの説明。

見出し

<h1>〜<h6>の設定。Bootstrap3のような.h1〜.h6までのサイズのみ同じ大きさにするスタイル設定はありません。

<h1>〜<h6>タグのみ使用した場合

それぞれ文字サイズは下記の表のように指定されています。font-weightは共通でnormalの設定がされています。また、見出しタグ内に、<small>タグでサブテキストも追加できます。それぞれ各見出しの60%の大きさで灰色で表示されます。

見出し 文字サイズ

h1 見出し サブテキスト

34px

h2 見出し サブテキスト

27px

h3 見出し サブテキスト

22px

h4 見出し サブテキスト

18px
h5 見出し サブテキスト
18px
h6 見出し サブテキスト
16px
			<h1>h1. 見出し <small>サブテキスト</small></h1>
			<h2>h2. 見出し <small>サブテキスト</small></h2>
			<h3>h3. 見出し <small>サブテキスト</small></h3>
			<h4>h4. 見出し <small>サブテキスト</small></h4>
			<h5>h5. 見出し <small>サブテキスト</small></h5>
			<h6>h6. 見出し <small>サブテキスト</small></h6>

サブヘッダー

Foundation5では、.subheaderというクラスが用意されていて各見出しに追加することで少し明度の高い(灰色の)見出しになります。

見出し

h1 見出し サブヘッダー

h2 見出し サブヘッダー

h3 見出し サブヘッダー

h4 見出し サブヘッダー

h5 見出し サブヘッダー
h6 見出し サブヘッダー
      <h1 class="subheader">h1 見出し サブヘッダー</h1>
      <h2 class="subheader">h2 見出し サブヘッダー</h2>
      <h3 class="subheader">h3 見出し サブヘッダー</h3>
      <h4 class="subheader">h4 見出し サブヘッダー</h4>
      <h5 class="subheader">h5 見出し サブヘッダー</h5>
      <h6 class="subheader">h6 見出し サブヘッダー</h6>
      
© 2015 foudation5-guide.com