コーディングの改行ルール完全ガイド｜読みやすく崩れないHTML・CSSの書き方

はじめに

コーディングにおける改行は、単にコードを見やすくするための装飾ではありません。HTML、CSS、JavaScriptの構造を正しく整理し、チームでの保守性を高め、レイアウト崩れを防ぐための重要なルールです。

特にHTMLコーディングでは、コード上の改行とブラウザ上で表示される改行が一致しないため、初心者が混乱しやすいポイントでもあります。「HTMLで改行したのに画面では改行されない」「brタグを入れたらスマホで見づらくなった」「CSSの書き方が人によってバラバラで修正しにくい」といった悩みは、改行ルールを理解することで大きく減らせます。

この記事では、コーディングにおける改行の基本から、HTML・CSS・JavaScriptでの実践的な書き方、レイアウトが崩れない改行設計、やってはいけない例までを体系的に解説します。

1. コーディングにおける改行とは

コーディングにおける改行には、大きく分けて「コードを読みやすくするための改行」と「ブラウザ上の表示を改行させるための改行」があります。

この2つを混同すると、コードの見た目は整っているのに画面表示が思い通りにならない、あるいは画面表示のためにコードが読みにくくなるといった問題が起こります。

1-1. コード上の改行とブラウザ表示上の改行の違い

コード上の改行とは、HTMLやCSS、JavaScriptのソースコード内で行を分けることです。これは主に人間が読みやすくするために行います。

HTML
<p>
  コーディングでは、
  改行ルールを決めることが大切です。
</p>

一方、ブラウザ表示上の改行とは、実際のWebページ上で文章や要素が次の行に表示されることです。

HTMLでは、コード上で改行しても、通常はブラウザ上の表示にはそのまま反映されません。たとえば上記のコードは、画面上では次のように1行で表示されることがあります。

コーディングでは、 改行ルールを決めることが大切です。

画面上で明示的に改行したい場合は、brタグを使うか、CSSで折り返しや表示幅を制御する必要があります。

1-2. HTML・CSS・JavaScriptで改行の意味が変わる理由

HTML、CSS、JavaScriptでは、それぞれ文法や役割が異なるため、改行の意味も変わります。

HTMLでは、改行は主に構造を見やすくするために使います。タグの入れ子関係を整理し、どの要素がどこに含まれているかを分かりやすくする役割があります。

CSSでは、セレクタ、プロパティ、値を見やすく分けるために改行します。プロパティを1行ずつ書くことで、後から修正しやすくなります。

JavaScriptでは、関数、条件分岐、配列、オブジェクトなどの処理単位を整理するために改行します。処理の流れを把握しやすくすることが目的です。

つまり、コーディングの改行はすべて同じ意味ではなく、言語や記述場所によって目的が異なります。

1-3. 改行ルールを決めるメリット

改行ルールを決める最大のメリットは、コードの読みやすさが安定することです。

人によって改行位置がバラバラだと、同じHTMLやCSSでも見た目が大きく変わり、修正箇所を探しにくくなります。逆に、一定の改行ルールがあれば、初めて見るコードでも構造を把握しやすくなります。

また、チーム開発では改行ルールの統一が特に重要です。フォーマットが統一されていないコードは、レビュー時に本質的ではない差分が増えます。改行やインデントの違いだけで大量の変更差分が出ると、バグの確認や仕様変更の把握が難しくなります。

1-4. 改行が読みやすさと保守性に与える影響

読みやすいコードは、修正しやすいコードです。

たとえば、HTMLのタグがすべて1行に詰め込まれていると、閉じタグの位置や入れ子構造が分かりにくくなります。CSSでも、複数のプロパティが1行に並んでいると、目的の指定を見つけるのに時間がかかります。

改行を適切に入れることで、コードの階層、まとまり、役割が視覚的に整理されます。その結果、修正ミスを防ぎやすくなり、保守性も向上します。

2. HTMLコーディングの改行ルール

HTMLコーディングでは、タグの構造を分かりやすくするために改行を使います。基本は「要素ごとに改行し、入れ子はインデントで表す」ことです。

2-1. タグごとに改行する基本ルール

HTMLでは、基本的にブロック単位のタグごとに改行します。

HTML
<section>
  <h2>サービス内容</h2>
  <p>当社ではWebサイト制作を行っています。</p>
</section>

開始タグ、子要素、終了タグを行ごとに分けることで、どの要素がどの範囲を囲んでいるのかが分かりやすくなります。

