コンテンツを作成する

マークダウンと HTML の書式設定

DevSite のコンテンツのほとんどは Markdown で記述されています。Markdown は、書式なしテキストのシンプルさと人間が読みやすいことを目的とした記述形式です。DevSite は、ウェブに表示するためにマークダウンを HTML に自動的に変換します。

一般的な HTML 要素に対応する Google 固有の Markdown については、go/g3mark-cheat のチートシートをご覧ください。Google の Markdown（CommonMark とも呼ばれます）の完全なドキュメントは、こちらでご覧いただけます。

いくつか例を挙げましょう。

HTML	マークダウン
`<b>bold text</b> <strong>bold text</strong>`	`bold text`
`<i>italic text</i> <em>italic text</em>`	`italic text`
`<h2>Heading 2</h2> <h3>Heading 3</h3>`	`## Heading 2 ### Heading 3`
`<a href="url.com">Link</a>`	`[Link](url.com)`
`<p>paragraph</p>`	`Paragraph`
`<ol> <li>Ordered list first item</li> <li>Second item</li> </ol>`	`1. Ordered list first item 1. Second item 1. Third item`
`<ul> <li>Unordered list first item</li> <ul> <li>Nested list item</li> </ul> <li>Second item</li> </ul>`	`* Unordered list first item * Nested item (indent 4-spaces) * Second item`

Markdown ではなく HTML を使用する場合

次のようなアイテムは Markdown を使用して記述しません。

インクルードファイル: すべてのインクルードファイルは HTML ファイルであるため、Markdown で記述された要素を含めることはできません。インクルードファイルの作成に関するガイダンスについては、ページ間でコンテンツを再利用するをご覧ください。
表: Markdown の表は書式設定とメンテナンスが難しいため、Markdown ファイルでも表には HTML を使用します。
画像: 画像に HTML を使用すると、画像形式と配置の柔軟性が高まります。画像については、DevSite 公開ガイドをご覧ください。
Zippies: Devsite で展開可能なウィジェットとして知られる Zippies は、HTML で記述し、<div> タグでラップする必要があります。

一般的なコンテンツ形式

新しいタブで開くリンク

リンクを同じタブで開くか新しいタブで開くかについては、リンクのガイドラインに沿ってください。リンクを新しいタブで開く必要がある場合は、次の方法でリンクをフォーマットできます。

マークダウン

[Accessible content](/style/accessibility){:target="_blank"}

HTML

<a href="/style/accessibility" target="_blank">Accessible content</a>

テーブル

Devsite で提供されるテーブルの種類とそれに対応する HTML については、DevSite パブリッシングガイドのテーブルをご覧ください。

ヒント:

テーブルに枠線が必要ない場合は、class="columns" を使用します。
テーブルにパディングと区切り線が必要な場合（このページなど）は、class="columns extra-padding" を使用し、コンテンツ行の間の別の行で <hr> タグを使用します。

展開可能な zippy

Workspace では、arrow-icon クラスを使用してジッピーのスタイルを設定します。Workspace のジッピー（展開可能なウィジェット）の例を次に示します。

<div>
  <devsite-expandable class="arrow-icon" id="UNIQUE_ZIPPY_ID">
    <h4 class="showalways">ZIPPY_HEADING</h4>
    <div>
      YOUR_CONTENT
    </div>
  </devsite-expandable>
</div>

このサンプルを使用するには、次の変数を置き換えます。

UNIQUE_ZIPPY_ID: わかりやすく一意の ID を入力します。これにより、ジッピーを直接参照できるようになります（例: direct-admin-access）。
ZIPPY_HEADING: ジッピーを開く前にユーザーに表示するテキストを入力します。
YOUR_CONTENT: ジッピーが展開されたときにユーザーに表示されるコンテンツを入力します。

DevSite の展開可能なウィジェットについて詳しくは、DevSite パブリッシングガイドのウィジェット: 展開可能をご覧ください。

共有コンテンツを含める

複数のページでコンテンツを再利用するには、インクルードを使用します。これは、Composer で複数の記事でスニペットを使用する DevSite バージョンです。

インクルードファイルの作成とコンテンツでのインクルードの使用に関するガイダンスについては、ページ間でコンテンツを再利用するをご覧ください。

見出しにカスタムアンカーを追加する

DevSite は、すべての見出しに対して HTML ID 属性を作成します。見出しが変更された場合でも一貫性を維持するには、見出しテキストの横に {:#your-id} を追加して、見出しにカスタムアンカー ID を追加します。例:

## Apply filters to your search results {:#apply-filters}

ヒント: ファイル内のすべての見出しにカスタムアンカー ID を自動的に作成するには、Command（\⌘）+ H キー（Windows の場合は Ctrl + H キー）を押します。既存のカスタムアンカー ID は変更されません。

詳しくは、ヘッダー ID に関する DevSite の公開ガイドをご覧ください。

コンテンツを作成する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。