ページ制作用パーツ

使い方

パーツの使い方は、こちらの画面メモを参考にしてください。

メイン見出し

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

メイン見出し

メイン見出しmargin大き目

margin大き目

説明テキストが入ります説明テキストが入ります説明テキストが入ります説明テキストが入ります説明説明テキストが入ります説明テキストが入ります説明テキストが入ります説明テキストが入ります説明説明テキストが入ります説明テキストが入ります説明テキストが入ります説明テキストが入ります説明

クリップボックス

ボタン

リスト

• .c-list.c-list–disc > .c-list__item
• .c-list.c-list–disc > .c-list__item
• ながーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーい

• .c-list.c-list–disc > .c-list__item
• .c-list.c-list–disc > .c-list__item
• ながーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーい

1. .c-list.c-list–count > .c-list__item
2. .c-list.c-list–count > .c-list__item
3. .c-list.c-list–count > .c-list__item

1. .c-list.c-list–count–brackets > .c-list__item
2. .c-list.c-list–count–brackets > .c-list__item
3. .c-list.c-list–count–brackets > .c-list__item

• .c-list.c-list–comment （「※」付き注釈 ）
• .c-list.c-list–comment （「※」付き注釈 ）

• .c-list.c-list–comment.c-list–comment-num （「※」付き注釈 ）
• .c-list.c-list–comment.c-list–comment-num （「※」付き注釈 ）

• あいうえお
  • かきくけこ
    • さしすせそ
      • たちつてと
        • なにぬねの

text-align

only系

media query

@include mq-max(xs) {}

@include mq-min(xs) {}

強調

サンプルテキストを黒で目立たせたい

サンプルテキストをキーカラーで目立たせたい

サンプルテキストを赤で目立たせたい

サンプルテキストを$keyColorの下線で目立たせたい

サンプルテキストを黄色い下線で目立たせたい

hoverアクション

.u-hover–underline (aタグの中にspanタグが必要)

• リンク1
• リンク2
• あいうえお

aタグ

• target=”_blank”
• PDF
• 000-0000-000

テーブル

■ブロック(.c-tbl.c-tbl–block)

■Fixed(.c-tbl.c-tbl–fixed)

※テーブルがコンテンツを無視し、列に固定幅を使用できるようにする。
最初の行の幅は、テーブル全体の列幅を設定します。

■スクロール型(テーブルを.c-tbl__scrollで囲う)

アコーディオン

アコーディオンタイトル1

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

アコーディオンタイトル2

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

アコーディオンタイトル3

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

QA Ver(.c-accordion.c-accordion–faq)

アコーディオンタイトル1

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

アコーディオンタイトル2

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

アコーディオンタイトル3

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

2カラム

●●●●展　募集要項について

説明テキストが入ります説明テキストが入ります説明テキストが入ります説明テキストが入ります説明説明テキストが入ります説明テキストが入ります説明テキストが入ります説明テキストが入ります説明説明テキストが入ります説明テキストが入ります説明テキストが入ります説明テキストが入ります説明

子どもの創造力育成について

●●●●展　募集要項について

説明テキストが入ります説明テキストが入ります説明テキストが入ります説明テキストが入ります説明説明テキストが入ります説明テキストが入ります説明テキストが入ります説明テキストが入ります説明説明テキストが入ります説明テキストが入ります説明テキストが入ります説明テキストが入ります説明

子どもの創造力育成について

2カラム互い違い(.l-alternate)

見出しです1段目

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

見出しです2段目

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

見出しです3段目

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。