займ на карту срочно без отказа

MENU

メニューを閉じる
HOME
BtoC商材がメインの企業様
> 新店舗オープンに必要な広告とは > リピーターを増やすには > 商品やサービスの知名度を上げるには
BtoB商材がメインの企業様
> 印刷のことなら > 展示会に出展したい > WEBで収益アップ
行政の皆様へ
実績紹介
> マーケティング事例 > デザイン事例
私達の強み
> ブランドプロミス > 広告効果が上がる広告の作り方 > 広告コラム
会社概要
採用情報
CSR
お問合せ

コラム

タイトルアイコン スマホ対応のレスポンシブデザイン!その作り方とは?

スマホ対応のレスポンシブデザイン!その作り方とは?のメイン画像

近年、スマホやタブレットを使うモバイルユーザーが増加し、PC・スマホ・タブレットなど、さまざまな端末から同じWebサイトを閲覧することが多くなりました。

このマルチデバイス・マルチスクリーンの流れに対応するためにレスポンシブデザインを導入し、どんな端末からアクセスしても最適なサイトを表示する必要性が高まっています。

レスポンシブデザインとは、デバイスの画面サイズに依存しないwebサイトを構築する手法であり、見やすい表示に自動で切り替える仕組みを持つデザインのことです。

 

ここでは、そのレスポンシブデザインを作成する方法について説明します。

目次
1、レスポンシブデザインの作り方【viewport】を設定する
2、メディアクエリを設定して画面環境に対応させる
3、まとめ

 

 


 

1、レスポンシブデザインの作り方【viewport】を設定する


 

「viewport」とはHTMLのmeta要素であり、表示するページの横幅や縦幅をどのぐらいにするかという設定です。

日本語に言い換えると「表示領域」になります。

この設定をしていないPC向けWebサイトを、スマートフォンやタブレットで表示させた場合、文字もページも小さくなってしまい、非常に見にくいページになってしまいます。

 

例えば、下記コードをHTML内に記述することで、各端末の画面サイズに合わせたページ幅に変化させることができるようになります。

「meta name="viewport" content="width=device-width,initial-scale=1"」

 

viewportは、横幅や縦幅だけでなくページの倍率やズーム操作の可否も設定可能です。
コードの意味を理解することで、より細かい設定にもチャレンジすることができます。

 

 


 

2、メディアクエリを設定して画面環境に対応させる


 

メディアクエリとは、アクセスしてきた端末ごとにcssの指示内容を切り替えることができる設定です。

PC・スマートフォン・タブレットなどの異なる端末で、それぞれの画面環境に対応させることが可能になり、メディアクエリの動作にはviewportの設定が必須になります。

 

メディアクエリの設定は主に以下の2種類があります。

・「デスクトップファースト」というPCサイト作成後、スマートフォン画面に対応させる手法
・「モバイルファースト」というスマートフォンサイト作成後、PC画面に対応させる手法

 

実際のコードは「デスクトップファースト」か「モバイルファースト」によって異なるので、自分のサイトに合ったコードを記述するようにしましょう。

viewportとメディアクエリを設定することで、レスポンシブデザイン化を実現することができます。

メディアクエリは、異なる端末の画面環境に応じた見え方に変化させることができるので、スマホやタブレットに適応するには欠かせない設定です。

 


 

3、まとめ


現在では、PCのみならずスマートフォンやタブレットなど、さまざまな端末からWebサイトを閲覧できるようになりました。

そのため、従来まではWebページを作成する際は、PCのことだけを考えていれば良い傾向にありましたが、各端末からの閲覧に対応できるよう、画面サイズも各端末に合ったWebページを作る必要があります。

閲覧ユーザーを増加させるためにも、Webサイトにレスポンシブデザインを導入しなければなりません。

ユーザーにとって見やすいWebページを目指すなら、今回ご紹介したviewportやメディアクエリを設定し、レスポンシブデザインを作成してみましょう。

 

 

 

↓↓広告に関するご相談・お問い合わせはコチラから↓↓
◆【広告でお困りのことなら東邦プランへ】お問い合わせページ◆
電話でのお問い合わせはこちら044-549-0772(受付時間/土日祝日を除く9:00~18:00)

PAGE TOP ▲