ホームページ制作におけるレスポンシブデザインについて

Webサイトを閲覧した際に、文字の羅列ではなく視認性の高いtable、表を用いて説明することで理解が深まり、読者のためにもなるというのはもはや誰しもご存じでしょう。ですが、問題は閲覧する端末です。

2020年現在、スマホの普及率は8割にも達し、サイトの閲覧も7割がモバイル端末からという状況。

このような状況下では、Webサイトもスマホでキレイに表示出来るようレスポンシブ対応していく必要があります。

この記事では、今からでも間に合うWebサイトの「レスポンシブ対応について」、CSSを活用したレスポンシブ対応したtable(表)の作成方法などを解説していきます。

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

スマホサイトを意識したホームページ制作が必要

Webにおける「レスポンシブ(Responsive)」とは、レスポンシブWebデザインのことを指します。

レスポンシブWebデザインとは、PC、スマートフォン、タブレットなど、画面サイズの異なるデバイスに合わせて表示を調整し、最適化した表示にするWebデザインです。

レスポンシブデザインの特徴

レスポンシブデザインをサイト内に採用することで、PC用サイトとモバイル用サイトを別々に作る必要がなくなるのが大きな特徴です。

共通のWebサイトを1つ構築して、URLやHTMLタグも、ページごとに1種類ずつ用意するだけで解決します。このサイト構造のシンプルさがレスポンシブデザインの特徴であり、数々のメリットをもたらす要因となっています。

レスポンシブデザインの特徴について

レスポンシブデザインのメリット

ここからは、ホームページ制作をする上でのレスポンシブデザインを採用するメリットについて解説していきます。

Webサイト構築時に、レスポンシブ対応させておくだけで得られるメリットが大きいので、具体的にどのような利点があるのかを深堀して説明します。

Webサイトの管理が簡単になる

レスポンシブWebデザインを採用したサイトを更新する場合、同一のファイルを更新するだけでPCサイト、スマホサイト、タブレットサイトと一括で変更することができます。

簡単に説明すると、

サイトA

  1. 1. PC版サイトA
  2. 2. スマホ版サイトA
  3. 3. タブレット版サイトA

 

このように、レスポンシブデザインを取り入れるだけで、各端末ごとに指定された表示幅などサイズに自動的に対応してくれることになります。

従来のWebサイトはそれぞれのサイトが独立しているため、PC、スマホ、タブレット用のサイトがある場合は、3つのファイルを更新しなければなりません。

また、複数ファイルを更新しなければならないため、入力ミスなどで表示内容に間違いが生じるなどのトラブルが起こりやすくなってしまいます。それを回避出来るのでレスポンシブデザイン。作業は変わらないので手間が増えることもなく、一括で端末ごとの表示を変更することが可能。

Googleが大きく推奨しているレスポンシブデザイン

検索エンジンに強いレスポンシブデザイン

世界最大級の検索エンジン「Google」公式にて、レスポンシブWebデザインを推奨していてます。

また、「モバイルファーストインデックス」の運用が始まったという点も、レスポンシブWebデザインを採用する大きなメリットとなります。

簡単に説明すると、モバイル端末でのWebサイトの見やすさが検索順位に大きく影響するようになったため、Googleが推奨するレスポンシブWebデザインを採用しておけば、SEO的にも大きなメリットがあるということ。

もちろん、レスポンシブWebデザインを採用することによってデザインの自由度が下がるなどのデメリットもありますが、どんなにデザインに凝ったサイトでも検索上位を獲得して見てもらわなければ意味がありません。

このように、Googleが公式に、SEO的にも有利ですよと公言しているという方策なので、ホームページ制作をする上ではやっておかないとライバルに大きな遅れを取ってしまうことにもなり兼ねません。

CSSを活用したレスポンシブ対応のtable

ここからは、レスポンシブ対応したtable(表)をCSSを活用して作成していく方法を解説してきます。

CSSも難しいことは特になく、HTMLを使えている方なら誰でも簡単に取り入れることが可能です。

また、HTMLとCSSの掛け合わせが必要な箇所も出てくるので、両方使えた方が何かと役立つ場面が多いです。

レスポンシブデザインのhtmlタグなどについて

メディアクエリについて

メディアクエリとは、デバイスの画面幅が〇〇px以上だったらこのCSS、〇〇px以下だったらこっちのCSSといった感じで、画面幅に応じてCSSを切り替えることができます。

通常であれば、デバイスの画面幅に応じて異なるデザインを記述する必要がありますが、メディアクエリを使用することで一括で管理が出来ます。

よく使うレスポンシブCSS

レスポンシブでよく使うプロパティには、次のようなものがあります。

プロパティ

意味

width, max-width

画面サイズに応じて画像やボックスの大きさを制御する

display

画面サイズに応じた表示・非表示を制御する

flex

画面サイズに応じて横並びレイアウトにする

 

これらを既存のHTMLタグで作成したtableに組み合わせることで、レスポンシブ対応した表が出来上がります。

CSS+HTMLでの設定

簡単に説明すると

・HTML…枠組み

・CSS…デザイン的装飾

このような認識で考えれば分かりやすいかと思います。

HTMLで表の枠組みを作り、CSSにてサイズやカラーなどより使いやすく見やすいデザインにカスタマイズしていくという用途で使用します。

CSSと書き込む場所は3つ

HTML内にCSSを書く場所は以下の3つです。

  1. styleタグ

  2. インライン

  3. 外部ファイル

それぞれに応じて、書く場所も変わってきますので、1つずつ解説していきます。

styleタグに書き込む

まず、<style> を <head> のなかに書きます。そこで指定していくことで、<body>にスタイルを適応させます。


書き込み例)

<head>

<meta charset=“UTF-8”>

<title>CSS</title>

          <style>

          h1 {color: yellow; }

          </style>

</head>

インラインに書き込む

インラインに書くときは、タグに直接、属性としてスタイルを指定します。


書き込み例)

<body>

<h1>assist-all</h1>

<p style=“color: yellow; ”>会社概要</p>

</body>

外部ファイルに書き込む

最近のWebサイトは、ほとんどがこの形式でCSSを書き込んでいます。

簡単に説明すると、HTMLファイルに書き込むのではなく、違うファイルにCSSを書き、リンクで読み込むというもの。

外部で書き込み、それを適応させる方がリスクが少なく、万が一の不具合の際にも、サイト全体に影響を及ぼすことはありません。

外部ファイルで書き込み、サーバー上にアップするだけでCSSが反映されるので手間も少なく効率的です。

まとめ

この記事では、レスポンシブ対応について重点的に解説、またCSSでのtable(表)の表示のやり方などを紹介しました。

最後に、この記事の内容をまとめると

  • Webサイトにレスポンシブ対応は必須

  • 各端末ごとに表示サイズなどを変える必要がなくなる

  • Googleも、モバイル対応を推奨し、優遇している

  • HTML内にCSSを書き込むことでデザイン性が上がる

  • CSSは、外部ファイルで書き込んでから反映させるのがベスト

このような内容でした。

CSSは、HTMLに比べ難しく考える方が多いですが、行う作業などもさほど変わらないにも関わらず自由度がHTMLよりも高いので、基礎だけでも覚えておくと重宝することが多いです。

これを機に、1度触れてみてはいかがでしょうか。

NEW

ARCHIVE