短いインライン要素の場合は、無理に改行しなくても問題ありません。

HTML
<p>詳しくは<a href="/contact/">お問い合わせ</a>ください。</p>

重要なのは、すべてを機械的に改行することではなく、構造が分かりやすい形に整えることです。

2-2. 入れ子構造を見やすくするインデントと改行

HTMLでは、親要素と子要素の関係をインデントで表します。

HTML
<nav class="global-nav">
  <ul>
    <li>
      <a href="/">ホーム</a>
    </li>
    <li>
      <a href="/service/">サービス</a>
    </li>
    <li>
      <a href="/contact/">お問い合わせ</a>
    </li>
  </ul>
</nav>

このように、階層が深くなるごとにインデントを入れると、構造を目で追いやすくなります。

インデントは、半角スペース2つまたは4つで統一するのが一般的です。タブを使う場合もありますが、プロジェクト内で統一することが大切です。

2-3. 属性が多いタグを改行する書き方

属性が多いタグを1行に書くと、横に長くなり読みづらくなります。その場合は、属性ごとに改行すると見やすくなります。

HTML
<img
  src="/images/main-visual.jpg"
  alt="コーディング作業をしているデスク"
  width="1200"
  height="600"
  loading="lazy"
>

フォーム要素や画像、ボタン、コンポーネントなどは属性が多くなりやすいため、無理に1行へ詰め込まないことが重要です。

ただし、属性の少ないタグまで毎回改行すると、かえってコードが縦に長くなりすぎます。1行が長くなりすぎる場合や、属性の意味を分けて見せたい場合に改行するのが実用的です。

2-4. テキスト内で改行したい場合のbrタグの使い方

HTMLで文章の途中に明示的な改行を入れたい場合は、brタグを使います。

HTML
<p>
  〒100-0001<br>
  東京都千代田区千代田1-1
</p>

brタグは、住所、詩、歌詞、署名、短い注記など、意味として改行が必要な場面で使います。

一方で、余白を作る目的でbrタグを連続して使うのは避けるべきです。

HTML
<p>見出しの下に余白を作りたい</p>
<br>
<br>
<p>次の文章</p>

このような余白調整はHTMLではなくCSSで行います。

CSS
p {
  margin-bottom: 24px;
}

2-5. pタグ・divタグ・brタグの正しい使い分け

pタグ、divタグ、brタグは、それぞれ役割が異なります。

pタグは段落を表すために使います。文章のまとまりを示すタグなので、通常の本文にはpタグを使います。

HTML
<p>コーディングの改行ルールを整えると、コードが読みやすくなります。</p>

divタグは、特定の意味を持たない汎用的なコンテナです。レイアウトやグルーピングのために使います。

HTML
<div class="card">
  <h3>HTMLコーディング</h3>
  <p>タグ構造を整理して記述します。</p>
</div>

brタグは、文章の途中で改行を入れるためのタグです。段落を分けるために使うものではありません。

段落を分けたい場合はpタグ、要素をまとめたい場合はdivタグ、文章内で意味のある改行を入れたい場合はbrタグを使います。

2-6. HTMLの改行が画面表示に反映されない理由

HTMLでは、通常の空白や改行はブラウザによってまとめて処理されます。そのため、ソースコード内で改行しても、画面上では1つの空白として扱われることが多くあります。

HTML
<p>
  HTMLで
  改行しても
  画面ではそのまま反映されません。
</p>

このコードは、画面上では次のように表示されることがあります。

HTMLで 改行しても 画面ではそのまま反映されません。

ブラウザ上で改行したい場合は、brタグを使う、CSSのwhite-spaceを使う、要素の幅を調整して自然に折り返す、といった方法を選びます。

3. CSSコーディングの改行ルール

CSSコーディングでは、セレクタとプロパティを分かりやすく整理することが重要です。基本は、セレクタの後に波括弧を置き、プロパティは1行ずつ記述します。

3-1. セレクタ・プロパティ・値の基本的な改行

CSSの基本的な改行ルールは次の形です。

CSS
.button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  background-color: #333;
  color: #fff;
  text-align: center;
}

セレクタ、プロパティ、値を整理して書くことで、どの要素にどのスタイルが適用されているのかが分かりやすくなります。

1行にまとめる書き方も可能ですが、実務では保守性が下がりやすいため、基本的には複数行で書くことをおすすめします。

