h1 見出し — 真夜中の怪談

h2 見出し — 章タイトル

h3 見出し — 節タイトル

h4 見出し — 小見出し

h5 見出し — さらに小さい見出し

h6 見出し — 最小見出し

段落（p）と強調（em / strong / mark）

通常の段落テキストです。em で囲んだ語句には傍点が付きます。 strong で囲んだ語句はスクリーントーンの帯下線が付きます。 mark で囲んだ語句は黒ベタで反転表示されます。

この 3 つは 視覚的に区別できる別の装飾として定義されています。重要な語と、あとで読み返したい箇所と、 声に出して読みたい語句を、それぞれ書き分けてください。

リンク（a）

本文中にトップへ戻るリンクを置く例です。

リスト（ul / ol / dl）

ul — 順序なしリスト

項目 A
項目 B
- ネスト項目 B-1
- ネスト項目 B-2
項目 C

ol — 順序ありリスト

最初に
次に
最後に

dl — 定義リスト

HTML: HyperText Markup Language の略。Web ページの構造を記述する言語。
CSS: Cascading Style Sheets の略。Web ページの装飾を記述する言語。

引用（blockquote）

その夜、ラジオから聞こえてきたのは、確かに聞き覚えのある声だった。もう何年も前に、いなくなったはずの。

表（table）

タイトル	公開日	ページ数
真夜中の怪談	May 23, 2026	4 ページ
放課後の屋上	May 10, 2026	8 ページ

画像（img）

サンプル画像（プレースホルダー）

区切り（hr）

区切り線の上のテキスト。

区切り線の下のテキスト。

コード（code / pre）

本文中のコードは <code> でマークアップします。

function greet(name) {
  return `こんにちは、${name}さん`;
}

ユーティリティ class

.gallery-grid — 漫画作品のサムネイル一覧

ギャラリーで作品サムネイルを並べるための装飾です。 <ul class="gallery-grid"> の中に <li class="gallery-item"> を並べ、各項目に .gallery-thumb （縦長のサムネイル）と .gallery-caption （タイトル + メタ）を入れます。トップページなど大きめに見せたいときは gallery-grid is-top にします。

.manga-reader / .manga-page — 縦に積む漫画リーダー

作品詳細ページでページ画像を縦に並べ、クリックで全画面連続読み（PhotoSwipe）できるようにする装飾です。 <div class="manga-reader" id="manga-pages"> の中に <a class="manga-page" href="拡大画像" data-pswp-width="幅" data-pswp-height="高さ"> を並べ、各リンクの中に <img> を入れます。読む前の案内には .manga-read-note を使います。

ページをクリックすると全画面で連続して読めます。

.caution — 注意書きボックス

作品の前や、本文中で「読む前に注意してほしいこと」を表示するための装飾です。 <div class="caution"> の中に <p class="caution-title"> と本文を入れます。

注意書き

この作品にはネタバレ要素・ホラー描写を含みます。苦手な方はご注意ください。

.empty — 一覧が空のときの表示

作品 / お知らせの一覧がまだ無いときに、 <p class="empty"> で「まだありません」のような案内を出すための装飾です。

まだ作品はありません。

.novel-tag — タグ（# 表記）

作品紹介や本文中で「読み切り」「ホラー」のような分類タグを表示するための装飾です。各タグの前に # が自動で付きます。 <span class="novel-tag"> を並べます。

読み切りホラー現代

form — 入力フォーム

<form> 内の input / textarea / button / select に統一スタイルが当たります。送信ボタンを中央寄せにしたい場合は .form-actions でラップしてください。

tags

見出し（h1 〜 h6）