loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [ウェブデザイン] > iPhone(スマホ)をスクロールすると画面が左右にブれるのは改行されない文字列のせい?
この記事は約4分で読めます。

iPhone(スマホ)をスクロールすると画面が左右にブれるのは改行されない文字列のせい?

投稿日:2015.6.10

なんというか、たまに iPhone(スマホ)でウェブページを見てると、
スクロールするたびに画面が少しづつ左右(斜め)に動いてしまうサイトがあったりしませんか。

まっすぐ下にスクロールしたつもりがだんだん右(左)にそれていく感じ…って言えば
わかりやすいでしょうか。

「あ~あ、まただよ」なんて思ってた矢先、
この前、自分で作ったサイトでも同様の症状が起きちゃいましてね。

慌てて修正を加えましたさ。

SIRIUSレビューイメージ画像

増えるスマホ閲覧者数

最近のホームページはレスポンシブデザインが主流とあってか、
iPhone(スマホ)でサイトを見ると
PCとは違ったスマホ専用のレイアウトで表示されるところが多いです。

このサイトも多分に漏れず。

そしてiPhone(スマホ)専用レイアウトはだいたいにして
画面横幅が固定されてるもんです。

縦スクロールはできても横スクロールはできません。

指で横にスワイプしても画面は動かないでしょ?

でもまれに動いちゃうこともある、、、、そんな経験ないですか。

それは本来画面の右端で改行されるべき文字列が改行されずに右端にどんどん伸びてしまったことが原因で、横スクロールが偶然発生したのかもしれません。

あるいは PC用の大きい画像がそのまま縮小されずにiPhone(スマホ)で表示されちゃったために横スクロールが発生したっていう場合もあるでしょう。

文字列が改行されないケースっていうのは
空白(半角スペース)を挟まない英数字が連続してたり、
英数字の長めの固有名詞なんかの場合に起こりえるようです。

たとえばこちら↓なんかがその例です。

本来 iPhone(スマホ)の画面に表示されるエリアはピンクで囲った領域で”固定表示”のハズなんですが、改行されない文字列が打ち込まれていたばかりに、
その文字列を全部見せようと iPhone上で本来の固定領域が左にスクロールできるようになってしまったというものです。

キャプチャ画像

これが発生すると縦スクロール時にまっすぐスクロールせず、
広がってしまった横幅の分だけ左に右に揺れながらの縦スクロールが発生しちゃいます。

画面が落ち着かないんです。

見たい位置で止めたとしても必ずしも左端でストップするわけでもないので
指で画面をスワイプしてついつい左端を探しちゃいます。

こういう横スクロール(スワイプ)ってストレスを感じさせませんか?

私は苦手です。

ウェブサイトに限らず Wordや Excelでも同じようなことが言えますでしょ。

横スクロールが発生するとホント見づらいというかなんというか。。。。

さてこの解決法ですが、強制的に改行させるには CSSで設定するのが一般的です。

ただいろいろあるんですよね、細かな違いが。

それを説明すると余計にわからなくなっちゃうし、
ケースによっても有効・無効が発生するのでここではシンプルな例だけを取り上げます。

それがコチラ。

簡単に言うと、

『区切りのよさそうなところで改行しまっせ』というもの。

2行目はあってもなくてもいいかも。

CSS3での”word-wrap”の改称(予定?)用で付けてあるだけです。

小難しい説明は他でお任せするとして、
コレ、実は私のサイトでも設定はしてあったんです。

でもよくよくみたらコード表示用のクラスにしか設定してなかったというオチでした。

なおこのコードは”継承”コードなのでどうせなら大元のところで設定しちゃいましょう。

そう、bodyに設定すればどんな場面でも”ほぼ”改行してくれます。
(”ほぼ”っていうあいまいな表現なのはどうぞお許しを。)

で、これを設定すると、
さきほどの画面はこちら↓のように改行されて固定幅に戻ります。

キャプチャ画像

もしも有料・無料のテーマを取り入れてワードプレスサイトを運営している方は
style.css”body”内を確認してみるといいかもしれません。

区切り画像

画像が大きいから横スクロールが発生する場合は
max-width:100%を指定すれば問題は解決するでしょう。

(説明がはしょりすぎ!って言わないで)

あと HTMLのテーブル(table)内では挙動が少し違ってくるようです。

私はこれまでテーブルでの改行に悩んだことはないので調査してませんが、
調べていくとそこそこ面倒くさいっぽいですね。

ただテーブル内で強制改行が必要な場面はブログ等ではほとんど出てこないと思うし、
理屈がちょっとわかりにくいので今回は割愛します。
(に、逃げたんじゃないよ!ボソッ)

ホントのことを言うと実は私も完全には理解してないのデス (-_-;)。。。
なんとなくはわかるんですが説明できるほどには至ってません。

まあ、必要に迫られたらきっちり調べてご報告しますんで、
今日はこれにて。

以上です。

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「FOCUS (TCD030)」

コメント(4件)

  • おぅちゃん より:

    こんにちは^^
    ブログランキングから来ました
    おぅちゃんと申します。

    ブログがスマホサイトで
    どう表示されているか?

    ちゃんとその都度確認しないと
    ダメですね(^_^;)

    今まで確認しておりませんでした。。。
    早速確認致します!!

    ポチッと応援致しました!

    • cuisine より:

      おぅちゃんさん、こんにちは。きゅいじんです。
      コメントありがとうございます。最近はスマホ閲覧が増えてますから気をつけたいですね。

  • まっきー より:

    こんにちは、ランキングから来ました!

    この現象、時々発生しているサイトさんがあるので、
    もっと対処法を知っていただけるといいですね( *^艸^)

    ランキング応援させて頂きました♪

    • cuisine より:

      まっきーさん、こんにちは。きゅいじんです。
      コメントありがとうございます。
      この現象の対処法っていろいろあるので大変です。

コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

先頭へ