スマートフォンWebサイト【レスポンシブウェブデザインによる作り方の概要】

ウェブサイト作りの基本

ウェブサイトは、HTMLとCSSというコンピュータ言語で書かれています。サイト運営者は、これらで書いたファイルをサーバーに転送します。そして閲覧者は、そのサーバー上にあるそれらのファイルにアクセスし、それをブラウザ開くことによって、ウェブサイトとして閲覧することができるのです。

HTMLでは、文書、画像の挿入、リンク先などを記述します。それはいわば、そのページの「文書本体」といえます。そしてCSSは、その文書本体の「デザイン」を指示する言語です。例えば、サイト全体のサイズや色、文字のサイズや色や装飾、リンクメニューのデザイン、ボタンのデザイン、などをCSSによって決めていきます。そして通常は、HTMLの中に「○○というファイル名のCSSを読み込む」という指示を書くことで特定のCSSを適用させて、サイトのデザインを決めていくのです。

CSSをスマートフォン表示に対応させる

そしてスマートフォン用ウェブサイトですが、現在は一般的に、PC閲覧用CSSの他にスマートフォン閲覧用CSSを用意する方法が、標準となっています。HTML内に「画面サイズが○○以上の端末で閲覧する場合はこちらのCSS」「画面サイズが○○以下の端末で閲覧する場合はあちらのCSS」と記述し、閲覧する端末によってどのCSSを適用するかを分岐させるのです。なお、この手法によって、タブレット用のデザインを作ることも可能です。

ちなみに、このように1つのHTMLに複数のCSSを用意して各端末に対応させる手法を、「レスポンシブウェブデザイン」と呼びます。その一方で、PC用とスマートフォン用でまったく別のサイトを作る方法もありますが、その場合はURLが2つになってしまう、修正に手間がかかる、などのデメリットがあります。

スマホサイト制作はちょっとしたコツを掴むだけで誰でも簡単に行えるようになりますので特別な知識は不必要です。

Share if you like!

Read more?