2026年版 賢い資産配分法

であり、marginやpaddingではなく、height自体がスペースを生成する特殊な用途として許可されています。

その他の禁止CSSプロパティ

以下のCSSプロパティも使用が禁止されています。

• display: flex / display: grid: レイアウト制御には使用できません。HTMLのフローに沿った配置を基本とします。
• box-shadow: フラットデザインのため禁止です。
• rgba()カラー: すべての色指定はHEX値（例: #FFFFFF）で行う必要があります。
• 
タグによるスペーシング: 段落間のスペースはpadding-bottomで調整し、
を連続して使用してスペースを作ることは禁止です。

•  

  によるスペーシング: 空の段落や非改行スペースによるスペーシングは禁止です。

• 空divによるスペーシング: 透明な

  ---

  のheightプロパティのみが、ブロックレベルの垂直スペーシング手段として許可されます。

これらの制約は、一貫したレンダリングと高い保守性を実現するために設けられています。各プロパティの禁止理由を理解し、代替手段を適切に活用することが重要です。

TossスタイルにおけるHTMLパターン詳解

KwontekiブログのTossスタイルは、特定のHTMLパターンとCSSプロパティの組み合わせによって実現されます。ここでは、主要な要素ごとに推奨されるHTML構造とスタイルを詳細に解説し、CSS制約を遵守しながらもTossスタイルを表現する方法を学びます。

各パターンは、読者の視線誘導、情報階層の明確化、そして一貫したブランドイメージの構築に寄与します。これらのパターンを正確に再現することが、高品質な記事作成の鍵となります。

KwontekiブログのTossスタイルは、厳選されたHTMLパターンとCSSの組み合わせによって、高い可読性と視覚的な統一感を実現します。

リードセクションと目次

記事の冒頭は、読者の興味を引きつけ、記事の内容を簡潔に伝える重要な役割を担います。Tossスタイルでは、背景色付きの要約カードではなく、大胆なリード文とそれに続くプレーンな段落で構成されます。

目次は、記事全体の構造を一覧で示すもので、読者が目的のセクションに素早くアクセスできるよう、番号付きリスト形式で提供されます。目次の項目テキストは、対応するh2見出しのテキストと完全に一致させる必要があります。

以下に、リードと目次のHTMLパターンを示します。

<p style="font-size: clamp(19px, 4.2vw, 22px); font-weight: 800; color: #191F28; letter-spacing: -0.5px; padding-bottom: 14px;">A bold sentence that hooks the reader.</p>
<p style="font-size: 16px; color: #4E5968; padding-bottom: 8px;">Explain what the post covers in 2-3 sentences. Flow naturally into the body.</p>

<p style="font-size: 12px; font-weight: 700; color: #8B95A1; letter-spacing: 1.5px; padding-bottom: 10px;">Contents</p>
<p style="font-size: 15px; color: #4E5968; padding-bottom: 6px;"><span style="color: #2944A6; font-weight: 800; padding-right: 10px;">01</span>First Section Heading</p>
<p style="font-size: 15px; color: #4E5968; padding-bottom: 6px;"><span style="color: #2944A6; font-weight: 800; padding-right: 10px;">02</span>Second Section Heading</p>
<p style="font-size: 15px; color: #4E5968;"><span style="color: #2944A6; font-weight: 800; padding-right: 10px;">03</span>Third Section Heading</p>

セクション見出し（h2）とサブセクション見出し（h3）

セクション見出し（h2）とサブセクション見出し（h3）は、記事の論理的な構造を明確にし、読者が内容を把握しやすくするために不可欠です。Tossスタイルでは、これらの見出しのフォントサイズ、太さ、色、そして周囲のスペーシングが厳密に定義されています。

特に重要なのは、h3とその直後の本文との「近接性」です。h3のpadding-bottomを小さく設定することで、h3と本文が視覚的に一体のグループとして認識されるようにします。これにより、情報の親子関係が明確になります。

以下に、h2とh3のHTMLパターンを示します。

<h2 style="font-size: clamp(21px, 4.8vw, 25px); font-weight: 800; color: #191F28; letter-spacing: -0.6px; padding-top: clamp(24px, 5vw, 36px); padding-bottom: 4px;">Section Heading</h2>
<p style="font-size: 16px; color: #4E5968; padding-bottom: 8px;">Main body text in #4E5968. Keep paragraphs to 2-4 sentences.</p>
<p style="font-size: 16px; color: #8B95A1; padding-bottom: 8px;">Supporting/secondary content in #8B95A1 (lighter) to tone down less-important information.</p>

<h3 style="font-size: 17px; font-weight: 700; color: #191F28; letter-spacing: -0.3px; padding-top: clamp(12px, 3vw, 22px); padding-bottom: 4px;">Subsection Heading</h3>
<p style="font-size: 16px; color: #4E5968; padding-bottom: 8px;">The body sits just 4px below its h3 &mdash; clearly the child.</p>
<p style="font-size: 16px; color: #4E5968; padding-bottom: 8px;">Subsequent paragraphs in the same group stay close (~8px).</p>

キーセンテンスとワードレベルグラデーションアンダーライン

