Studio：リッチテキストボックス
Studioのリッチテキストボックスに貼り付けて、各要素のデザイン設定を確認するためのサンプルデータです。
Studioのリッチテキストでは、見出しh1〜h6、段落、箇条書き、番号付きリスト、太字、斜体、打ち消し線、コード、引用、区切り線、リンクなどを利用できます。
見出し1：記事のメインタイトル
これは通常の段落です。記事本文やサービス紹介、説明文などに使用します。文字サイズ、文字色、フォント、行間、段落間の余白などを確認してください。
見出し2：大きなセクションの見出し
見出し2は、記事内の大きな話題を区切るために使用します。CMS記事では、ページタイトルが見出し1になることが多いため、本文は見出し2から始めるのが基本です。
見出し3：小さなセクションの見出し
見出し3は、見出し2の内容をさらに細かく分ける場合に使用します。
見出し4：詳細項目の見出し
見出し4は、手順や詳細な説明を整理するときに使用します。
見出し5：補足項目の見出し
見出し5は、補足的な内容や細かな分類に使用します。
見出し6：最も小さい見出し
見出し6は、見出し階層の中で最も下のレベルです。通常の記事では、見出し4程度までに収めると読みやすくなります。
通常の段落
これは通常の段落です。Webページの本文では、長い文章をひと続きにせず、内容のまとまりごとに段落を分けると読みやすくなります。
これは2つ目の段落です。段落と段落の間隔、文字の大きさ、行の高さ、1行あたりの文字数を確認するために使用してください。
短い段落です。
文字の強調
これは太字のテキストです。
これは斜体のテキストです。
これは打ち消し線のテキストです。
これはインラインコードのテキストです。
これは通常の文章の中に重要な言葉を太字で表示した例です。
これは通常の文章の中に補足的な言葉を斜体で表示した例です。
これは通常の文章の中に修正前の情報を打ち消し線で表示した例です。
リンク
詳しい内容はこちらのページをご覧ください。
リンクの文字色、下線、太さ、ホバー時のデザインを確認してください。
箇条書きリスト
- 箇条書きの項目1
- 箇条書きの項目2
- 箇条書きの項目3
- 少し長い文章を入力した場合の、折り返し位置や行間を確認するための箇条書き項目です
番号付きリスト
- 最初の手順を実行します
- 次の手順を実行します
- 設定内容を確認します
- プレビュー画面で表示を確認します
引用
デザインは、情報をきれいに見せるだけでなく、内容を分かりやすく伝えるためのものです。
これは複数行になる引用文の例です。引用部分の文字サイズ、背景色、左側の線、余白などを設定すると、通常の文章との違いが分かりやすくなります。
コード表示
.container {
display: flex;
gap: 24px;
padding: 32px;
}長い文章の表示確認
Webサイトを制作するときは、文字の大きさだけでなく、行の高さや文章の横幅も重要です。文章の横幅が広すぎると、読み手の視線移動が大きくなり、内容を追いにくくなります。一方、横幅が狭すぎると改行が増え、文章全体が縦に長くなってしまいます。
リッチテキストボックスの横幅を変更しながら、文章の折り返し方を確認してください。パソコンでは読みやすくても、スマートフォンでは文字が小さすぎたり、余白が広すぎたりすることがあります。
英数字を含む文章
Studio RichText Design Sample
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Web Design / No-Code / CMS / Responsive Design
お問い合わせ：info@example.com
電話番号：00-1234-5678
料金：12,800円（税込）
更新日：2026年8月4日
記号を含む文章
「かぎ括弧」と『二重かぎ括弧』
（丸括弧）【隅付き括弧】［角括弧］
・中黒 ／スラッシュ ｜縦線 ―ダッシュ
%、&、@、#、!、?、+、−、×、÷
改行の確認
1行目の文章です。
2行目の文章です。
3行目の文章です。
