過去のブログ記事をスマホでチェックしてみたら、レイアウトが崩れているのを発見 複数の原因があって、修正に四苦八苦してしまったorz 同じような事で悩んでいる人もあるかも知れないので一応記録
原因の一つは、テキストの折り返しの問題でした。 非常に長い記事だったので、その中でどこに問題があるのか原因箇所を突き止めるのに苦労してしまいましたが、力技を使用してなんとか発見 （※力技：記事を全部白紙にして、数行ずつ貼り付けていって結果を確認する。） 判明した原因箇所は、長いURLをそのまま貼り付けていた部分でした。 長いURLが一つの単語と判定されて折り返しが作動せず、横に伸びてしまっていた、と。 ただこれは特に指定していなければ正常な仕様のようですね。
☆テキスト折り返し仕様のおさらい テキストを折り返すかどうかは「white-space」の指定が「normal / pre-line / pre-wrap」の場合、自動的に折り返される。ただし、英単語の途中では折り返されない。(長い英単語は折り返されずにはみ出して表示される。) （white-spaceが「nowrap / pre」だと折り返されない。） 単語の途中での折り返すには別途「overflow-wrap」で「break-word」を指定する必要がある。 ※「break-word:break-all;」でも折り返してくれるが、単語の切れ目(半角スペース)を一切考慮せず単語の途中で機械的に折り返すだけとなる。（overflow-wrapだと可能な範囲で切れ目を考慮した折り返し方になる。） テキスト折り返しについて詳しい説明はこちら
なので、長いURLは切れ目のない長いひとつの単語として解釈される＝折り返されないため、横にはみ出してしまうのは正常な状態なわけで。 PC画面では気づいていなかったのですが、モバイル表示だと画面の幅が狭いたため、長いURLは横にはみ出してしまう事になるわけですね。 ※必ずモバイル画面表示を確認しないといけませんね（特にモバイル表示を意識せず書いていた古い記事だと色々表示上の問題が起きている事が多い・・・＞＜） モバイルのときの記事の領域に「overflow-wrap:break-word」を指定してやる事で無事解決。
ところが、まだ横にはみ出してしまう要素がある記事があり・・・ 幅を100%で指定しているのに、その領域が100%を越えて外にはみ出している・・・ これは、原因は、「box-sizing」でした。 「box-sizing」というのは、領域の計算の仕方で、「枠線の太さ」と「PADDING」の数値を、指定した領域に含むかどうかを指定するものですね。 100pxの幅の要素を作り、そこに太さ10pxの枠線を付け、10pxのPADDINGを指定した場合、 「box-sizing:content-box;」(デフォールト)では100px＋枠線の太さとPADDINGで実際の要素の幅は140pxになってしまうわけです。 「box-sizing:border-box;」だと、100pxの領域の中に先の太さとPADDINGが含まれるように計算されるため、要素全体の幅は100pxのままになります。 つまり、要素の幅を100%に指定していても、box-sizingにborder-boxが指定されていないと、枠線の太さとPADDINGの数値分、領域が広がってしまうのですね。 ということで、この問題は「box-sizing:border-box;」を指定してやることで解決
しかし、もうはみ出している要素はないはずなのに、まだ、モバイル画面で横ズレ(横にスクロールできてしまう)が発生している・・・orz 記事の領域に「overflow:hidden;」を指定してしまえば横ズレはしなくなるのですが、そもそもはみ出している領域がなければoverflow:hiddenを指定しなくても横スクロールは発生しないはず・・・ で、いくら探しても自分で原因がみつけられず、Simplicityのサポート掲示板で訊ねてみたところ、あっさりと、はみ出している要素があるのを指摘して頂きました・・・アリガトウゴザイマシタorz 見落としていました、いや、何度か気にはなっていたのですが、結局確認に至らずスルーしてしまっていた部分でした・・・ 単なる自分の凡ミスですね。orz 実はインフルエンザで療養中に作業していたので、どうも意識が朦朧としていた部分があった、と言うのは言い訳にしかなりませんが(*_*;) 結論としては、左右marginでマイナス値を使用しておりましたが、それがモバイル表示時の記事の領域を超える数値で指定されていたのが原因でした。 モバイル表示とPC表示で記事の領域幅のpaddingをそれぞれ別に調整していたのは良いのですが、PC用設定がそのままモバイル用に流用されてしまっていた部分があったというわけです。
とりあえず、これでモバイル表示でも崩れることなく表示されるようになったはず・・・ ですが、古い記事のモバイル時の表示をちゃんと確認しないといけませんねぇ、昔はモバイル表示などまったく意識していないで書いていた時期がありましたので・・・ 今はモバイルからのアクセスが50%を越えつつある状況となりましたので、モバイル表示もちゃんと確認しないといけませんね。 まぁ古い記事のチェックは、ぼちぼちやっていくしかないですね・・・(^_^;)
コメント