CSS
.button { display: inline-block; padding: 12px 24px; border-radius: 8px; }

短く見えても、後から修正や追加をする際に読みづらくなります。

3-2. プロパティを1行ずつ書くべき理由

CSSでは、プロパティを1行ずつ書くことで変更点が分かりやすくなります。

CSS
.card {
  width: 100%;
  max-width: 360px;
  padding: 24px;
  background-color: #fff;
  border-radius: 12px;
}

このように書かれていれば、余白を変えたい場合はpadding、角丸を変えたい場合はborder-radiusをすぐに見つけられます。

また、Gitなどのバージョン管理を使う場合も、1行ずつ書いてあるほうが差分を確認しやすくなります。どのプロパティが追加・変更・削除されたのかが明確になるため、レビューの負担も減ります。

3-3. 複数セレクタを見やすく改行する方法

複数のセレクタに同じスタイルを適用する場合は、セレクタごとに改行します。

CSS
h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.5;
}

次のように1行で書くこともできますが、セレクタが増えると読みづらくなります。

CSS
h1, h2, h3 {
  font-weight: 700;
}

セレクタごとに改行しておくと、追加や削除がしやすく、変更差分も分かりやすくなります。

3-4. メディアクエリ内の改行とインデント

メディアクエリ内では、通常のCSSよりも階層が1つ深くなるため、インデントをそろえることが重要です。

