kishin 貴真

20150921

  /  DESIGN

スマホ対応の改行問題

スマホ対応 改行タグ

Webサイト制作では、いよいよスマートフォン対応が必須の時代に来ている。

対応を始めると感じるのが文章中での改行問題で、PC表示用に<br />を使用して改行している箇所をスマートフォンで表示確認してみると、嬉しくない場所で改行してしまっていることがよくある。

この問題に対応するために、スマートフォン閲覧時にはCSSの設定を下記のようにして<br />タグ全てを無効化してしまう方法がよく紹介されている。

br { display: none; }

これで満足できればそれで良いのだが、逆に、PCの画面幅では問題ないが、スマートフォンでは任意の場所で改行した方が気持ちが良い場合もある。そのように、もうちょっと細かくコントロールしたい場合もあって、そのために私の場合にはこの問題はCSSだけではなくJavascriptも活用して対応している。

その方法としては、PCとスマートフォンで表示方法を切り替えたい場所に、特定のclassを持たせた<span>タグを置いて、ページの読み込み時にJavascriptで該当する<span>タグの内容を一括して書き換えるというもの。

スマホ対応

例えば、上記のような例の場合には、PCでは1行で表示し、スマートフォンでは改行して2行で表示するようにしている。この例だけならCSSで対応した方が手っ取り早いのだが、この方法の良い点は、単に改行の有無の切り替えだけではなく、任意の文字の切り替えが手軽に利用できる点にある。

スマホ対応

上記のソクラテスの言葉の例では、単に改行の有無をコントロールするだけではなく、スマートフォン表示では、文頭の「─」を削除し、文中の「、」を「<br />」に変更、文末の「─」を「。」に変更している。CSSのみでこれを行おうとすると、HTML側でPC/スマホ双方に使用する文字を記述しておく必要があるので、こうした箇所が多い場合には特に、非常にゴチャゴチャしたコードになってしまう。

【Javascriptで切替える際のHTML例】
<span class="tx1"></span>教育とは炎をもえあがらせることであって<span class="tx2"></span>入れ物を満たすことではない<span class="tx3"></span>

【CSSで切替える際のHTML例】
<span class="pc1">─ </span>教育とは炎をもえあがらせることであって<span class="pc2">、</span><span class="sm2"><br /></span>入れ物を満たすことではない<span class="pc3"> ─</span><span class="sm3">。</span>

任意のタグ内の文字列を書き換える方法に関しては、jQueryを使う方法や、JavascriptのDOM操作を理解していれば簡単なことなのでここで説明はしないが、とにかく、上記のようにPC←→スマートフォンで相互に切り替えるための文字ペアを必要な種類だけJavascript内に用意しておけば、後はHTML上で必要な箇所に<span>タグを置くだけなのでコードもすっきりとシンプルな状態で保持できる。

特にキャッチコピーやキメの一文の場合では、改行位置や表現方法に気を使うことがあるのだが、こうしたちょっとした手間で、スッと頭に入ってきやすい文字表現にコントロールすることができるので、試してみる価値はあるのではないかと思う。

Twitter