コンポーネントリスト
見出し（固定ページ）
ページで使う見出しです。
h2要素（中見出し）
h3要素（小見出し）
h4要素（孫見出し）
h5要素（ひ孫見出し）
文字の色
デザインの原則として、画面内にさまざまな文字の色があると、煩雑になって読みづらくなるとともに、軽薄な印象になることがわかっています。濫用はしないようにしてください。
プライマリカラー（ブランド色）
セカンダリカラー（ブランド色）
アクセントカラー（使用箇所はおさえる）
非活性のものに使う色
白文字
警告文字
span 要素につけることで、文中の一部だけ色を変えることもできます。 プライマリカラー、セカンダリカラー、アクセント、非活性、白文字、警告文字、このような感じです。
文字の装飾
HTMLでは以下のほかに、文字の装飾に「下線」や「斜体」も用意されていますが、アクセシビリティの観点で好ましくないため、それらは用いません。
下線: ウェブの一般的な表現として「リンクに下線をつける」という慣習があり、リンクと誤認されることがあるため。
斜体: 文字が読みづらくなるため。
ここが太文字になります。
またはこのように書いて太文字にする方法もあります。
ここがプライマリーカラーのマーカーで塗りつぶした感じになります。
ここがセカンダリーカラーのマーカーで塗りつぶした感じになります。
ここがアクセントカラーのマーカーで塗りつぶした感じになります。
文字ぞろえ
「文字ぞろえ」を指定したときは、かならず「スマホではどう見えるか」を確認してください。PCできれいに見えても、スマホの横幅にすると不格好に見える、ということがあります。（とくに文字ぞろえでは、デバイスによる見えかたの差が起きやすいです）
中央ぞろえ
右ぞろえ
リンク
リンクは文中にあるより、抜き出してあったほうがユーザーの目線を引くため、クリックがされやすくなります。「矢印アイコンつきリンク」を主に使うようにします。
ボタン
文字ぞろえ .text-center との組み合わせで、配置を調整することができます。
画像
alt 属性は「代替テキスト」と呼ばれるもので、Googleの画像検索や、スクリーンリーダーでの読み上げに使用されます。ただし実務ではほとんどのばあい、画像のそばに画像の内容を説明するテキストがあることが多く、内容が重複するため、alt 属性は「空（ alt="" ）」にするのが好ましいです。
.img-fluid を指定すると画面の横幅に合わせて、はみ出したときに自動でフィットします（以下の画像は横幅 2000px ですが、はみ出しているので自動調整されています。ふだんはこの .img-fluid を使ってください）
外側の要素に .text-center を指定しておくと、もし画面の横幅よりも小さいサイズのときも中央ぞろえで表示されます。
リスト
- 箇条書き
- 箇条書き
- 箇条書き
- 数字つきの箇条書き
- 数字つきの箇条書き
- 数字つきの箇条書き
- 箇条書きのネスト（入れ子）にするときはこのように書きます
- 箇条書きのネスト（入れ子）にするときはこのように書きます
- 子の箇条書き
- 子の箇条書き
- 子の箇条書き
- 箇条書きのネスト（入れ子）にするときはこのように書きます
表
表はかならず「スマホではどう見えるか」を確認してください。PCできれいに見えても、スマホの横幅にすると狭い範囲に詰まってとてもではないが読めない、ということがよくあります。
シンプルな表
| 列見出し（th） | 列見出し（th） | 列見出し（th） |
|---|---|---|
| 行見出し（th） | 値（td） | 値（td） |
| 行見出し（th） | 値（td） | 値（td） |
| 行見出し（th） | 値（td） | 値（td） |
枠線ありの表
| 列見出し（th） | 列見出し（th） | 列見出し（th） |
|---|---|---|
| 行見出し（th） | 値（td） | 値（td） |
| 行見出し（th） | 値（td） | 値（td） |
| 行見出し（th） | 値（td） | 値（td） |
ストライプ背景の表
| 列見出し（th） | 列見出し（th） | 列見出し（th） |
|---|---|---|
| 行見出し（th） | 値（td） | 値（td） |
| 行見出し（th） | 値（td） | 値（td） |
| 行見出し（th） | 値（td） | 値（td） |
ストライプ背景の表（罫線なし）
| 列見出し（th） | 列見出し（th） | 列見出し（th） |
|---|---|---|
| 行見出し（th） | 値（td） | 値（td） |
| 行見出し（th） | 値（td） | 値（td） |
| 行見出し（th） | 値（td） | 値（td） |
特定の行やセルの背景色を変えるとき
.table-primary をつけることで、行やセルの背景色を変えることができます。下記では3行目の行全体と、4行目のセルに .table-primary をつけています。
| 列見出し（th） | 列見出し（th） | 列見出し（th） |
|---|---|---|
| 行見出し（th） | 値（td） | 値（td） |
| 行に .table-primary を指定 | 値（td） | 値（td） |
| 行見出し（th） | セルに .table-primary を指定 | 値（td） |
セルの結合
セルの結合は rowspan （縦の結合）と colspan （横の結合）を使います。ただし、結合したぶん th 要素や td 要素を減らねばならず、HTML に不慣れだととても手間取るうえに、多くのセル結合がされた表はユーザーにとっても見づらいです。セルの結合はほかに方法が無いときのみ使用するようにします。
| 結合した列見出し（th） | 列見出し（th） | ||
|---|---|---|---|
| 列見出し（th） | 列見出し（th） | 列見出し（th） | 列見出し（th） |
| 行見出し（th） | 値（td） | 値（td） | 値（td） |
| 行見出し（th） | 値（td） | 値（td） | 値（td） |
| 行見出し（th） | 値（td） | 値（td） | 値（td） |
| 列見出し（th） | 列見出し（th） | 列見出し（th） | 列見出し（th） | |
|---|---|---|---|---|
| 行見出し（th） | 行見出し（th） | 値（td） | 値（td） | 値（td） |
| 結合した行見出し（th） | 行見出し（th） | 値（td） | 値（td） | 値（td） |
| 行見出し（th） | 値（td） | 値（td） | 値（td） |
囲み
コラムやちょっとした備考のようなものを記述するときに使います。
背景色
なお、文字をマーカーで塗りつぶした感じにする方法は、前述の「文字の装飾」項を参照してください。
角丸
矩形は角丸にすることで、印象を柔らかくすることができます。
引用
「引用」専用の囲み枠です。
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
アコーディオン
見出しをクリックするとアコーディオンとして開閉する囲み枠です。「 ___id___ 」を、そのアコーディオン固有のIDに書き換えて記述してください。
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
動画
下記のコードの iframe は YouTue の埋め込みコードに差し替えてください。
動画（自動再生）
動画を自動再生させたときは、動画ファイルをshopifyにアップロードしてvideoタグで読み込みます。
- 管理画面の「設定」→「ファイル」から動画ファイル（mp4）をアップロードしてリンクをコピーしてください。
- 下記コードのURL部分をコピーしたリンクに差し替えてください。
自動再生の条件
- ミュートの属性（muted）を必ずつける必要があります。これは、ブラウザの仕様上「音声を鳴らさない」という条件の元で自動再生が有効になるためです。
レイアウトした部品
以下は、複雑なレイアウトをしたサンプル部品です。かならず「スマホではどう見えるか」を確認してください。PCのレイアウトと、スマホでのレイアウトは異なります。
左に画像、右にテキスト（スマホだと上下）
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
左にテキスト、右に画像（スマホだと上下）
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
2カラム（スマホだと上下）
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
2カラム（スマホだと上下）
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。