スマホの文字化け・崩れを防ぐ！メディアクエリで文字の改行と非表示を操る完全ガイド

メディアクエリを使った文字折返しや非表示調整テクニック

先生と生徒の会話形式で理解しよう

生徒

「パソコンで作ったサイトをスマホで見ると、文章が変なところで改行されたり、ボタンがはみ出したりして困っています。」

先生

「それはレスポンシブデザインの課題ですね。メディアクエリを使って、画面サイズごとに文字の折り返し位置を変えたり、不要な要素を隠したりするテクニックが有効です。」

生徒

「画面の大きさに合わせて、見せ方を変えることができるんですね。具体的にはどうすればいいですか？」

先生

「まずは基本のメディアクエリの書き方から、文字を綺麗に見せるコツまで一緒に学んでいきましょう！」

1. レスポンシブサイトで文字の調整が必要な理由

ウェブサイトを制作する際、パソコンの大きな画面とスマートフォンの小さな画面では、表示できる情報の幅が全く異なります。パソコンでは一行に綺麗に収まっていたキャッチコピーも、スマホで見ると中途半端な場所で改行されてしまい、文章の意味が伝わりにくくなることがよくあります。これを防ぐのが、ＣＳＳ（スタイルシート）による文字の折り返し制御です。

特に最近は、グーグル（Google）などの検索エンジンも「スマホでの見やすさ（モバイルフレンドリー）」を重視しています。読みにくい改行や、画面からはみ出した画像は、サイトの評価を下げる原因にもなりかねません。プログラミング未経験の方でも、メディアクエリを使いこなすことで、どんな端末でも読みやすい「おもてなし」の行き届いたサイトを作ることができます。

2. メディアクエリで特定の文字だけを改行する方法

スマホの時だけ改行を入れたい場合、ＨＴＭＬの「ｂｒタグ（改行タグ）」をそのまま使うと、パソコンでも改行されてしまいます。そこで、メディアクエリを使って「特定の画面サイズの時だけ改行を有効にする」という手法を使います。

具体的には、まずＨＴＭＬに改行タグを書き、そのタグに名前をつけます。そして、ＣＳＳで「通常は非表示にするけれど、画面が狭くなったら表示する」という命令を出します。こうすることで、パソコンでは一行、スマホでは二行といった、柔軟なレイアウトの切り替えが可能になります。


<style>
/* パソコンでは改行を隠す */
.sp-br {
    display: none;
}

/* 画面幅が600px以下のときだけ改行を表示 */
@media (max-width: 600px) {
    .sp-br {
        display: inline;
    }
}

.text-sample {
    font-size: 18px;
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}
</style>

<div class="text-sample">
    <i class="bi bi-info-circle"></i> 
    ここはパソコンでは一行ですが、<br class="sp-br">スマホではここで改行されます。
</div>

ブラウザ表示

3. 逆にパソコンでは改行しスマホでは繋げるテクニック

先ほどとは逆に、パソコンの広い画面では読みやすくするために改行を入れているけれど、スマホの狭い画面では改行が多すぎると一画面に収まる情報が減ってしまいます。この場合は、パソコン用の改行をスマホで「無効化」する設定を行います。

「ディスプレイ：ノーネ（display: none）」という命令を使うと、その要素を完全に消し去ることができます。パソコン用の改行タグに対して、メディアクエリで「スマホの時は消す」という指示を与えるだけで、文章が自動的に横に繋がり、スマホの幅いっぱいに流れるような読みやすい文章になります。


<style>
.pc-br {
    display: inline;
}

/* スマホのときは改行を消して文章を繋げる */
@media (max-width: 600px) {
    .pc-br {
        display: none;
    }
}

.box-layout {
    line-height: 1.8;
    background-color: #e3f2fd;
    padding: 15px;
}
</style>

<div class="box-layout">
    パソコンでは見やすく改行を入れますが、<br class="pc-br">
    スマホでは画面が狭いので<br class="pc-br">
    一続きの文章として表示させます。
</div>

ブラウザ表示

4. 文章がはみ出さないように自動で折り返す設定

英語の長い単語や、非常に長いＵＲＬ（ホームページのアドレス）などがサイトに含まれていると、スマホの画面幅を突き抜けて横にはみ出してしまうことがあります。これはサイトがガタガタに見える大きな原因です。プログラミングの用語では「オーバーフロー」などと呼ばれます。

