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つのパターンを覚えるだけでも防げる確率は格段に上がりますので、ぜひ覚えてください!

このページが気に入ったら
いいね!しよう

最新の情報をお届けします。

同じカテゴリーの記事