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

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
2014/03/20

 

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

前回は、「古いブラウザで閲覧された場合の対策」が簡単にできるスクリプト「Modernizr」について、概要をご紹介いたしました。

HTML5やCSS3で新しく追加された機能を使いたい場合に便利です。

今回は、その「Modernizr」の具体的な使い方を解説いたします。

 

サンプルページは、以下の通りです。

 

サンプルページ

 

前回の記事や、上記サンプルページのHTMLソースもご覧になりながら、以下の解説をお読みください。ここでは、4ステップに分けてご紹介いたします。

 

(1) スクリプト「Modernizr」をダウンロードする

(2) スクリプト「Modernizr」をウェブページに読み込む

(3) サンプルHTMLを記述する

(4) CSSを使って、条件分岐を作る

 

●1. スクリプト「Modernizr」をダウンロードする

 

まずは、「Modernizr」をダウンロードしましょう。

下記の公式サイトにアクセスして、右側の「PRODUCTION」と書かれたボタンをクリックします。

 

Modernizr(※英語サイト)

 

すると、HTML5やCSS3などの機能一覧が表示されます。この中から、ウェブページ内で利用したい機能名をすべて選択します。面倒なら全部選択しても構いません。

リストの下部にある「Non-core detects」という部分をクリックすると、さらに機能が表示されます。サンプルページのように、「RGBAカラーモデル」の使用可否を識別したい場合は、リストの「CSS3」枠内にある「rgba()」項目にチェックを入れます。

必要な機能にチェックが入れられたら、下部の「GENERATE!」ボタンをクリックします。だいたい10秒弱くらい待つと、スクリプトが生成されます。

 

生成されると「DOWNLOAD」ボタンが表示されますから、それをクリックして、スクリプト(JavaScriptファイル)をダウンロードします。

 

●2. スクリプト「Modernizr」をウェブページに読み込む

 

 ダウンロードしたファイル(例えば「modernizr.custom.35127.js」など)はウェブ上の適当な場所にアップロードしてください。

その上で、HTMLのhead要素内に、以下のように記述して読み込みます。

 


<script src=”modernizr.custom.35127.js”></script>


 

これで、準備は完了です。

 

●3. サンプルHTMLを記述する

 

サンプルページでは、HTMLソースを、以下のように記述しています。

段落(p要素)が2つあり、片方には画像を、もう片方には文章を掲載しているだけのシンプルなソースです。

 


<p>

   <img src=”im29-image.jpg” width=”400″ height=”267″ alt=”風景写真”>

</p>

<p>

   ブラウザがRGBAカラーモデルに対応している場合は半透明にして表示。対応していない場合は画像の下部に表示。

</p>


 

●4. CSSを使って、条件分岐を作る

 

CSSソースは以下のような感じで記述します。ここでは、説明のために、簡略化して掲載しています。ボックスを半透明にするなどの具体的な記述は、サンプルページのソースをご参照ください。

 


<style type=”text/css”>

   .rgba {

      /* ~RGBAカラーモデルに対応している場合のスタイル~ */

   }

   .no-rgba {

      /* ~RGBAカラーモデルに対応していない場合のスタイル~ */

   }

</style>


 

RGBAカラーモデルが利用可能なブラウザで閲覧すると、「Modernizr」スクリプトによって、html要素に「rgba」というclass名が付加されます。

 

したがって、上記のように「.rgba」とセレクタを記述すると、「RGBAカラーモデルが有効なブラウザに対してだけ適用される装飾」を記述できます。

 

また、RGBAカラーモデルが利用できないブラウザで閲覧すると、html要素に「no-rgba」というclass名が付加されます。

 

したがって、「.no-rgba」とセレクタを記述すると、「RGBAカラーモデルが無効なブラウザに対してだけ適用される装飾」を記述できます。

 

このようにして、使いたい機能に「対応している場合」と「対応していない場合」の2つの条件分岐を記述することができます。

各ブラウザの対応状況を自力で調べる必要はありません。なお、どの機能が、どのようなclass名で識別できるのかは、

「Modernizr」公式サイト内の、Documentationページに掲載されています。

 

Modernizr  Documentationページ

 

リストにある「Feature」欄が機能名で、「CSS classname」欄がclass名です。

例えば、「border-radius」機能に対しては、「borderradius」と表記されています。

 

これは、

 

・border-radiusに対応していれば、「borderradius」classが付加

・border-radiusに非対応なら、「no-borderradius」classが付加

 

されるという意味です。

 

今回は、使いたい新機能の対応状況を自力で調べることなく、「古いブラウザで閲覧された場合の対策」が簡単にできるスクリプト「Modernizr」の使い方を簡単にご紹介いたしました。HTML5やCSS3などで追加された新機能を使いたい場合に、ぜひご活用ください。

 

 

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  
続編
2014.03.18
サイト訪問者が、機能に対応しているかどうかの識別方法(第1回)

▲ページトップへ戻る

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

▲ページトップへ戻る