PCサイトのレスポンシブ化で横揺れさせない3つのポイント

PCサイトのレスポンシブ化で横揺れ(水平スクロール)させないポイントを3つ紹介します。

幅をガチガチに指定するPC脳は捨てて、レスポンシブ脳に切り替えましょう!

はにわまん
スマホ画面風のフレームにはめて、分かりやすく比較してみました!

レスポンシブ化のチェックリスト

要素の幅はMax100%

最大幅を100%にしないと、画面からはみ出ても表示され続けてしまいます。指定の方法は、max-width: 100%;。画像はアスペクト比を保つために、height: auto;とセットで覚えるようにしましょう。

img {
    width: 700px;
    max-width: none; /* 初期値 */
    height: auto;
}
img {
    width: 700px;
    max-width: 100%;
    height: auto;
}

要素の幅にpaddingborderを含める

width: 100%;にしてもはみ出すことがあります。これは、paddingbordermarginのいずれかが影響している可能性が高いです。

レスポンシブデザインでは、基本的に左右のmarginは指定しないこと(親要素のpaddingで調整する)

そして、widthの大きさをpaddingborderを含んだ値にすることが大切です。box-sizing: borderーbox;を指定することではみ出す確率を下げることができます。

box-sizingを指定しないパターン
box-sizing: content-box; /* 初期値 */
width: 100%;
padding: 10px;
border: 2px solid rgba(0,0,0,.2);
左右のpaddingの20pxと、左右のborderの4px分、はみ出す。
box-sizingを指定するパターン
box-sizing: border-box;
width: 100%;
padding: 10px;
border: 2px solid rgba(0,0,0,.2);
width: 100%;の中にpaddingborderが内包されるので、はみ出さない。

区切れない英字は折り返す

HTMLは単語の途中では折り返さない仕様となっています。

単語の区切りが明確でないような長い文字列がある場合は、CSSで無理やり折り返す処理を行いましょう!

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

word-break: normal; /* 初期値 */
単語を折り返さないまま画面を突き抜ける。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

word-break: break-all;
単語の途中でも折り返してくれる。

おわり


Web屋としてスマホサイトの横揺れはとてもダサいです。技術力のなさを露呈している感じがして、指摘されるととても恥ずかしくなります。

横揺れはユーザーにとっても大きなストレスとなります。今回紹介した3つのパターンを覚えるだけでも防げる確率は格段に上がりますので、ぜひ覚えてください!

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事