記事の詳細

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

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

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

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

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

レスポンシブWEBデザイン

制作実績、伊勢ヶ濱部屋のホームページ

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

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

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

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

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

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

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

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

以下は具体例です。

改行の位置がパソコンのままだと大変なことに

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

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

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

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

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

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

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

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

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

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

と表示してくれます。

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

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。


ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る