デザイン確認用ダミー記事
この記事は デザイン確認用のダミー です。本文で使われうる Markdown 要素を一通り詰め込んでいます。段落のなかには イタリック(強調) や 太字、太字イタリック、インラインコード、打ち消し線、それから リンク や自動リンク https://htk-ym.dev が混ざることがあります。行間・文字組み・リンク色(アクセントカラー)とホバーを確認してください。
長めの段落も用意します。あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの……と日本語が続くときの行送りや、英数字 abcdefghijklmnopqrstuvwxyz 0123456789 が混ざったときのベースライン、そして文章が右端で折り返されるときの挙動(overflow-wrap)を確認するための、ある程度の長さを持った段落です。和欧混植のバランスもあわせて見てください。
H2 直後の段落です。セクションの導入として使われます。見出しと本文のあいだの余白を確認してください。
H3 直後の段落です。サブセクションの見出しです。
H4 直後の段落です。H4 は太字で本文と同じサイズになります。
H5・H6 は個別のサイズ指定がないため、既定のサイズで表示されます。階層が深い見出しの見え方の確認用です。
引用ブロックです。複数行にわたる引用もここで確認できます。
左側のボーダー、淡色、イタリックの見え方をチェックしてください。
段落を分けた引用の 2 段落目です。
箇条書き(ul・■マーカー):
1 つ目の項目
2 つ目の項目(太字や code、リンク を含む)
3 つ目の項目
ネストした項目 A
ネストした項目 B
さらにネストした項目
番号付き(ol・数字マーカー):
1. 最初のステップ
2. 次のステップ
3. 最後のステップ
1. ネストした番号 1
2. ネストした番号 2
タスクリスト(GFM):
[x] 完了したタスク
[ ] 未完了のタスク
[ ] もう一つの未完了タスク
文中のインラインコード const answer = 42; の見え方と、下のコードブロックを確認してください。
ts
// TypeScript のコードブロック(シンタックスハイライト確認用)
interface Article {
title: string;
date: Date;
draft?: boolean;
}
function formatDate(date: Date): string {
return date.toLocaleDateString('ja-JP', {
year: 'numeric',
month: 'long',
day: 'numeric',
});
}
const sample: Article = { title: 'デザイン確認用ダミー記事', date: new Date(), draft: true };
console.log(formatDate(sample.date)); // 横スクロール(overflow-x)の確認用に、折り返さない長めの行をあえて入れておきます ----------------------------------------
画像の角丸・最大幅・前後の余白を確認します。
| 要素 | 確認ポイント | 状態 |
| -------------- | --------------------------- | :--: |
| 見出し | H2〜H6 のサイズと余白 | ✅ |
| リスト | ul(■)/ ol(数字)の字下げ | ✅ |
| コード | インライン / ブロック | ✅ |
| 引用 | 左ボーダーと淡色イタリック | ✅ |
| 表 | ヘッダー背景とセル罫線 | ✅ |
セルの背景・罫線・ヘッダーの強調、そしてセル内テキストの配置(中央寄せ列を含む)を確認してください。
本文中に脚注を置くこともあります[^1]。要素のあいだの区切りには水平線(hr)を使います。
---
最後の段落です。区切り線の上下の余白と、本文の締めの見え方を確認してください。リンクの色(アクセントカラー)やホバーもあわせてチェックできます。
[^1]: これは脚注の内容です。脚注は記事末尾にまとめて表示されます。