Your Site Name

文字と装飾

<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"見出しは最上部「Sample」を参照。
<main class="mainwrapper"></main>の中で一回しか使えません。

class="headingM"見出しは<section></section>の中で一回しか使えません。

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”での横並び

文字

画像