Hugoでゼロからテーマを自作し始めたものの、「画像を挿入したら大きすぎてスマホ画面からはみ出した！」「表（テーブル）の枠線がなくて情報が読みづらい！」といったレイアウト崩れに悩んでいませんか？
Markdownで装飾なしに書かれた記事要素（HTML）をきれいに表示させるためには、ベースとなるいくつかの 必須CSS を設定しておく必要があります。

この記事で紹介する基本的なスタイルを style.css に追加しておけば、最低限の読みやすいフォーマットを整えることができます！

1. 画像（Images）

最近のスマホやデジカメの画像は巨大です。
何もしないと画面からはみ出して横スクロールが発生してしまうので、必ずこの設定を入れましょう。

/* 記事内の画像 */
article img {
    max-width: 100%; /* 親要素（記事の幅）より大きくしない */
    height: auto;    /* アスペクト比（縦横比）を維持する */
    display: block;  /* 下に謎の隙間ができるのを防ぐ */
    margin: 20px auto; /* 上下に余白、左右は中央揃え */
}

もっと自由に画像を操りたい？
「すべての画像に loading="lazy" をつけたい」「クラスを自動でつけたい」といった場合は、CSSではなく Render Hooks が便利です。
👉 【解説】Markdownの変換を自由自在に！Render Hooksとは？

2. 表（Tables）

Markdownの表は、そのままだと枠線がなく、見づらいです。

article table {
    width: 100%;
    border-collapse: collapse; /* 枠線を重ねる */
    margin-bottom: 20px;
}

article th,
article td {
    padding: 10px;
    border: 1px solid #ddd; /* 薄いグレーの枠線 */
}

article th {
    background-color: #f5f5f5; /* 見出し行だけ少しグレーに */
    font-weight: bold;
}

3. 引用（Blockquotes）

Markdownで > 引用文 と書いたときのスタイルです。
これがないと、ただの独り言なのか引用なのか区別がつきません。

article blockquote {
    margin: 20px 0;
    padding: 0 15px;
    color: #666;
    border-left: 4px solid #ddd; /* 左側に太い線を表示 */
    background-color: #f9f9f9;   /* 背景を少し変えるとなお良し */
    font-style: italic;
}

4. コードブロック（Code）

こちらの記事 でも紹介しましたが、プログラムコードを表示するなら必須です。

/* コードの塊 */
pre {
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 5px;
    overflow-x: auto; /* 長い行は横スクロールさせる */
    font-size: 0.9rem;
    line-height: 1.5;
}

/* 文章中のコード（`code`） */
code {
    font-family: Consolas, Monaco, monospace;
    background-color: #eee;
    padding: 2px 4px;
    border-radius: 3px;
    color: #d63384; /* 少し目立つ色に */
}

/* preの中のcodeには背景色をつけない（二重になるのを防ぐ） */
pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
}

5. 動画などの埋め込み（iFrame）

YouTubeなどを埋め込むときの iframe タグも、幅を調整しないとはみ出すことがあります。

article iframe {
    max-width: 100%;
}

必要最低限のCSSで記事の可読性を担保しよう

画像のはみ出し防止（max-width: 100%）ややコードブロックの横スクロール対応、表組みや引用文の枠線追加など、ここで紹介したスタイリングをベースにしておくことで、記事本文の基本的なレイアウト崩れを未然に防ぐことができます。

これらのベース設定を土台にしつつ配色や余白を細かく調整して、あなたのWebサイトの雰囲気に合わせたオリジナルテーマのデザインへ発展させていきましょう！🎨