ウェブページをパソコンで表示したときだけ改行し、スマホで表示したとき改行しない方法についての忘備録。
ウェブページで長い文章を表示したとき、文節の途中で勝手に改行されるのを私は好まない。そのため、パソコンでは、原則として各文節を１行に表示できる長さとし、文節ごとに改行している。強制的に改行するなという意見もあるが、SEO など気にする必要もないので、読みやすさを優先している。 改行するには、<br /> を使わず、よく知られている次の CSS クラスを用いる。ただし、<span>～</span> では <br /> を用いざるを得ない。 CSS .lb::after { /* １行改行 */ content: "¥A"; white-space: pre; } .lb2::after { /* ２行改行 */ content: "¥A¥A"; white-space: pre; } HTML 私は好まない。<span class="lb"></span> 読みやすさを優先している。<span class="lb2"></span> このページを対策を施さずにスマホで表示すると左のようになる。対策を施すと右のようになる。 対策とは、段落ごとの改行を除き、スマホで表示するときだけ改行しないようにすること。 左は１行強制改行が不自然に感じられる。また、スマホでは改行が好まれないようだ。
これを実現するためには、まずデバイスを判定して CSS を振り分けなければならない。 <script type="text/javascript" language="javascript"> if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { document.write('<link rel="stylesheet" type="text/css" href="../css/common_sp.css">'); } else { document.write('<link rel="stylesheet" type="text/css" href="../css/common.css">'); } </script> そして、スマホで表示したときだけ改行しない部分に次のクラスを適用する。 パソコン用 CSS .lbn::after { content: "¥A"; white-space: pre; } スマホ用 CSS .lbn を定義しない。 HTML 私は好まない。<span class="lbn"></span> なお、HTML コードで <span class="lbn"></span> の直後で改行しないこと。半角スペースが挿入されてしまう。 スマホで表示したときだけ２行改行するなどといったことも自由自在にできる。