CSS
.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media screen and (max-width: 768px) {
  .card-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

メディアクエリの中でも、セレクタとプロパティの改行ルールは通常と同じです。波括弧の対応関係が分かりにくくならないよう、インデントを崩さないことが大切です。

3-5. ショートハンドプロパティ使用時の注意点

CSSでは、marginやpadding、backgroundなどのショートハンドプロパティを使うと、複数の指定を1行でまとめられます。

CSS
.box {
  margin: 0 auto 40px;
  padding: 24px 32px;
}

便利な一方で、値の意味が分かりにくくなる場合があります。特にmarginやpaddingは、上・右・下・左の順番を理解していないと修正ミスが起こりやすくなります。

可読性を優先したい場合は、個別プロパティで書くのも有効です。

CSS
.box {
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 40px;
  margin-left: auto;
}

実務では、短く明確に書ける場合はショートハンドを使い、複雑になる場合は個別指定に分けるとよいでしょう。

3-6. CSSで文章の改行を制御するプロパティ

CSSでは、文章の改行や折り返しを制御できます。代表的なプロパティは次のとおりです。

CSS
.text {
  line-height: 1.8;
  word-break: normal;
  overflow-wrap: anywhere;
}

line-heightは行間を調整します。読みやすい本文にするためには、フォントサイズだけでなく行間の設定も重要です。

word-breakは、単語の途中で改行するかどうかを制御します。日本語と英語が混在するサイトでは、不自然な折り返しが起きないよう注意が必要です。

overflow-wrapは、長い英単語やURLなどが要素からはみ出す場合に折り返しを許可するプロパティです。

また、入力された改行を画面に反映したい場合は、white-spaceを使います。

CSS
.text {
  white-space: pre-line;
}

white-space: pre-line;を指定すると、HTML内やデータ内の改行をある程度反映しながら、通常の折り返しも行えます。

4. JavaScriptやテンプレート内の改行ルール

JavaScriptやテンプレートファイルでは、処理のまとまりを分かりやすくするために改行します。HTMLやCSSよりもロジックが複雑になりやすいため、改行とインデントの統一が特に重要です。

4-1. 関数・条件分岐・配列・オブジェクトの改行

関数は、処理の開始と終了が分かるように改行します。

JavaScript
function showMessage(name) {
  const message = `${name}さん、こんにちは。`;

  return message;
}

条件分岐も、条件と処理を分けて書くと読みやすくなります。

JavaScript
if (isLoggedIn) {
  showDashboard();
} else {
  showLoginForm();
}

配列やオブジェクトは、要素が少ない場合は1行でも問題ありません。

JavaScript
const colors = ['red', 'blue', 'green'];

要素が多い場合や、値が長い場合は改行します。

JavaScript
const user = {
  id: 1,
  name: '山田太郎',
  role: 'administrator',
  isActive: true,
};

4-2. 長いコードを折り返す基準

JavaScriptでは、1行が長くなりすぎると可読性が下がります。目安として、1行あたり80〜120文字程度に収めると読みやすくなります。

JavaScript
const filteredItems = items.filter((item) => {
  return item.isPublished && item.category === 'coding';
});

無理に短くしすぎる必要はありませんが、横スクロールが必要になるほど長いコードは避けるべきです。

関数の引数が多い場合も、引数ごとに改行すると読みやすくなります。

JavaScript
createUser(
  name,
  email,
  password,
  role,
  isActive
);

4-3. HTMLテンプレート内での改行の注意点

JavaScriptのテンプレートリテラルやフレームワークのテンプレート内では、改行が文字列や表示に影響する場合があります。

JavaScript
const html = `
  <p>
    コーディングの改行ルールを確認しましょう。
  </p>
`;

このようなテンプレート内の改行や空白は、HTMLとして解釈される場合があります。通常のHTML表示では大きな問題にならないこともありますが、インライン要素間の空白やテキストノードとして影響するケースもあります。

特に、React、Vue、Astro、PHPテンプレートなどを使う場合は、テンプレート内の改行がどのように出力されるかを確認しておくことが大切です。

4-4. 可読性を下げる不要な改行の例

改行は多ければ多いほどよいわけではありません。意味のない改行を入れすぎると、逆にコードが読みにくくなります。

JavaScript
const price = 1000;

const tax = 100;

const total = price + tax;

console.log(total);

このように、関連する処理の間に毎回空行を入れると、処理のまとまりが分かりづらくなります。

関連するコードは近くにまとめ、処理の区切りや意味が変わる場所で空行を入れるのが基本です。

JavaScript
const price = 1000;
const tax = 100;
const total = price + tax;

console.log(total);

4-5. フォーマッターを使った自動整形の基本

JavaScriptやHTML、CSSの改行ルールを手作業で統一するのは大変です。そのため、実務ではPrettierなどのフォーマッターを使って自動整形することが一般的です。

フォーマッターを使うと、保存時にコードの改行やインデントを自動でそろえられます。

たとえば、Prettierでは次のような設定ができます。

JSON
{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": true
}

printWidthは1行の長さの目安、tabWidthはインデント幅を指定します。チームで同じ設定を共有すれば、改行ルールのばらつきを減らせます。

5. 改行でレイアウトが崩れる原因と対策

コーディングの改行は、基本的にはコードの読みやすさのために使います。しかし、HTMLの空白や改行が画面表示に影響するケースもあります。特にインライン要素やbrタグの扱いには注意が必要です。

5-1. HTMLの空白・改行が表示に影響するケース

HTMLでは、複数の空白や改行はまとめて1つの空白として扱われることが多いですが、完全に無視されるわけではありません。

たとえば、インライン要素の間に改行を入れると、要素間に空白が表示されることがあります。

HTML
<a href="/about/">会社概要</a>
<a href="/contact/">お問い合わせ</a>

このように書くと、リンクの間に半角スペースのような余白が入る場合があります。通常は問題になりませんが、細かいレイアウト調整をしている場合には意図しないズレの原因になります。

5-2. インライン要素間に余白ができる原因

インライン要素やinline-block要素の間に改行や空白があると、ブラウザはそれをテキスト上の空白として扱うことがあります。

HTML
<ul class="nav">
  <li>ホーム</li>
  <li>サービス</li>
  <li>お問い合わせ</li>
</ul>

CSS
.nav li {
  display: inline-block;
}

この場合、li要素同士の間に空白が生まれることがあります。

対策としては、FlexboxやGridを使うのが現在では一般的です。

CSS
.nav {
  display: flex;
  gap: 24px;
}

display: flex;とgapを使えば、HTMLの改行による余白に左右されず、意図した間隔を指定できます。

5-3. brタグの多用でレスポンシブ対応が崩れる理由

brタグを使ってPC表示に合わせた改行を固定すると、スマホ表示で不自然になることがあります。

HTML
<h1>
  コーディングの改行ルールを学び、<br>
  読みやすいコードを書こう
</h1>

PCでは見やすくても、スマホでは1行が短くなりすぎたり、意図しない位置でさらに折り返されたりします。

特に見出しやキャッチコピーでbrタグを多用すると、デバイス幅によってバランスが崩れやすくなります。画面幅に応じて自然に折り返す設計を基本にし、固定改行は必要な場所だけに限定しましょう。

5-4. CSSで自然に折り返す設定方法

文章を自然に折り返したい場合は、HTMLにbrタグを入れるのではなく、CSSで幅や行間を調整します。

CSS
.heading {
  max-width: 720px;
  line-height: 1.5;
}

本文では、読みやすい横幅を設定することも重要です。

CSS
.article-body {
  max-width: 760px;
  line-height: 1.8;
}

長い英単語やURLがはみ出す場合は、次のように指定します。

CSS
.article-body {
  overflow-wrap: break-word;
}

デザイン上の改行位置を無理にHTMLで固定するのではなく、CSSで自然に収まる幅を設計することが、崩れにくいコーディングにつながります。

5-5. PCとスマホで改行位置を変える方法

PCとスマホで改行位置を変えたい場合は、brタグにクラスを付けて表示・非表示を切り替える方法があります。

HTML
<h1>
  コーディングの改行ルールを学び、<br class="pc-only">
  読みやすいHTML・CSSを書こう
</h1>

CSS
.pc-only {
  display: inline;
}

@media screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }
}

