各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

レスポンシブデザインの作り方(第1回)

  • publish_advertise
2013/06/20

こんにちは。All About ホームページ作成ガイドの西村文宏です。

最近は、パソコン以外にもスマートフォンやタブレットなど、

様々な画面サイズの機器が普及してきました。

 

また、パソコン用のディスプレイでも、大きなものから小さなものまで様々な製品が販売されています。

そのため、ウェブサイトの閲覧に使われる画面サイズも、極端に広いものから極端に狭いものまで、様々な場合があります。

 

そのような状況では、どれくらいの画面サイズを想定してウェブページをデザインすれば良いのかが決めにくくなります。

 

従来は、「パソコン向けサイト」とは別に「モバイル向けサイト」を作ることで解決できていました。しかし、今では、モバイル端末だからといって画面が狭いとは限りませんし、パソコンだからといって、画面サイズの範囲が一定以内に収まっているとは限りません。

 

そこで登場した考え方が「レスポンシブデザイン」です。

レスポンシブデザインとは、閲覧者の画面サイズに応じて、適用するスタイルシートを変化させる仕組みのことです。閲覧者の端末の種類は問わず、画面サイズだけを基準にしてデザイン(適用するスタイルシート)を選択します。

 

環境に応じて変化するのはスタイルシートだけなので、端末の種類ごとにウェブサイトを分けたりはしません。

 

単一のウェブサイトで、様々な画面サイズに対応させます。

 

例えば、SONYのウェブサイトでレスポンシブデザインが採用されています。

 

以下のページを見てみてください。

 


SONY製品サイト
SONY USAサイト


 

上記のウェブサイトでは、ブラウザのウインドウを画面いっぱいに広げてみた場合と、ものすごく狭くしてみた場合とで、自動的に各所のデザインが変化することが分かります。

 

例えば、ウインドウの横幅を650px未満にした場合と、それ以上にした場合とで比較してみてください。

 

広い画面で閲覧すると、大きなバナー画像と共に、製品一覧が縦横に配置されたり、「タブ」が横方向に広がって表示されます。

 

狭い画面で閲覧すると、バナー画像が小さくなると共に、製品一覧が縦方向のみに配置されたり、「タブ」が「プルダウンメニュー」に変化したりします。

このように、「端末の種類」ではなく「閲覧者の画面サイズ」によってレイアウトを変更させ、単一のウェブサイトであらゆる機器に対応させるデザインが、レスポンシブデザインです。スクリプトは一切使わずに、スタイルシートだけで実現できるため、とても手軽です。

 

これからウェブサイトを作るなら、ぜひ、レスポンシブデザインを採用してみてください。レスポンシブデザインを作るために必要なスタイルシートの書き方については、次回にご紹介いたします。


 

【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
続きを読む>>
続編
2013.06.27
レスポンシブデザインの作り方(第2回)
2013.07.02
レスポンシブデザインの作り方(第3回)

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る