レイアウト | スタイルガイド

コンテンツの包括的なラッピング

<main>タグ直下にコンテンツ全体を囲う<section>要素を追加してください。


  <main>
    <section class="t-container">
      <!-- コンテンツ群が入ります -->
    </section>
  </main>

コンテンツエリア毎のラッピング

各コンテンツエリアは「t-block」クラスを付与したタグで囲ってください。
※一部UIについては「t-block」クラス内に配置しない場合があります。


  <div class="t-block">
    <!-- 各コンテンツが入ります -->
  </div>

HTML全体を見ると次のようになります。

例）複数のコンテンツエリアを配置した例


  <html>
    <head></head>
    <body>
      <main>
        <section class="t-container">

          <div class="t-block">
            <!-- コンテンツ内容 -->
          </div><!-- /.t-block -->

          <div class="t-block">
            <!-- コンテンツ内容 -->
          </div><!-- /.t-block -->

          <div class="t-block">
            <!-- コンテンツ内容 -->
          </div><!-- /.t-block -->

          <div class="t-block">
            <!-- コンテンツ内容 -->
          </div><!-- /.t-block -->

        </section><!-- /.t-container -->
       <main>
    </body>
  </html>

スタイルの追加

独自スタイルを追加したい場合は、「aioi2020.css」の下にcssを追加してください。

例）「custom.css」を追加する例


  <html>
    <head>
      <link rel="stylesheet" href="css/aioi2020.css">
      <!-- カスタムスタイルを追加 -->
      <link rel="stylesheet" href="path/to/custom.css">
    </head>
      <body>
        <main>
          <section class="t-container">