このようにすれば、PCでは改行し、スマホでは改行しない表示にできます。

逆にスマホだけで改行したい場合は、sp-onlyのようなクラスを用意します。

HTML
<h1>
  コーディングの改行ルールを<br class="sp-only">
  学ぼう
</h1>

CSS
.sp-only {
  display: none;
}

@media screen and (max-width: 768px) {
  .sp-only {
    display: inline;
  }
}

ただし、この方法も使いすぎるとHTMLが複雑になります。まずはCSSの幅やフォントサイズで自然に調整できないかを検討しましょう。

5-6. 崩れにくい改行設計の考え方

崩れにくい改行設計では、画面幅に依存しすぎないことが重要です。

PCの見た目だけを基準にbrタグで改行を固定すると、スマホやタブレットで崩れやすくなります。反対に、HTMLは意味構造を保ち、CSSで幅、行間、余白、折り返しを調整すれば、複数のデバイスに対応しやすくなります。

基本方針は次のとおりです。

HTML：意味のある構造を書く
CSS：見た目や折り返しを調整する
brタグ：意味として必要な改行に限定する

この考え方を守ることで、読みやすく崩れにくいコーディングができます。

6. 読みやすいコードにする改行・インデントの実践ルール

読みやすいコードを書くためには、改行とインデントのルールをあらかじめ決めておくことが大切です。個人開発でもチーム開発でも、一定の基準があるだけでコードの品質は大きく安定します。

6-1. 1行あたりの文字数の目安

1行あたりの文字数は、80〜120文字程度を目安にすると読みやすくなります。

HTMLでは、属性が多いタグや長いテキストを無理に1行へ詰め込まないようにします。

HTML
<a
  href="/download/"
  class="button button-primary"
  target="_blank"
  rel="noopener noreferrer"
>
  資料をダウンロードする
</a>

CSSやJavaScriptでも、横スクロールしないと読めないコードは避けるべきです。画面サイズやエディタの設定にもよりますが、チームでprintWidthなどの基準を決めておくと統一しやすくなります。

6-2. 階層構造をそろえるインデントルール

インデントは、コードの階層を表すための重要な要素です。

HTML
<section class="section">
  <div class="section-inner">
    <h2>見出し</h2>
    <p>本文が入ります。</p>
  </div>
</section>

親要素の中に子要素がある場合は、子要素を1段下げます。さらに孫要素がある場合は、もう1段下げます。

インデントがそろっていないと、タグの閉じ忘れや階層の間違いに気づきにくくなります。

HTML
<section>
<div>
  <p>インデントが崩れています。</p>
</div>
</section>

このようなコードは、構造を把握しにくく、修正ミスの原因になります。

6-3. 関連するコードをまとまりで分ける方法

関連するコードは近くにまとめ、役割が変わる場所で空行を入れます。

CSS
.card {
  padding: 24px;
  border-radius: 12px;
  background-color: #fff;
}

.card-title {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
}

.card-text {
  line-height: 1.8;
}

同じコンポーネントに関するスタイルは近くにまとめると、修正しやすくなります。逆に、無関係なスタイルが混在していると、どこを変更すればよいか分かりにくくなります。

JavaScriptでも、変数定義、処理、返り値などのまとまりを意識して空行を入れます。

JavaScript
const price = 1000;
const taxRate = 0.1;

const tax = price * taxRate;
const total = price + tax;

return total;

6-4. コメント前後の改行ルール

