---
title: "文字間隔・両端揃えが崩れて読みにくいときの対処"
description: "文字間隔の調整で最後の文字がずれる、両端揃えで単語間が間延びして読みにくいと感じる制作者向け。letter-spacingとtext-align:justifyの挙動と日本語特有の注意点をまとめています。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/letter-spacing-justify-broken"
markdown: "https://giga-site.com/articles/letter-spacing-justify-broken/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 文字間隔・両端揃えが崩れて読みにくいときの対処

文字間隔を調整したら最後の文字までずれた、両端揃えにしたら単語間や文字間が間延びして読みにくい。これはletter-spacingの効き方と、text-align: justifyの隙間の配り方を理解すると整えられます。日本語特有の注意点もあります。

> Source HTML: https://giga-site.com/articles/letter-spacing-justify-broken
> Article index: https://giga-site.com/articles/index.md

## letter-spacingの効き方の基本

letter-spacing は文字と文字のすき間を一律に足す指定です。指定した値は各文字の「後ろ」に加算されるため、行末の最後の文字の後ろにもすき間が付き、中央揃えや右揃えで全体がわずかにずれて見えることがあります。

見出しを詰めて締まった印象にしたいときは負の値も使えますが、詰めすぎると文字同士が重なって読みにくくなります。本文では可読性を損なわない範囲に留めるのが基本です。

letter-spacingはアルファベットでは効果が分かりやすい一方、日本語では全角文字の間隔が広がりすぎて間延びしやすいので、値は控えめにするのがコツです。

## 両端揃え(justify)が間延びする理由

text-align: justify は、行の左右両端をそろえるために、行内の空白を引き伸ばして幅を埋めます。英文では主に単語間のスペースが伸びますが、日本語は単語をスペースで区切らないため、調整の余地が少なく不自然な隙間が出やすくなります。

特に行内に1〜2語しかない短い行や、URLのような途中で切れない長い文字列があると、わずかな箇所に隙間が集中して大きく間延びします。これが読みにくさの主因です。

つまりjustifyは、行あたりの文字数が十分にあり、自然に折り返せる文章でこそきれいに働きます。レイアウト幅と文章量の相性を見て使うことが大切です。

## 症状別チェック表

文字間隔・両端揃えが崩れて読みにくいは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

## 整える手順

読みやすさを保ちながら整えるには、次の順で調整すると判断しやすいです。

1. letter-spacingは本文では小さめ(または0)にし、見出しだけ微調整する
2. 両端揃えで間延びするなら、まず text-align を left に戻して比較する
3. justifyを使うなら、1行あたりの文字数が十分確保できる幅にする
4. 途中で切れない長い文字列には overflow-wrap: anywhere などで折り返しを許可する
5. 日本語の行間は line-height を1.6〜1.8程度にして読みやすさを補う

## 日本語の両端揃えで気をつけること

日本語でjustifyを使う場合、句読点や行頭・行末で来てはいけない文字の禁則処理が絡み、ブラウザによって隙間の配り方が変わることがあります。複数ブラウザで見え方を確認すると安全です。

どうしても両端をそろえたい段落と、自然な左揃えで十分な段落を分け、用途に応じて使い分けるのが現実的です。すべてを一律にjustifyにすると、かえって読みにくくなることがあります。

行末の処理を細かく整えたい場合は、text-justify などの関連指定の対応状況も踏まえて、実際の表示で確認しながら調整してください。

## 読みやすさを共有URLで確認する

文字間隔や両端揃えの読みやすさは、画面幅やフォント、端末によって印象が変わります。完成形に近い状態で、複数の環境から実際に読んでもらうのが確実です。

ギガサイト便なら、調整したHTML/ZIPをドロップして共有URLを発行し、関係者にそのまま読んでもらえます。スマホとPCで折り返しや間延びの出方が違うので、両方で確認してもらうと精度が上がります。

同じURLのまま中身を差し替えられるので、letter-spacingやtext-alignを変えて再確認する繰り返しがスムーズです。レビュアーを限定したいときはパスワードやメール認証を付けられます。

## よくある質問

### letter-spacingを足すと右端がずれるのはなぜですか

letter-spacingは各文字の後ろにすき間を足すため、行末の最後の文字の後ろにもすき間が付きます。これが中央揃えや右揃えで全体のずれとして見えます。見出しなどでは値を控えめにすると目立ちません。

### 日本語の両端揃えが間延びして読みにくいです

日本語は単語をスペースで区切らないため、justifyで広げられる箇所が少なく隙間が集中しがちです。1行あたりの文字数を十分確保できる幅にするか、左揃えに戻すと読みやすくなります。

### 長いURLがあると両端揃えが大きく崩れます

途中で折り返せない長い文字列があると、その手前に隙間が集中します。overflow-wrap: anywhere や word-break で折り返しを許可すると、隙間の偏りを抑えられます。

### 見出しを詰めて締まった印象にしたいです

見出しには負の letter-spacing を少し与えると引き締まります。ただし詰めすぎると文字が重なって読みにくくなるため、実際の表示を見ながら控えめに調整してください。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [スマホだけ表示が崩れるときの原因と直し方](https://giga-site.com/articles/broken-only-on-mobile/index.md)
- [印刷すると崩れる・はみ出すときの対処](https://giga-site.com/articles/print-layout-broken/index.md)
- [position:fixedの要素がずれるときの対処](https://giga-site.com/articles/position-fixed-broken/index.md)
- [重なり順（z-index）が効かず要素が隠れるときの原因と対処](https://giga-site.com/articles/z-index-stacking-broken/index.md)
- [セレクトボックス（プルダウン）の見た目が環境で違うときの対処](https://giga-site.com/articles/select-dropdown-style-broken/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "文字間隔・両端揃えが崩れて読みにくいときの対処",
  "description": "文字間隔の調整で最後の文字がずれる、両端揃えで単語間が間延びして読みにくいと感じる制作者向け。letter-spacingとtext-align:justifyの挙動と日本語特有の注意点をまとめています。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/letter-spacing-justify-broken",
  "url": "https://giga-site.com/articles/letter-spacing-justify-broken",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "letter-spacingを足すと右端がずれるのはなぜですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "letter-spacingは各文字の後ろにすき間を足すため、行末の最後の文字の後ろにもすき間が付きます。これが中央揃えや右揃えで全体のずれとして見えます。見出しなどでは値を控えめにすると目立ちません。"
      }
    },
    {
      "@type": "Question",
      "name": "日本語の両端揃えが間延びして読みにくいです",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "日本語は単語をスペースで区切らないため、justifyで広げられる箇所が少なく隙間が集中しがちです。1行あたりの文字数を十分確保できる幅にするか、左揃えに戻すと読みやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "長いURLがあると両端揃えが大きく崩れます",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "途中で折り返せない長い文字列があると、その手前に隙間が集中します。overflow-wrap: anywhere や word-break で折り返しを許可すると、隙間の偏りを抑えられます。"
      }
    },
    {
      "@type": "Question",
      "name": "見出しを詰めて締まった印象にしたいです",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "見出しには負の letter-spacing を少し与えると引き締まります。ただし詰めすぎると文字が重なって読みにくくなるため、実際の表示を見ながら控えめに調整してください。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```