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

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/

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

  • publish_advertise
2013/06/27

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

 

前回は、「端末の種類」ではなく「閲覧者の画面サイズ」を基準にして適用スタイルを変化させる「レスポンシブデザイン」の概要とメリットなどをご紹介いたしました。

今回は、その「レスポンシブデザイン」を作るためのスタイルシート(CSS)の書き方を簡単にご紹介いたします。

 

閲覧者の画面サイズに応じて「適用するスタイル」を分岐させるためには、特にスクリプトなどを使う必要はありません。

 

CSS3で追加された新しい仕様である「Media Queries」を利用するだけで実現できます。

 

例えば、以下のようにCSSソースを記述すると、

 


・画面の横幅が640px以上なら、p要素の文字色は赤色で表示。
・画面の横幅が640px未満なら、p要素の文字色は青色で表示。


 

というように、適用するスタイルを分けられます。

 


<style type=”text/css”>
@media screen and (min-width: 640px) {
   /* 表示領域が640px以上の場合に適用するスタイル */
   p { color: red; }
}
@media screen and (max-width: 639px) {
   /* 表示領域が639px未満の場合に適用するスタイル */
   p { color: blue; }
}
</style>


 

このように、「@media」という記述を使うことで、

「そのスタイルを適用するための条件」を指定できます。

 

その条件を満たす環境でのみ、カッコ内のスタイルが有効になります。

この仕組みを使えば、「閲覧者の画面サイズ」に応じた適切なデザインを提供できます。

 

「@」記号を使った特殊な書き方ではありますが、その中に含められるCSSは、普段記述しているCSSと同じです。

 

上記のCSSソースでは、同一のCSSソース内に条件を記述しました。

 

しかし、もし、画面サイズに応じてCSSファイル自体を分離しておきたいなら、以下のように(CSSファイルを読み込む)HTMLを記述することもできます。

 


<link rel=”stylesheet” href=”wide.css” media=”screen and (min-width: 640px)”>
<link rel=”stylesheet” href=”thin.css” media=”screen and (max-width: 639px)”>


 

上記のようにHTMLを記述した場合は、

 


・画面の横幅が640px以上なら、wide.css ファイルのCSSを適用する。
・画面の横幅が640px未満なら、thin.css ファイルのCSSを適用する。


 

というように、CSSファイル自体を分けて管理できます。

 

さて、「レスポンシブデザイン」を作る上で、

「画面の横幅いっぱいに表示されるヘッダ画像」が問題になることがあります。

 

そこで次回は、「レスポンシブデザイン」を実現する具体的な方法の一つとして、

閲覧者の画面サイズに合わせて、画像をうまく見せる方法をご紹介いたします。

 

 

 

【ご注意ください】

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

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

 

 

 

 

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

▲ページトップへ戻る

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

▲ページトップへ戻る