各セクションで最も重要なポイントを強調するために、Tossスタイルでは「キーセンテンス」と「ワードレベルグラデーションアンダーライン」という2つの手法が使われます。これらは、読者の注意を効果的に引きつけ、情報の重要度を視覚的に伝えます。

キーセンテンスは、セクションの核心を要約した一文であり、メインアクセントカラー（#2944A6）で強調されます。ワードレベルグラデーションアンダーラインは、特定の単語やフレーズに対してのみ適用され、linear-gradient()を使用する唯一の例外です。

以下に、これらの強調表現のHTMLパターンを示します。

<p style="font-size: 17px; color: #191F28; font-weight: 700; padding-bottom: 8px;">The point of this section is <span style="color: #2944A6;">the most important phrase</span>.</p>

<p style="font-size: 16px; color: #4E5968; padding-bottom: 8px;">The difference is one thing &mdash; <span style="background-image: linear-gradient(90deg, #2944A6, transparent); background-position: 0 1.08em; background-size: 100% 2px; background-repeat: no-repeat; padding-bottom: 1px; font-weight: 700; color: #191F28;">how much you actually know</span>.</p>

区切り線（hr）と画像プレースホルダー

記事のセクション間や、異なるトピックへの移行を示すために、3種類の区切り線（

）が用意されています。これらは、marginプロパティを使用せず、borderやheight、background-colorによってスタイリングされます。特に、スペースを生成するための透明な

は、heightプロパティを直接指定することで機能します。

画像は、テキストコンテンツの理解を助け、視覚的なブレイクを提供するために重要です。Kwontekiブログでは、画像プレースホルダーを特定の形式で挿入し、後から実際の画像に置き換えられるようにします。これにより、記事執筆段階でのレイアウト確認が容易になります。

以下に、区切り線と画像プレースホルダーのHTMLパターンを示します。

<!-- Long horizontal solid (major shift: body &rarr; closing) -->
<hr style="border: none; border-top: 1px solid #E5E8EB; height: 0; background: transparent;">
<!-- Short centered solid (sub-topic shift inside a section) -->
<hr style="border: none; width: 40px; height: 2px; border-radius: 1px; background-color: #E5E8EB;"> <!-- margin: 16px auto; は削除 -->
<!-- Dashed (light transition between paragraph groups) -->
<hr style="border: none; border-top: 1px dashed #D1D6DB; height: 0; background: transparent;">

<!-- IMAGE: english description for image search | localized alt text -->

コードブロックとインラインコード

技術系の記事では、コードの提示が不可欠です。Kwontekiブログでは、<pre><code>タグを使用してコードブロックを表現し、<code>タグでインラインコードを表現します。これらには、可読性を高めるための特定のスタイルが適用されます。

コードブロックの前には、必ず「コード解説」ボックスを配置し、そのコードが何をするものなのか、どのような点に注意すべきかを簡潔に説明します。これにより、読者はコードの意図を素早く理解できます。

以下に、コードブロックとインラインコードのHTMLパターンを示します。

<div style="background-color: #e8f5e9; padding: 12px; border-radius: 4px; padding-bottom: 8px;">
    <p style="font-size: 13px; font-weight: 700; color: #2e7d32; padding-bottom: 4px;">コード解説: サンプルコード</p>
    <p style="font-size: 14px; color: #4E5968; padding-bottom: 4px;">このPythonコードは、リスト内の偶数をフィルタリングして新しいリストを生成します。</p>
</div>
<pre style="background-color: #20232A; color: #E6E6E6; padding: 18px; border-radius: 8px; overflow-x: auto; font-size: 14px; white-space: pre-wrap; word-wrap: break-word;"><code>def filter_even_numbers(numbers):
    even_numbers = []
    for num in numbers:
        if num % 2 == 0:
            even_numbers.append(num)
    return even_numbers

my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
filtered_list = filter_even_numbers(my_list)
print(f&quot;Original list: {my_list}&quot;)
print(f&quot;Filtered even numbers: {filtered_list}&quot;)</code></pre>

<p style="font-size: 16px; color: #4E5968; padding-bottom: 8px;">上記の <code style="background-color: #F2F4F6; padding: 3px 8px; border-radius: 4px; font-size: 14px; color: #4E5968;">filter_even_numbers</code> 関数は、リストから偶数のみを抽出します。</p>

セマンティックな構造とSEOへの貢献

HTMLのセマンティックな構造は、単に見た目を整えるだけでなく、検索エンジン最適化（SEO）とアクセシビリティに大きく貢献します。Kwontekiブログでは、CSSの制約とTossスタイルガイドを遵守しつつ、セマンティックなHTML記述を徹底することを推奨しています。

特に、h2タグとh3タグの適切な使用は、記事の構造を検索エンジンに正確に伝え、コンテンツの関連性を高める上で非常に重要です。見出しの階層が正しく構築されていると、検索エンジンは記事の主要なトピックとサブトピックを容易に識別できます。

セマンティックなHTML構造は、SEOとアクセシビリティを向上させるための基盤であり、Kwontekiブログの高品質なコンテンツには不可欠です。