コメントは、コードの意図を補足するために使います。コメントの前後に適度な空行を入れると、セクションの区切りが分かりやすくなります。

CSS
/* Layout */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Button */
.button {
  display: inline-block;
  padding: 12px 24px;
}

ただし、すべての行にコメントを入れる必要はありません。コードを見れば分かる内容をコメントにすると、かえって読みにくくなります。

CSS
/* 文字色を黒にする */
.text {
  color: #000;
}

このようなコメントは不要な場合が多いです。コメントは「なぜその指定にしているのか」を補足するために使うと効果的です。

6-5. チーム開発で改行ルールを統一する方法

チーム開発では、個人の好みで改行ルールを決めるのではなく、プロジェクト全体で基準を統一します。

決めておきたい項目は次のようなものです。

・インデント幅は2スペースか4スペースか
・1行の文字数の目安
・HTML属性を改行する基準
・CSSのプロパティ順
・空行を入れる位置
・フォーマッターの使用有無

ルールをドキュメント化しておけば、新しく参加したメンバーも迷わずコーディングできます。

また、レビューで毎回改行の指摘をするのは非効率です。できるだけツールで自動化し、人間は設計や仕様、アクセシビリティなどの重要な確認に集中できるようにしましょう。

6-6. PrettierやEditorConfigで整形を自動化する方法

改行やインデントの統一には、PrettierやEditorConfigが役立ちます。

.editorconfigでは、エディタ共通の基本設定を管理できます。

INI
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

Prettierでは、HTML、CSS、JavaScriptなどのフォーマットを自動整形できます。

JSON
{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": true,
  "bracketSameLine": false
}

これらの設定ファイルをプロジェクトに含めておけば、メンバー全員が同じ改行ルールでコーディングできます。

7. やってはいけない改行の書き方

改行は便利ですが、使い方を間違えるとコードの可読性やレイアウトに悪影響を与えます。ここでは、特に避けたい改行の書き方を紹介します。

7-1. brタグで余白調整をする

brタグを使って余白を作るのは避けましょう。

HTML
<p>お問い合わせはこちら</p>
<br>
<br>
<a href="/contact/">お問い合わせフォーム</a>

この書き方は、HTMLの意味構造を崩してしまいます。余白はCSSで指定します。

CSS
.contact-text {
  margin-bottom: 24px;
}

brタグはあくまで文章内の改行を表すためのタグです。デザイン上の余白調整には使わないようにしましょう。

7-2. 意味のない空行を入れすぎる

空行は、コードのまとまりを分かりやすくするために使います。しかし、意味のない空行が多すぎると、かえって読みにくくなります。

CSS
.title {
  font-size: 24px;

  font-weight: 700;

  line-height: 1.5;
}

関連するプロパティの間に空行を入れすぎると、まとまりが分断されて見えます。

CSS
.title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}

空行は、関連するコードの区切りやセクションの切り替わりで使うのが基本です。

7-3. インデントがそろっていないコードを書く

インデントがそろっていないコードは、構造を誤解しやすくなります。

HTML
<ul>
<li>ホーム</li>
  <li>サービス</li>
    <li>お問い合わせ</li>
</ul>

正しくは、同じ階層の要素は同じインデントにそろえます。

HTML
<ul>
  <li>ホーム</li>
  <li>サービス</li>
  <li>お問い合わせ</li>
</ul>

HTML、CSS、JavaScriptのどれでも、同じ階層は同じ位置にそろえることが基本です。

7-4. 画面表示目的とコード整形目的を混同する

コードを見やすくするための改行と、画面上で改行させるための指定は別物です。

HTMLファイル内で文章を改行しても、通常は画面上にそのまま反映されません。

HTML
<p>
  ここで改行したい
  と思っても、画面では改行されません。
</p>

画面で改行したい場合は、brタグやCSSを使います。

HTML
<p>
  ここで改行したい<br>
  と思った場合はbrタグを使います。
</p>

ただし、表示のためにbrタグを多用するのではなく、CSSで自然な折り返しを設計することも大切です。

7-5. スマホ表示を考えずに固定改行する

PCの見た目だけを基準に改行を固定すると、スマホで崩れやすくなります。

HTML
<h1>
  読みやすく崩れない<br>
  HTML・CSSの書き方
</h1>

この改行位置がPCでは自然でも、スマホでは不自然になることがあります。

スマホ表示も考えるなら、CSSで表示幅やフォントサイズを調整し、必要に応じてメディアクエリでbrタグの表示を切り替えます。

