HOME 　>　お知らせ　>　コンポーネントサンプル

コンポーネントサンプル

＜プロローグ＞16pt相当。line-height:28pt相当。font-weight:500本文のテキストは十分に読みやすい太さでありながら、目にやさしい色が望ましいです。使用するのはグーグルフォント「Noto-Sans」ファミリーが良いと思いますが、数字が今一つです。検討の結果、英数半角文字は「Lato」が良いと考えています。

タイトル26pt相当。line-height:36pt相当。font-weight:500で複数行を想定したデザイン。左の線はキーカラー。
- 複数行を想定したデザイン。
タイトル26pt相当。line-height:36pt相当。font-weight:500で複数行を想定したデザイン。左の線はキーカラー。
- h3>タイトル22pt相当。line-height:30pt相当。font-weight:500で複数行を想定したデザイン。下線はキーカラーで文字列に追従。
h2見出しテキストラベル1行の場合
監修者プロフィール（18pt相当、font-weight:500）

タイトル26pt相当。line-height:36pt相当。font-weight:500で複数行を想定したデザイン。左の線はキーカラー。

複数行を想定したデザイン。

タイトル22pt相当。line-height:30pt相当

font-weight:500で複数行を想定したデザイン。

下線はキーカラーで文字列に追従。

タイトル26pt相当。line-height:36pt相当。font-weight:500で複数行を想定したデザイン。左の線はキーカラー。

h3>タイトル22pt相当。line-height:30pt相当。font-weight:500で複数行を想定したデザイン。下線はキーカラーで文字列に追従。

本文に、小さいフォントサイズのクラスを作る本文で脚注などを付けるケースが出てまいりましたので新たなクラスを設定してください。

ご確認のうえご指導いただければ幸いにございます。複数行を想定した複数行を想定した複数行を想定した複数行を想定した複数行を想定した複数行を想定した複数行を想定した複数行を想定した

h4>タイトルテキスト20pt相当。line-height:28pt相当。 font-weight:500、下線はキーカラーで文字列に追従させる。

h5>タイトルテキスト18pt相当。line-height:26pt相当。 font-weight:500、背景は#FFFF99で文字列に追従。

h6>タイトルテキスト17pt相当。line-height:24pt相当。 font-weight:500、複数行になる場合を想定したデザインです。

キャプションは13pt相当。line-height:22 pt相当。font-weight:300。本文のテキストは十分に読みやすい太さでありながら、目にやさしい色が望ましいです。使用するのはグーグルフォント「Noto-Sans」ファミリーが良いと思いますが、数字が今一つです。検討の結果、英数半角文字は「Lato」が良いと考えています。

16pt相当。line-height:24pt相当。font-weight:300本文のテキストは十分に読みやすい太さでありながら、目にやさしい色が望ましいです。使用するのはグーグルフォント「Noto-Sans」ファミリーが良いと思いますが、数字が今一つです。

16pt相当。line-height:24pt相当。font-weight:300本文のテキストは十分に読みやすい太さでありながら、目にやさしい色が望ましいです。

h2見出しテキストラベル1行の場合

＜本文テキスト＞16pt相当。line-height:28pt相当。font-weight:300本文のテキストは十分に読みやすい太さでありながら、目にやさしい色が望ましいです。使用するのはグーグルフォント「Noto-Sans」ファミリーが良いと思いますが、数字が今一つです。検討の結果、英数半角文字は「Lato」が良いと考えています。＜本文テキスト＞16pt相当。line-height:28pt相当。font-weight:300本文のテキストは十分に読みやすい太さでありながら、目にやさしい色が望ましいです。使用するのはグーグルフォント「Noto-Sans」ファミリーが良いと思いますが、数字が今一つです。検討の結果、英数半角文字は「Lato」が良いと考えています。＜本文テキスト＞16pt相当。line-height:28pt相当。font-weight:300本文のテキストは十分に読みやすい太さでありながら、目にやさしい色が望ましいです。使用するのはグーグルフォント「Noto-Sans」ファミリーが良いと思いますが、数字が今一つです。検討の結果、英数半角文字は「Lato」が良いと考えています。＜本文テキスト＞16pt相当。line-height:28pt相当。font-weight:300本文のテキストは十分に読みやすい太さでありながら、目にやさしい色が望ましいです。使用するのはグーグルフォント「Noto-Sans」ファミリーが良いと思いますが、数字が今一つです。検討の結果、英数半角文字は「Lato」が良いと考えています。＜本文テキスト＞16pt相当。line-height:28pt相当。font-weight:300本文のテキストは十分に読みやすい太さでありながら、目にやさしい色が望ましいです。使用するのはグーグルフォント「Noto-Sans」ファミリーが良いと思いますが、数字が今一つです。検討の結果、英数半角文字は「Lato」が良いと考えています。

キャプションは13pt相当。キャプションは13pt相当。キャプションは13pt相当。キャプションは13pt相当。キャプションは13pt相当。キャプションは13pt相当。キャプションは13pt相当。キャプションは13pt相当。キャプションは13pt相当。

監修者プロフィール（18pt相当、font-weight:500）

苗字お名前先生（18pt相当、font-weight:500） 肩書テキストラベル12pt相当。line-height:16pt相当。font-weight:300。肩書が複数ある場合は2行以上になる可能性があります。

16pt相当。line-height:28pt相当。font-weight:300。本文のテキストは十分に読みやすい太さでありながら、目にやさしい色が望ましいです。使用するのはグーグルフォント「Noto-Sans」ファミリーが良いと思いますが、数字が今一つです。

あとぴナビ 0000年 00月掲載

箇条書きテキストのサイズ13pt相当、行間18pt相当。weight:300。
本文のテキストより行間を狭くしています。
本文のテキストより行間を狭くしています。本文のテキストより行間を狭くしています。

箇条書きテキストのサイズ13pt相当、行間18pt相当。weight:300。
本文のテキストより行間を狭くしています。
本文のテキストより行間を狭くしています。本文のテキストより行間を狭くしています。

箇条書きテキストのサイズ13pt相当、行間18pt相当。weight:300。
本文のテキストより行間を狭くしています。
本文のテキストより行間を狭くしています。本文のテキストより行間を狭くしています。

箇条書きテキストのサイズ13pt相当、行間18pt相当。weight:300。
本文のテキストより行間を狭くしています。
本文のテキストより行間を狭くしています。本文のテキストより行間を狭くしています。

表のタイトルは17pt相当。font-weight:500

16pt相当、行間22pt相当で2行入る場合	1行	1行の場合
weight:300	1行のテキストが入る場合	1行のテキスト
表組はコンテンツ幅の85％。	1行の場合	2行のテキストが入る場合があります。

表のタイトルは17pt相当。font-weight:500

16pt相当、行間22pt 相当で2行入る場合	列幅はテキスト量に応じて調整可能にしたい。2行の場合のテキスト。2行の場合のテキスト。
weight:300	1行のテキスト
表組はコンテンツ幅の85％。	1行の場合

16pt相当。line-height:28pt相当。font-weight:300。本文のテキストは十分に読みやすい太さでありながら、目にやさしい色が望ましいです。使用するのはグーグルフォント「Noto-Sans」ファミリーが良いと思いますが、数字が今一つです。検討の結果、英数半角文字は「Lato」が良いと考えています。

Q：文中にQ&Aがあった場合のデザインです。ここに質問が入ります。

A：ここに回答のタイトルがはいります。

この部分には詳しい解説が入ります。ない場合はとってしまっても構わないと思います。