郵便番号関連サービス サイトで、ちょっとした不具合を修正しました。 AMPでサイトを閲覧されたときに、長いローマ字が見切れてしまっていました(見切れるというのは、画面からはみ出してしまって見えない部分が出てしまうこと)。たとえば 〒600-8436 のページです。 赤丸で囲んである部分が 途中から表示されていなかった点を 折り返しで対応 AMPでなければ横スクロール可能ですので見ようと思えば見えていたのですが、AMPでは横スクロールバーが表示されず(自分がそういうCSSにしているだけかも知れない)、完全に見えなくなってしまっていました。これでは本当にローマ字を必要とする利用者に正しい情報が伝わりません。 なので、これを修正しました。 修正方法は、スタイルシートでbodyに word-break: break-all; を追加しただけです。 ちょっとしたことですが、スマホ対応サイトでは重要なことでしょう。 さて、今回なぜこれに気づいたかと言うと、前述の通り、長いローマ字のあるページをたまたま表示したためです。 ローマ字はアルファベットのみの文字列であるため、ブラウザに1つの英単語のように扱われます。1つの単語はデフォルトでは画面端に到達しても改行されず、横スクロール発生となります。 ところがスマホ前提のAMPだったので横スクロールを考慮しておらず、どうやっても見ることが出来ない部分が出てしまっていました。 当サイトでは住所のローマ字表記を扱っているので、地名によってはそれなりに長い文字列が発生します。区切りとしてスペースやハイフンがあれば改行されるのかも知れませんが、住所という特性上それらも無く、仮にあったとしても全データにおいて100%確実に表示されるという保障もありません。 ですので対策として、確実に改行するために word-break: break-all; を追加しました。 なおスクロールバーを表示するように設定してもよいのかも知れませんが、利便性を考慮すれば横スクロールという選択は無しだろうと判断しました。 そしてAMPではない通常のページでも、横スクロールは不便なので、同じく word-break: break-all; を追加して改行するようにしました。 長く運営し...