YOUR SITE NAME

注意点

サイト内リンクには、アドレス.htmlの直後に「#pagetop」を記載してください。記載しない場合、タブレット、スマホで表示した際に、コンテンツのトップではなく、最上部のヘッダー（メニュー等）が表示されます。

文字と装飾

<p>上下に余白が付きます。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<a>リンク

<strong>重要
<em>強調
class="marker"マーカー
class="label"ラベル

class="right"をつけると、文字が右寄せになります

class="center"をつけると、文字が中央寄せになります

見出し

class="headingL"見出しは、ページ最上部右側に固定されます。当ページ最上部右側「ＳＡＭＰＬＥ」を参照ください。

class="headingM"見出し

class="headingS"見出し

class="headingSS"見出し

※アルファベットはすべて自動的に大文字になります

入力フォーム、ボタン

リスト

<ul class="list">

• リスト１
• リスト２
• リスト３

<ol class="list-number">

1. リスト１
2. リスト２
3. リスト３

<dt class="gridlist__label">項目

<dd class="gridlist__text">説明文。Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<dt class="gridlist__label">項目

<dd class="gridlist__text">説明文。Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

枠囲みボックス

<div class="box">

レイアウト

class=“flex”での横並び

文字

画像

class=“grid”での横並び

文字

画像