これを防ぐためには、「ワード・ブレイク（word-break）」という命令を使います。これを設定しておくと、どんなに長い単語でも、画面の端に来たら自動的に強制改行してくれます。メディアクエリを使って、特に画面の狭いスマホ向けの設定として入れておくのが一般的です。これにより、ユーザーが横スクロールを強いられるストレスをなくすことができます。


<style>
.url-text {
    background-color: #fff3e0;
    padding: 10px;
    border: 1px solid #ffb74d;
    /* 長い単語を途中で強制的に折る設定 */
    word-break: break-all;
}

@media (max-width: 600px) {
    .url-text {
        font-size: 14px; /* スマホでは文字も少し小さく */
    }
}
</style>

<div class="url-text">
    <i class="bi bi-link-45deg"></i>
    https://example.com/very/long/url/address/that/might/break/your/layout/if/not/handled/correctly/by/css
</div>

ブラウザ表示

5. スマホで不要な情報をバッサリ非表示にする判断基準

パソコンでは賑やかで見栄えが良い装飾用の画像や、詳細な表なども、スマホで見ると画面を占領しすぎて肝心の記事が読めなくなることがあります。レスポンシブデザインの極意は「引き算」です。スマホの時は、ユーザーが本当に知りたい情報（メインの記事や申し込みボタンなど）を優先し、サブの情報は思い切って隠してしまいましょう。

例えば、サイドバーにある長い広告や、大きな飾りのイラストなどは、メディアクエリを使ってスマホサイズ（例えば７６８ピクセル以下など）で「ディスプレイ：ノーネ」に設定します。これにより、スマホユーザーは迷うことなく目的の情報にたどり着けるようになります。検索エンジンにとっても、コンテンツが整理されているサイトは好印象です。

6. アイコンと文字のセットを切り替える工夫

パソコンでは「ホームへ戻る」という文字で表示していたボタンも、スマホでは画面の幅を節約するために「家のアイコン（図記号）」だけにしたい、という場合があります。これもメディアクエリの得意技です。文字を隠してアイコンだけを表示させるように調整します。

逆に、スマホではボタンを大きくして押しやすくし、パソコンでは小さく横に並べるといった調整も可能です。こうしたデバイスごとの「使い勝手」を考慮した設計は、アクセシビリティ（誰にとっても使いやすいこと）の向上に直結します。パソコンを触ったことがない方でも、自分のスマホを操作している時の感覚を思い出して、「ここにボタンがあったら便利だな」と考えるのが上達の近道です。


<style>
.nav-btn {
    background-color: #673ab7;
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
}

/* スマホでは文字を消してアイコンだけにする */
@media (max-width: 600px) {
    .nav-btn span {
        display: none;
    }
    .nav-btn {
        padding: 15px; /* スマホでは指で押しやすく大きく */
    }
}
</style>

<a href="#" class="nav-btn">
    <i class="bi bi-house-door-fill"></i>
    <span>ホームに戻る</span>
</a>

ブラウザ表示

7. 文字サイズ（フォントサイズ）の微調整で視認性を高める

メディアクエリを使った調整の中でも、最も頻繁に行われるのが文字サイズの変更です。パソコンで迫力のある大きなタイトル（４０ピクセルなど）を使っていると、スマホでは一行に二文字しか入らないといった悲惨な状況になります。逆に、パソコンでの小さな注釈がスマホでは小さすぎて読めない、ということもあります。

一般的に、スマホではパソコンよりも少しだけ文字サイズを控えめに調整することが多いです。しかし、本文の文字が小さすぎるとグーグルのモバイルフレンドリーテストでエラーが出てしまうため、最低でも１６ピクセル程度を保つのが理想とされています。メディアクエリを活用して、各画面サイズで「黄金の文字サイズ」を見つけ出しましょう。

8. 画像の回り込みをスマホで解除して縦に並べる

パソコンでは画像の横に文章を回り込ませて（画像を左、文字を右といった配置）お洒落に見せることがありますが、スマホではその幅が確保できません。そのままにしておくと、画像の横に文字が数文字だけ縦に並ぶという、非常に読みづらい状態になってしまいます。

メディアクエリの中で、画像の横並び設定を解除して、画像の下に文章が来るように「縦並び」への変更を指示しましょう。具体的には「フロート（float）」をオフにしたり、「フレックスボックス（flex-direction）」を縦（column）に変更したりします。スマホは縦にスクロールして読むデバイスなので、情報は素直に上から下へと流してあげるのが、最も使いやすい設計になります。

2026年最新スキルアップ・実践セミナー