CSS
@media screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }
}

固定改行は、すべての画面幅で問題がないか確認してから使いましょう。

8. HTML・CSSの改行ルール実例

ここでは、読みにくいコードと読みやすいコードを比較しながら、実務で使える改行ルールを確認します。

8-1. 読みにくいHTMLの改行例

次のHTMLは、すべての要素が詰め込まれていて構造が分かりにくい例です。

HTML
<section><div><h2>サービス内容</h2><p>当社ではWebサイト制作を行っています。</p><a href="/service/">詳しく見る</a></div></section>

短いコードに見えますが、要素の階層が分かりにくく、修正時にタグの対応関係を確認しづらくなります。

属性が多い場合も、1行に詰め込むと読みにくくなります。

HTML
<img src="/images/service.jpg" alt="Webサイト制作の作業風景" width="800" height="500" loading="lazy" class="service-image">

8-2. 読みやすいHTMLの改行例

同じHTMLでも、タグごとに改行し、インデントをそろえると読みやすくなります。

HTML
<section class="service">
  <div class="service-inner">
    <h2>サービス内容</h2>
    <p>当社ではWebサイト制作を行っています。</p>
    <a href="/service/">詳しく見る</a>
  </div>
</section>

属性が多いタグは、属性ごとに改行すると見やすくなります。

HTML
<img
  src="/images/service.jpg"
  alt="Webサイト制作の作業風景"
  width="800"
  height="500"
  loading="lazy"
  class="service-image"
>

HTMLコーディングでは、要素の意味と階層がひと目で分かるように改行することが大切です。

8-3. 読みにくいCSSの改行例

次のCSSは、複数のプロパティが1行にまとまっていて読みにくい例です。

CSS
.card { width: 100%; max-width: 360px; padding: 24px; background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }

どのプロパティが指定されているかを確認するために、横方向へ目を動かす必要があります。修正やレビューにも向いていません。

また、インデントが崩れているCSSも避けるべきです。

CSS
.card {
width: 100%;
  padding: 24px;
border-radius: 12px;
}

8-4. 読みやすいCSSの改行例

CSSは、プロパティを1行ずつ書くと読みやすくなります。

CSS
.card {
  width: 100%;
  max-width: 360px;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

複数セレクタの場合も、セレクタごとに改行します。

CSS
.card-title,
.card-text,
.card-link {
  margin: 0;
}

メディアクエリ内でも、通常のCSSと同じように改行とインデントをそろえます。

CSS
@media screen and (max-width: 768px) {
  .card {
    padding: 16px;
  }
}

8-5. レイアウトが崩れにくい改行例

レイアウトを崩れにくくするには、HTMLで無理に改行を固定せず、CSSで自然に折り返す設計にします。

HTML
<h1 class="hero-title">
  コーディングの改行ルール完全ガイド
</h1>

CSS
.hero-title {
  max-width: 720px;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.4;
}

このようにすれば、画面幅に合わせて文字サイズと折り返しが自然に調整されます。

どうしてもPCだけで改行したい場合は、クラス付きのbrタグを使います。

HTML
<h1 class="hero-title">
  コーディングの改行ルール完全ガイド<br class="pc-only">
  読みやすく崩れないHTML・CSSの書き方
</h1>

CSS
.pc-only {
  display: inline;
}

@media screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }
}

固定改行に頼りすぎず、CSSで柔軟に調整することがポイントです。

8-6. 実務で使える改行チェックリスト

コーディング時は、次の点を確認すると改行ルールを整えやすくなります。

・HTMLのタグ構造が改行とインデントで分かりやすいか
・同じ階層の要素が同じインデントになっているか
・属性が多いタグを無理に1行へ詰め込んでいないか
・CSSのプロパティを1行ずつ書いているか
・複数セレクタを見やすく改行しているか
・メディアクエリ内のインデントが崩れていないか
・brタグを余白調整に使っていないか
・スマホ表示で固定改行が不自然になっていないか
・不要な空行を入れすぎていないか
・PrettierやEditorConfigで自動整形できる状態か

このチェックリストを使うことで、HTML・CSSの改行ミスやレイアウト崩れを減らせます。

9. コーディングの改行に関するよくある質問

コーディングの改行について、初心者がつまずきやすい疑問をまとめます。

9-1. HTMLで改行してもブラウザに反映されないのはなぜ？

