TRISITE

MENU

HTMLパーツ

Grid

同じ大きさの枠をマス目状に並べます。指定した個数で自動的に折り返します。
.gridを.containerで囲むとコンテナクエリに対応します。

最大3カラムのグリッド

<div class="grid grid-column-3">
  <article>商品A</article>
  <article>商品B</article>
  <article>商品C</article>
  <article>商品D</article>
</div>

最大4カラムのグリッド

<div class="grid grid-column-4">
  <article>商品A</article>
  <article>商品B</article>
  <article>商品C</article>
  <article>商品D</article>
</div>

コンテナクエリのグリッド

<div class="container">
  <div class="grid grid-column-3">
    <article>商品A</article>
    <article>商品B</article>
    <article>商品C</article>
  </div>
</div>
class概要場所必須
gridグリッドコンテナを作ります。初期値のgapが設定されます。外側〇
grid-column-[2-5]グリッドアイテムを横方向に並べる最大数を指定します。外側〇
half-gapgapの値を標準の半分にします。外側
grid-top外側に記載すると全てのグリッドアイテムを上に揃えます。
内側に記載するとそのグリッドアイテムを上に揃えます。		内/外
grid-middle外側に記載すると全てのグリッドアイテムを上下中央に揃えます。
内側に記載するとそのグリッドアイテムを上下中央に揃えます。		内/外
grid-bottom外側に記載すると全てのグリッドアイテムを下に揃えます。
内側に記載するとそのグリッドアイテムを下に揃えます。		内/外

Flexbox

大きさが等しい、または異なる枠を並べます。
.flexを.containerで囲むとコンテナクエリに対応します。

1:3のフレックスボックス

<div class="flex">
  <article class="g1">
  <img src="12345.png">
  </article>
  <p class="g3">幅の広いテキスト領域です。</p>
</div>

スマホサイズのみ順序が入れ替わるフレックスボックス

<div class="flex">
  <article class="g1 sp-order2">
  <img src="12345.png">
  </article>
  <p class="g3 sp-order1">幅の広いテキスト領域です。</p>
</div>

ピクセル幅指定と組み合わせたフレックスボックス

<div class="flex">
  <article class="w200">
  <img src="12345.png" width="100%">
  </article>
  <p class="g1">幅の広いテキスト領域です。</p>
</div>
class概要場所必須
flexフレックスコンテナを作ります。初期値のgapが設定されます。外側〇
flex-nowrapフレックスアイテムを折り返さないようにします。外側
half-gapgapの値を標準の半分にします。外側
g[1-5]フレックスアイテムの幅を比で表します。g3のフレックスアイテムとg1のフレックスアイテムが並んでいる場合、3:1の比で表示されます。CSSのflexプロパティと同じです。内側
order[1-5]フレックスアイテムの表示順を変更します。CSSのorderプロパティと同じです。内側
tb-order[1-5]フレックスアイテムの表示順をタブレットサイズ以下（720px以下）のみ変更します。内側
sp-order[1-5]フレックスアイテムの表示順をスマホサイズ時（520px以下）のみ変更します。内側
flex-top外側に記載すると全てのフレックスアイテムを上に揃えます。
内側に記載するとそのフレックスアイテムを上に揃えます。		内/外
flex-middle外側に記載すると全てのフレックスアイテムを上下中央に揃えます。
内側に記載するとそのフレックスアイテムを上下中央に揃えます。		内/外
flex-bottom外側に記載すると全てのフレックスアイテムを下に揃えます。
内側に記載するとそのフレックスアイテムを下に揃えます。		内/外
flex-leftフレックスアイテムを左寄せにします。外側
flex-centerフレックスアイテムを中央寄せにします。外側
flex-rightフレックスアイテムを右寄せにします。外側

Paging

ページング（ページネーション）を美しく表示します。

ulタグを使用したページング

<ul class="paging">
  <li><span>1</span></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
</ul>

divタグを使用したページング

<div class="paging">
  <div>1</div>
  <a href="">2</a>
  <a href="">3</a>
</div>
class概要場所必須
pagingページングを整えます。外側〇

Scroll table

tableの2列目以降をスクロールして表示します。

セル幅が自由なスクロールテーブル

<div class="scroll-table">
  <table class="free">
    <tr><th class="w100">見出し1</th><td>項目1</td><td>項目2</td></tr>
    <tr><th>見出し2</th><td>項目3</td><td>項目4</td></tr>
  </table>
</div>
class概要場所必須
scroll-table直下のtableをスクロールテーブルとして表示します。このtableがスクロールテーブルです。外側〇

Block table

スマホサイズ時にレイアウトが切り替わるtableです。

通常のブロックテーブル

<table class="block">
  <tr><th>見出し1</th><td>項目1</td><td>項目2</td></tr>
  <tr><th>見出し2</th><td>項目3</td><td>項目4</td></tr>
</table>
class概要場所必須
blocktableをブロックテーブルとして表示します。外側〇

Hamburger Menu

JavaScriptがなくても機能するアクセシブルなハンバーガーメニューです。
jQueryとの組み合わせでさらにリッチになります。

二本線のハンバーガーメニュー

<details class="menu-trigger">
  <summary><span></span></summary>
  <nav class="main-menu slide-right">
    <ul>
    <li><a href="">メニュー 1</a></li>
    <li><a href="">メニュー 2</a></li>
    <li><a href="">メニュー 3</a></li>
    <li><a href="">メニュー 4</a></li>
    </ul>
  </nav>
</details>

三本線のハンバーガーメニュー

<details class="menu-trigger">
  <summary><div><span></span></div></summary>
  <nav class="main-menu slide-right">
    <ul>
    <li><a href="">メニュー 1</a></li>
    <li><a href="">メニュー 2</a></li>
    <li><a href="">メニュー 3</a></li>
    <li><a href="">メニュー 4</a></li>
    </ul>
  </nav>
</details>

二本線＋MENU文字付きの
ハンバーガーメニュー

<details class="menu-trigger">
  <summary><span></span>MENU</summary>
  <nav class="main-menu slide-right">
    <ul>
    <li><a href="">メニュー 1</a></li>
    <li><a href="">メニュー 2</a></li>
    <li><a href="">メニュー 3</a></li>
    <li><a href="">メニュー 4</a></li>
    </ul>
  </nav>
</details>

ご注意

detailstタグ、summaryタグとその内側のタグの組み合わせは変更できません。
navタグとその内側のタグは自由に変更できます。
また、jQueryを使用しない場合はnavタグ部分をdetailstタグ直後（detailstタグの外）に設置することでレスポンシブに対応できます。
</body>の直前などに「<div id="nav-cover"></div>」を設置しておくことで、jQuery使用時に背景にエフェクトがかかります。

class概要場所必須
menu-triggerdetailsタグに記載することでハンバーガーメニューを表示します。details〇
main-menuメニュー部分に記載することで表示・非表示が切り替わります。メニュー〇
slide-rightハンバーガーメニューを画面右に配置し、メニューは右端から出入りします。メニュー〇
slide-leftハンバーガーメニューを画面左に配置し、メニューは左端から出入りします。