h2/h3タグの適切な使用

h2タグは主要なセクションの見出しとして使用し、記事の主要なテーマを表現します。例えば、本記事では「Tossスタイルガイドの核心」や「厳格なCSS制約とその実践的対策」がh2見出しです。これらの見出しは、読者が目次を見たときに記事の全体像を把握できるように、簡潔かつ明確であるべきです。

h3タグは、h2セクション内のサブトピックの見出しとして使用します。例えば、「line-heightの厳格な禁止と代替のスペーシング」は「厳格なCSS制約とその実践的対策」というh2の下に位置するh3です。h3見出しは、h2の内容をさらに具体的に掘り下げる役割を担います。

見出しの階層を飛ばすこと（例: h1の次にh3を使用するなど）は、セマンティックな構造を破壊し、SEOに悪影響を与えるため、厳禁です。常にh1 → h2 → h3の順序を遵守してください（Kwontekiブログではh1はシステムが自動生成するため、記事内ではh2から開始します）。

画像altテキストの重要性

画像プレースホルダーのセクションで示されているように、すべての画像には英語の説明と日本語のaltテキストが必須です。altテキストは、画像が表示されない場合にその内容を説明するもので、視覚障害のあるユーザーにとって重要な情報源となります。また、検索エンジンはaltテキストを読み取り、画像の内容を理解するため、SEOにおいても非常に重要です。

altテキストは、画像の内容を簡潔かつ正確に説明し、キーワードを不自然に詰め込むことを避けるべきです。例えば、「Architecture diagram showing microservices communication with API gateway | Microservices architecture diagram with API gateway」のように、英語の説明と日本語のaltテキストを併記する形式を遵守してください。

画像が純粋な装飾目的である場合でも、空のalt属性（alt=""）ではなく、最低限の情報を記述することが推奨されます。Kwontekiブログでは、すべての画像プレースホルダーに説明的なaltテキストを記述することを義務付けています。

具体的なコード例と実装上の注意

これまでのセクションで解説したCSS制約とTossスタイルガイドの原則を具体的なコード例を通じて再確認し、実践的な実装上の注意点について説明します。特に、line-heightやmarginが使用できない環境でのスペーシングの調整方法、linear-gradient()の限定的な使用方法に焦点を当てます。

各コードスニペットは、Kwontekiブログのガイドラインに完全に準拠しており、コピー＆ペーストでそのまま使用できることを想定しています。ただし、コンテンツの内容に応じて、適切なテキストやURLに置き換える必要があります。

Kwontekiブログのガイドラインに準拠した具体的なコード例を通じて、正しい実装方法を習得しましょう。

スペーシングの実践例

line-heightやmarginが制限される中で、視覚的なスペーシングを確保する最も効果的な方法は、padding-bottomを適切に活用することです。以下の例は、一般的な段落、見出し、リストアイテム間でのスペーシングのベストプラクティスを示しています。

重要なのは、一律に同じpadding-bottomを適用するのではなく、情報の階層やグループ化に応じて値を調整することです。例えば、同一グループ内の段落はpadding-bottom: 8px;で密接に保ちつつ、異なるセクション間では透明な

で大きなスペースを設けるといった具合です。

<h2 style="font-size: clamp(21px, 4.8vw, 25px); font-weight: 800; color: #191F28; letter-spacing: -0.6px; padding-top: clamp(24px, 5vw, 36px); padding-bottom: 4px;">メインセクションタイトル</h2>

<p style="font-size: 16px; color: #4E5968; padding-bottom: 8px;">この段落は、セクション見出しの直後に配置され、その内容を導入します。</p>

<p style="font-size: 16px; color: #4E5968; padding-bottom: 8px;">続いて、別の段落が同じセクション内で配置されます。</p>
<h3 style="font-size: 17px; font-weight: 700; color: #191F28; letter-spacing: -0.3px; padding-top: clamp(12px, 3vw, 22px); padding-bottom: 4px;">サブセクションタイトル</h3>

<p style="font-size: 16px; color: #4E5968; padding-bottom: 8px;">サブセクション見出しの直後の段落です。h3との距離は短く保ちます。</p>

<ul style="list-style-type: disc; padding-left: 20px; font-size: 16px; color: #4E5968; padding-bottom: 8px;">

<li style="padding-bottom: 4px;">リストアイテム1</li>

<li style="padding-bottom: 4px;">リストアイテム2</li>

</ul>

<p style="font-size: 16px; color: #8B95A1; padding-bottom: 8px;">補足情報やキャプションなどの二次的なコンテンツです。</p>
<hr style="border: none; height: 60px; background-color: transparent;"> <!-- セクション間の大きなスペース -->
<h2 style="font-size: clamp(21px, 4.8vw, 25px); font-weight: 800; color: #191F28; letter-spacing: -0.6px; padding-top: clamp(24px, 5vw, 36px); padding-bottom: 4px;">次のメインセクション</h2>

<p style="font-size: 16px; color: #4
関連記事
Git Rebaseの基本と活用法
2026年版資産形成の新戦略
開発者向けの投資リスク管理