HTMLでは、ソースコード内の通常の改行や連続した空白は、ブラウザ上ではまとめて扱われるためです。

HTML
<p>
  ここで
  改行しても
  画面ではそのまま表示されません。
</p>

このコードは、画面上では1行の文章として表示されることがあります。

画面上で改行したい場合は、brタグを使うか、CSSのwhite-spaceを使います。

CSS
.text {
  white-space: pre-line;
}

ただし、通常の文章ではCSSで幅を調整し、自然に折り返す設計にするのがおすすめです。

9-2. brタグは使わないほうがいい？

brタグは使ってはいけないタグではありません。住所、詩、署名、短い定型文など、意味として改行が必要な場面では使って問題ありません。

HTML
<p>
  株式会社サンプル<br>
  〒100-0001 東京都千代田区千代田1-1
</p>

ただし、余白調整やレイアウト調整のためにbrタグを使うのは避けましょう。余白はCSSのmarginやpaddingで指定します。

9-3. CSSだけで文章を改行できる？

CSSだけで、文章の折り返し方や改行の扱いを制御することはできます。

たとえば、要素の幅を指定すれば、文章は自然に折り返されます。

CSS
.text {
  max-width: 640px;
  line-height: 1.8;
}

また、テキスト内の改行を反映したい場合は、white-spaceを使えます。

CSS
.text {
  white-space: pre-line;
}

ただし、特定の文字位置で必ず改行したい場合は、HTML側でbrタグを使う必要があるケースもあります。

9-4. コードの改行はSEOに影響する？

HTMLやCSSのコード上の改行そのものが、検索順位に直接大きな影響を与えるわけではありません。

ただし、改行ルールが整理されたコードは、保守しやすく、表示崩れやHTML構造のミスを防ぎやすくなります。結果として、ユーザーが読みやすいページを維持しやすくなり、サイト品質の向上につながります。

SEOを考えるうえでは、コードの改行そのものよりも、正しいHTML構造、適切な見出し、読みやすい本文、モバイル対応、表示速度、アクセシビリティなどが重要です。

9-5. 自動整形ツールを使えば改行ルールは不要？

自動整形ツールを使っても、改行ルールの考え方は必要です。

Prettierなどのツールは、決められた設定に従ってコードを整形してくれます。しかし、どのようなHTML構造にするか、どこでコンポーネントを分けるか、brタグを使うべきか、CSSで調整すべきかといった判断は人間が行う必要があります。

自動整形ツールは、改行ルールを不要にするものではなく、決めたルールを安定して適用するためのものです。

9-6. 初心者はどの改行ルールから覚えるべき？

初心者は、まず次の3つを覚えるとよいでしょう。

1. HTMLはタグの階層に合わせて改行・インデントする
2. CSSはプロパティを1行ずつ書く
3. 画面上の改行とコード上の改行を混同しない

この3つを意識するだけでも、コーディングの読みやすさは大きく変わります。

次に、brタグを余白調整に使わないこと、スマホ表示を考えて固定改行を入れすぎないこと、PrettierやEditorConfigで整形を自動化することを覚えていくと、実務でも通用する改行ルールが身につきます。

まとめ

コーディングにおける改行は、コードを読みやすくし、保守しやすくし、レイアウト崩れを防ぐための重要な要素です。

HTMLでは、タグごとに改行し、入れ子構造をインデントで分かりやすく表します。ただし、HTML上の改行がそのままブラウザ表示に反映されるわけではありません。画面上で改行したい場合は、brタグやCSSを適切に使う必要があります。

CSSでは、セレクタとプロパティを見やすく改行し、プロパティは基本的に1行ずつ書きます。メディアクエリ内でもインデントをそろえ、複数セレクタやショートハンドプロパティの扱いにも注意しましょう。

JavaScriptやテンプレートでは、関数、条件分岐、配列、オブジェクトなどのまとまりを意識して改行します。長すぎるコードは適切に折り返し、Prettierなどのフォーマッターを活用すると改行ルールを統一しやすくなります。

また、brタグで余白調整をする、意味のない空行を入れすぎる、スマホ表示を考えずに固定改行する、といった書き方は避けるべきです。

改行ルールを整えることは、見た目のきれいなコードを書くためだけではありません。修正しやすく、ミスが少なく、チームでも扱いやすいコードを書くための基本です。HTML・CSS・JavaScriptそれぞれの役割を理解し、読みやすく崩れないコーディングを意識しましょう。