Webサイトを閲覧した際に、文字の羅列ではなく視認性の高いtable、表を用いて説明することで理解が深まり、読者のためにもなるというのはもはや誰しもご存じでしょう。ですが、問題は閲覧する端末です。
2020年現在、スマホの普及率は8割にも達し、サイトの閲覧も7割がモバイル端末からという状況。
このような状況下では、Webサイトもスマホでキレイに表示出来るようレスポンシブ対応していく必要があります。
この記事では、今からでも間に合うWebサイトの「レスポンシブ対応について」、CSSを活用したレスポンシブ対応したtable(表)の作成方法などを解説していきます。
Webにおける「レスポンシブ（Responsive）」とは、レスポンシブWebデザインのことを指します。
レスポンシブWebデザインとは、PC、スマートフォン、タブレットなど、画面サイズの異なるデバイスに合わせて表示を調整し、最適化した表示にするWebデザインです。
レスポンシブデザインをサイト内に採用することで、PC用サイトとモバイル用サイトを別々に作る必要がなくなるのが大きな特徴です。
共通のWebサイトを1つ構築して、URLやHTMLタグも、ページごとに1種類ずつ用意するだけで解決します。このサイト構造のシンプルさがレスポンシブデザインの特徴であり、数々のメリットをもたらす要因となっています。
ここからは、ホームページ制作をする上でのレスポンシブデザインを採用するメリットについて解説していきます。
Webサイト構築時に、レスポンシブ対応させておくだけで得られるメリットが大きいので、具体的にどのような利点があるのかを深堀して説明します。
レスポンシブWebデザインを採用したサイトを更新する場合、同一のファイルを更新するだけでPCサイト、スマホサイト、タブレットサイトと一括で変更することができます。
簡単に説明すると、
|
サイトA |
|
このように、レスポンシブデザインを取り入れるだけで、各端末ごとに指定された表示幅などサイズに自動的に対応してくれることになります。
従来のWebサイトはそれぞれのサイトが独立しているため、PC、スマホ、タブレット用のサイトがある場合は、3つのファイルを更新しなければなりません。
また、複数ファイルを更新しなければならないため、入力ミスなどで表示内容に間違いが生じるなどのトラブルが起こりやすくなってしまいます。それを回避出来るのでレスポンシブデザイン。作業は変わらないので手間が増えることもなく、一括で端末ごとの表示を変更することが可能。
世界最大級の検索エンジン「Google」公式にて、レスポンシブWebデザインを推奨していてます。
また、「モバイルファーストインデックス」の運用が始まったという点も、レスポンシブWebデザインを採用する大きなメリットとなります。
簡単に説明すると、モバイル端末でのWebサイトの見やすさが検索順位に大きく影響するようになったため、Googleが推奨するレスポンシブWebデザインを採用しておけば、SEO的にも大きなメリットがあるということ。
もちろん、レスポンシブWebデザインを採用することによってデザインの自由度が下がるなどのデメリットもありますが、どんなにデザインに凝ったサイトでも検索上位を獲得して見てもらわなければ意味がありません。
このように、Googleが公式に、SEO的にも有利ですよと公言しているという方策なので、ホームページ制作をする上ではやっておかないとライバルに大きな遅れを取ってしまうことにもなり兼ねません。
ここからは、レスポンシブ対応したtable(表)をCSSを活用して作成していく方法を解説してきます。
CSSも難しいことは特になく、HTMLを使えている方なら誰でも簡単に取り入れることが可能です。
また、HTMLとCSSの掛け合わせが必要な箇所も出てくるので、両方使えた方が何かと役立つ場面が多いです。
メディアクエリとは、デバイスの画面幅が〇〇px以上だったらこのCSS、〇〇px以下だったらこっちのCSSといった感じで、画面幅に応じてCSSを切り替えることができます。
通常であれば、デバイスの画面幅に応じて異なるデザインを記述する必要がありますが、メディアクエリを使用することで一括で管理が出来ます。
レスポンシブでよく使うプロパティには、次のようなものがあります。
|
プロパティ |
意味 |
|
width, max-width |
画面サイズに応じて画像やボックスの大きさを制御する |
|
display |
画面サイズに応じた表示・非表示を制御する |
|
flex |
画面サイズに応じて横並びレイアウトにする |
これらを既存のHTMLタグで作成したtableに組み合わせることで、レスポンシブ対応した表が出来上がります。
簡単に説明すると
・HTML…枠組み
・CSS…デザイン的装飾
このような認識で考えれば分かりやすいかと思います。
HTMLで表の枠組みを作り、CSSにてサイズやカラーなどより使いやすく見やすいデザインにカスタマイズしていくという用途で使用します。
HTML内にCSSを書く場所は以下の3つです。
styleタグ
インライン
外部ファイル
それぞれに応じて、書く場所も変わってきますので、1つずつ解説していきます。
まず、<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度触れてみてはいかがでしょうか。
こちらのホームページは、株式会社アシストにより監修されています。同社は累計ホームページ制作数80,000社、MEO対策5,000社という豊富な実績を持ち、SEO検定やWEB解析士などの有資格者が多数在籍しています。そのため、ご覧いただいている本ホームページの内容には安心してご覧いただけます。ご不明点はお気軽にお問い合わせ下さい。
代理店募集
取材申込み
商品資料
電話番号