レイアウトコンテナ

ヘッダー・フッター・ページラッパー

Startify-UIでは、ページ全体を内包するページラッパー要素を用いて、ヘッダー、フッターならびにコンテンツ要素を適切にレイアウトするためのスタイルが用意されています。body要素直下の構造を下記のようにマークアップすることで、ヘッダーは上部に、フッターは下部に、コンテンツ要素はその内容に関わらず間のスペースを埋めるように縦方向へ広がるよう表示領域に合わせて整列させて配置することができます。

su-layoutクラスが設定された要素は、子要素として含むヘッダー、フッターならびにコンテンツ要素がそれぞれグリッドレイアウトで配置させているため、grid-templateプロパティの値を設定し、スタイルを上書きすることでHTMLの構造を保ちながら、柔軟にレイアウトを作成することができます。

<body>
  <!-- ページラッパー要素 -->
  <div class="su-layout">
    <!-- ヘッダー要素 -->
    <header class="su-header"></header>
    <!-- コンテンツ要素 -->
    <main class="su-main"></main>
    <!-- フッター要素 -->
    <footer class="su-footer"></footer>
  </div>
</body>

クラス名の一覧

.su-layout	body要素直下に配置するページラッパー要素です。ヘッダーやフッターを内包します。
.su-header	ヘッダー要素です。デフォルトでビューポートの上端に配置されます。
.su-footer	フッター要素です。デフォルトでビューポートの下端に配置されます。
.su-main	コンテンツ要素です。デフォルトでビューポートの中央に広がって配置されます。