最小限のHTML/CSSでnote風レイアウトを作る｜株式会社スイフトスタッフ

投稿日時 :

2025年9月17日

カテゴリー : 投稿テスト

by :

mei

最小限のHTML/CSSでnote風レイアウトを作る

概要

余白・行間・本文幅の3点に絞って「読みやすさ」を最大化する最小レイアウト。
社内ドキュメントや検証記事の雛形にも最適。

この記事で学べること

・本文幅（最大幅）・行間・余白の”3点セット”をどう設計すると読みやすいか

・コード・引用・箇条書きなど記事で使いがちな要素の最小スタイル

・「cssは増やさず、体験は良くする」引き算のデザイン

手順

① 雛形HTMLを用意
② 本文コンテナに最大幅を設定
③ タイポと幅を整える
④ コードや引用を読みやすく

HTML（雛形）

HTML

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>note風レイアウトの最小実装</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <article class="note">
    <header class="note__header">
      <h1>note風レイアウトの最小実装</h1>
      <p class="note__meta">2025-10-16 / by You</p>
    </header>

    <section class="note__body">
      <p>本文の幅を狭め、行間と余白を丁寧に取ると一気に読みやすくなります。</p>
      <h2>見出しH2</h2>
      <p>段落…。<strong>強調</strong>や<em>斜体</em>も見やすく。</p>
      <pre><code><code>や<pre>は読みやすい等幅フォントで。</code></pre>
      <blockquote>引用も少しだけアクセントを。</blockquote>
      <ul>
        <li>箇条書き1</li>
        <li>箇条書き2</li>
      </ul>
    </section>

    <footer class="note__footer">
      <p>おわり。</p>
    </footer>
  </article>
</body>
</html>

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>note風レイアウトの最小実装</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <article class="note">
    <header class="note__header">
      <h1>note風レイアウトの最小実装</h1>
      <p class="note__meta">2025-10-16 / by You</p>
    </header>

    <section class="note__body">
      <p>本文の幅を狭め、行間と余白を丁寧に取ると一気に読みやすくなります。</p>
      <h2>見出しH2</h2>
      <p>段落…。<strong>強調</strong>や<em>斜体</em>も見やすく。</p>
      <pre><code><code>や<pre>は読みやすい等幅フォントで。</code></pre>
      <blockquote>引用も少しだけアクセントを。</blockquote>
      <ul>
        <li>箇条書き1</li>
        <li>箇条書き2</li>
      </ul>
    </section>

    <footer class="note__footer">
      <p>おわり。</p>
    </footer>
  </article>
</body>
</html>

CSS（最小タイポグラフィ）

CSS

:root {
  --note-width: 680px;
  --note-padding: 24px;
  --text: #222;
  --muted: #666;
  --border: #eee;
}

html { font-size: 16px; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  color: var(--text);
  line-height: 1.9;
  margin: 0;
  background: #fff;
}

.note {
  max-width: var(--note-width);
  padding: 0 var(--note-padding) 80px;
  margin: 40px auto 0;
}

.note__header { margin: 32px 0 24px; }
.note__header h1 {
  font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: 1.3;
  margin: 0 0 8px;
}
.note__meta { color: var(--muted); font-size: 0.9rem; margin: 0; }

.note__body h2 {
  margin: 2.4em 0 0.8em;
  font-size: 1.25rem;
}
.note__body h3 { margin: 2em 0 0.6em; font-size: 1.1rem; }

pre, code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace;
}
pre {
  overflow: auto;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}

blockquote {
  border-left: 4px solid var(--border);
  margin: 1.5em 0;
  padding: 0.5em 1em;
  color: var(--muted);
}

:root {
  --note-width: 680px;
  --note-padding: 24px;
  --text: #222;
  --muted: #666;
  --border: #eee;
}

html { font-size: 16px; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  color: var(--text);
  line-height: 1.9;
  margin: 0;
  background: #fff;
}

.note {
  max-width: var(--note-width);
  padding: 0 var(--note-padding) 80px;
  margin: 40px auto 0;
}

.note__header { margin: 32px 0 24px; }
.note__header h1 {
  font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: 1.3;
  margin: 0 0 8px;
}
.note__meta { color: var(--muted); font-size: 0.9rem; margin: 0; }

.note__body h2 {
  margin: 2.4em 0 0.8em;
  font-size: 1.25rem;
}
.note__body h3 { margin: 2em 0 0.6em; font-size: 1.1rem; }

pre, code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace;
}
pre {
  overflow: auto;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}

blockquote {
  border-left: 4px solid var(--border);
  margin: 1.5em 0;
  padding: 0.5em 1em;
  color: var(--muted);
}