レスポンシブWEBデザインで納品したお客様で、パソコンとスマホでそれぞれの改行の位置に細かく指定があったケースがありましたので、パソコンとスマホで異なる改行位置を設定する方法を紹介したいと思います。

レスポンシブWEBデザインとは？

まずレスポンシブWEBデザインについて説明したいと思います。

レスポンシブWEBデザインはここ数年主流となっているWEBデザインのスタイルです。同じWEBページをパソコンで見た時とスマートフォンで見た時、それぞれのデバイスで見やすいように自動的に表示方法を変えるというものです。スマホ用とパソコン用で別々のサイトを作るわけではないので、運用面において効率的で、デザインの統一性などの利点が挙げられます。

レスポンシブWEBデザインはこんなやつです。（他のデザインに関しては制作実績をご覧ください。）

ちなみにインクループで作るWEBページはすべてレスポンシブWEBデザインです。

スマホ対応はGoogleさん的には必須なので、レスポンシブWEBデザインに対応するために別途費用を頂くことはありません！（ちょっとだけ宣伝）

改行の位置をパソコンとスマホで変えたほうが良い理由

なんだか聞いているととても良さそうに聞こえてくるレスポンシブWEBデザインですが、課題も多くあります。

１つのWEBサイトを作れば、パソコンとスマホに対応できます！というのは確かにそうなんですが、別々で作るのと初期費用的にはそれほど差がなかったりします。

WordPressのテンプレート等でレスポンシブWEBデザイン対応のテーマも数多くありますが、ブログを書く程度であれば問題ありませんが、図やイラストを使って見栄えの良い物を作成するとなると、やはりそれなりに手間がかかってきます。

見やすいサイトを実現するための最初の一歩は文章が読みやすいことです。読みやすい文章の要素の一つとなるのが「改行」の位置です。改行の位置が悪いととても読みづらい文章になってしまいます。

パソコンとスマホでは一行に表示できる文字数が異なるということもありますので、パソコンとスマホでそれぞれ適切な改行の位置が異なることになってきます。

以下は具体例です。

パソコンでは読みやすいですが、改行の位置をそのままにしてスマホで表示してしまうと、とんでもなく読みづらくなってしまいます。

パソコンにはパソコン用のスマホにはスマホ用の改行を作る！

上で示した例ではパソコン環境で読みやすい改行になっていたのですが、それをそのままスマホで表示してしまったので一行あたりの文字数の違いにより読みづらい文章になってしまいました。

ということは、パソコンでしか有効にならない改行、スマホでしか有効にならない改行があれば解決できるということになります。

そんな便利なものをスタイルシートで作ってしまいましょう！

まずはスタイルシートから。

上の例は、横幅が650pxより大きな場合は「クラスbr-pcが有効」になり、横幅が650px以下の場合では「クラスbr-spが有効」になるスタイルシートです。（※横幅のピクセル数は環境に合わせて作ってください。）

これにHTMLを組み合わせます。

このように書くと、パソコンで見た時には

と表示され、スマホで見た時には

と表示してくれます。

とっても簡単にパソコン用とスマホ用のそれぞれ専用の改行を作ることができますので、レスポンシブWEBデザインをする場合には使ってみてくださいませ！