調整用スタイル 装飾用スタイル 見出し テキスト リンク リスト データリスト ボタン 画像 YouTube動画 画像（モーダル） 画像とテキスト カードリンク 表組み メッセージ タブ トグル カラム

調整用スタイル

フォントサイズ



ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。


ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。


ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。


ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。


ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。


ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。


ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。


ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。


ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。


ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

フォントウェイト



これは太字です。これはダミーテキストです。ここにテキストが入ります。これは太字です。これはダミーテキストです。ここにテキストが入ります。

マージン

0～50pxまで5の倍数が指定できます。



下に30px


上に30px


左に30px


右に30px左に50px

パディング

0～50pxまで5の倍数が指定できます。



下に30px


上に30px


左に30px


右に30px左に50px

水平方向位置調整用



左寄せ


中央寄せ


右寄せ

装飾用スタイル

ボーダーボックス




  
ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

背景色ボックス




  
ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

見出し



見出し見出し（サブ）




見出し




見出し（リンク付き）リンクリンク




見出し

テキスト



ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。


ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。


ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。




テキストテキストリンクリンクリンクリンクテキストテキストリンクリンクリンクリンクテキストテキストリンクリンクリンクリンクテキストテキストリンクリンクリンクリンクテキストテキストリンクリンクリンクリンク




リンクリンクリンクリンク


リンクリンクリンクリンク


リンクリンクリンクリンク


リンクリンクリンクリンク


リンクリンクリンクリンク

「.c-anchor--colX」の「X」を変更するとカラム数（2～5）が変わります。
スマホ時は2列になります。 




  アンカーリンク
  アンカーリンクアンカーリンクンクアンカーリンクアンカーリンクアンカーリンク
  アンカーリンク
  アンカーリンク
  アンカーリンク

リスト



    
  
  • 通常リスト通常リスト通常リスト通常リスト通常リスト通常リスト通常リスト通常リスト通常リスト通常リスト通常リスト通常リスト通常リスト通常リスト通常リスト通常リスト通常リスト通常リスト通常リスト通常リスト通常リスト通常リスト
    • 
  
  • 通常リスト
    • 
  
  • 通常リスト
    • 





    
  
  • ※注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト
    • 
  
  • ※注釈リスト
    • 
  
  • ※注釈リスト
    • 





    
  
  1. 1.数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト
    2. 
  
  2. 2.数字リスト
    3. 
  
  3. 3.数字リスト
    4. 





    
  
  1. （1）数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト数字リスト
    2. 
  
  2. （2）数字リスト
    3. 
  
  3. （3）数字リスト
    4.

データリスト




  
見出し

  

    

      
ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

    

    

      
ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

ボタン



ボタン




ボタン（別バージョン）




ボタン（フル）




ボタン




ボタン




ボタン

画像




  
  
キャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプション







  
  
キャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプション







  
  
キャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプション

Youtube動画

画像（モーダル）

画像とテキスト




  

    
    
キャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプション

  

  

    
ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

  







  

    
    
キャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプション

  

  

    ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
  







  

    
    
キャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプション

  

  

    ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
  







  

    
    
キャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプション

  

  

    ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
  







  

    
    
キャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプション

  

  

    ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

カードリンク



  
見出し

  

    
ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

  




    
2カラム

    



  
見出し





  

    
ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

  





  

  
見出し

  

    
ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

  





  

    
ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

  

  





  

  

    
ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

  





  

  

    
ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

  





  

  
見出し





  

  
見出し

表組み




  

    
      
      
    
    

      見出し
      ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
    

    

      見出し
      ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
    

    

      見出し
      ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
    

  







  

    
      
      
    
    

      見出し
      ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
    

    

      見出し
      ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
    

    

      見出し
      ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

メッセージ




  
ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

  

    

      
ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

      
ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

    

    
キャプションキャプションキャプションキャプションキャプションキャプション

タブ

「.c-grid--colX」の「X」を変更するとカラム数（1～7）が変わります。
スマホ時は「c-grid-sp--colX」の「X」を変更するとカラム数（1～7）が変わります。 




  
    
    
  • 
      
    タブ1
    
    
    • 
    
  • 
      
    タブ2
    
    
    • 
    
  • 
      
    タブ3
    
    
    • 
    
  • 
      
    タブ4
    
    
    • 
  

  

    
タブコンテンツ1

  

  

    
タブコンテンツ2

  

  

    
タブコンテンツ3

  

  

    
タブコンテンツ4

トグル

「.js-toggle-content」に「.js-toggle-content--open」を付与すると開いた状態で表示されます。




  
トグル1

  

    
トグルコンテンツ1

  

  
トグル2

  

    
トグルコンテンツ2

カラム

「.c-grid--colX」の「X」を変更するとカラム数（1～7）が変わります。
スマホ時は「c-grid-sp--colX」の「X」を変更するとカラム数（1～7）が変わります。
横間隔は「.c-grid--sXX」、縦間隔は「.c-grid--lXX」の「X」で指定します（5～100）。
スマホ時の横間隔は「.c-grid-sp--sX」、縦間隔は「.c-grid-sp--lX」の「X」で指定します（5～100）。

【テキストのみ】



    
  
  • 
    
    ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
    
  
    • 
  
  • 
    
    ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
    
  
    • 
  
  • 
    
    ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
    
  
    •

【見出し+テキスト】

「data-mh」で見出しの高さを揃えています。



    
  
  • 
    
    見出し見出し（サブ）
    
    
    ここにテキストが入ります。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。これはダミーテキストです。
    
  
    • 
  
  • 
    
    見出し見出し見出し見出し見出し見出し見出し（サブ）
    
    
    ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
    
  
    • 
  
  • 
    
    見出し見出し（サブ）
    
    
    ここにテキストが入ります。これはダミーテキストです。
    
  
    • 
  
  • 
    
    見出し見出し見出し見出し見出し見出し見出し（サブ）
    
    
    ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
    
  
    • 
  
  • 
    
    見出し見出し（サブ）
    
    
    ここにテキストが入ります。これはダミーテキストです。
    
  
    •

【見出し2+テキスト】

「data-mh」で見出しの高さを揃えています。



    
  
  • 
    
    見出し
    
    
    ここにテキストが入ります。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。これはダミーテキストです。
    
  
    • 
  
  • 
    
    見出し
    
    
    ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
    
  
    • 
  
  • 
    
    見出し
    
    
    ここにテキストが入ります。これはダミーテキストです。
    
  
    • 
  
  • 
    
    見出し
    
    
    ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
    
  
    • 
  
  • 
    
    見出し
    
    
    ここにテキストが入ります。これはダミーテキストです。
    
  
    •

【画像+テキスト】

「data-mh」で画像の高さを揃えています。



    
  
  • 
    
    
      
    
    
    
    ここにテキストが入ります。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。これはダミーテキストです。
    
  
    • 
  
  • 
    
    
      
    
    
    
    ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
    
  
    • 
  
  • 
    
    
      
    
    
    
    ここにテキストが入ります。これはダミーテキストです。
    
  
    • 
  
  • 
    
    
      
    
    
    
    ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
    
  
    • 
  
  • 
    
    
      
    
    
    
    ここにテキストが入ります。これはダミーテキストです。
    
  
    •