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

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/

BootstrapでレスポンシブWebデザインを簡単に作る方法(第1回)

  • publish_advertise
2013/11/12

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

 

ウェブ上で広く採用されつつある「レスポンシブWebデザイン」という名称を耳にしたことはあるでしょうか?

 

スタイルシートを工夫することで、どんな環境でも(PCでもタブレットでもスマートフォンでも)、単一のHTMLで閲覧できるようにするデザインです。端末別に専用サイトを用意する必要がなくなるため、ウェブ製作にかかる労力を大きく減らせます。

 

この「レスポンシブWebデザイン」を採用したウェブページが簡単に作れるフレームワーク(=JavaScriptやCSSのセット)の1つとして、「Bootstrap」(ブートストラップ)があります。Twitter社が開発したフレームワークで、無料で利用できます。

 

以前は、「レスポンシブWebデザイン」への対応はオプションとして提供されていましたが、最新のVer 3.0からは標準で対応するようになりました。

 

今回は、この「Bootstrap」を使って、「レスポンシブWebデザイン」に対応したウェブページを作る方法をご紹介いたします。

 

◆事前の準備は不要

この「Bootstrap」を利用するためには、「Bootstrap」そのものを構成する各ファイルの他に、「jQuery」というライブラリが必須です。

 

しかし、特にそれらのファイルを自力で準備する必要はありません。ウェブ上に既に公開されている各ファイルを、HTML内から読み込むように記述すれば良いだけだからです。なお、どうしても自サイト上に個別にアップロードして使いたい場合には、以下のURLからダウンロードできます。

 


Bootstrap: http://getbootstrap.com/
jQuery: http://jquery.com/


 

◆各ファイルを読み込む

Bootstrapを利用するためには、HTMLのhead要素内(~の間)に、以下の3行を記述します。

 


<link href=”http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css” rel=”stylesheet” />

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>

 

<script type=”text/javascript” src=”http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js”></script>


 

1行目は「Bootstrap」のCSSを、

2行目は「jQuery」のスクリプトを、

3行目は「Bootstrap」のスクリプトを読み込んでいます。

 

上記の3行を記述するだけで、「Bootstrap」を使えるようになります。

 

◆Bootstrapを利用したHTMLの記述方法

 

Bootstrapには、あらかじめ用意されている様々なデザインを使うための、決まったclass名があります。

 

例えば、アラートを表示するボックスを作るための「alert-warning」や、リンクをボタンのように見せる「btn-primary」など、たくさんのclass名が用意されています。
これらは、以下のようにclass属性を使って記述するだけで使えます。


<p class=”alert alert-warning”>アラートの表示ボックス

<a class=”btn btn-primary” href=”/”>ボタン型のリンク


 

Bootstrapでは、上記ように「規定のclass名」をHTMLに追記することで、様々なデザインを適用させられます。

この規定の名称の中には、「レスポンシブWebデザイン」を作るためのclass名も用意されています。

 

◆Bootstrapで、レスポンシブWebデザインを作る

 

こちらのサンプルページをご覧ください。

 

このサンプルページには、複数のボックスがあり、段組を構成しています。

PC・タブレット・スマートフォンで閲覧してみると、それぞれの環境ごとに表示のされ方が異なることが分かります。

 

正確には、「端末の機種」で変わるのではなく、「画面サイズ」で変わります。

ですから、PCからのアクセスであっても、極端に狭いウインドウで見れば、スマートフォン用のデザインで見えます。

ブラウザのウインドウの横幅を様々に変化させて、表示を確認してみてください。

このように、「閲覧者が利用している描画領域の横幅」に応じて、適切にレイアウトを変化させると、「レスポンシブWebデザイン」になります。具体的にどのように記述すれば良いかは、次回にご紹介いたします。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
続きを読む>>
続編
2013.11.19
BootstrapでレスポンシブWebデザインを簡単に作る方法(第2回)

▲ページトップへ戻る

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

▲ページトップへ戻る