Dreamweaver CCで作るレスポンシブWebデザイン

古いブラウザへの対応(IE6~IE8) 

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レスポンシブWebデザインの実装の為に利用するMedia Queriesですが、実はIE6〜8などといった古いブラウザには、対応していません。ただ、Dreamweaverでは、それを補う為の機能が搭載されています。このレッスンでは、その機能についてご紹介していきます。
講師:
05:12

字幕

このレッスンでは Dreamweaver でレスポンシブ Web デザインを制作していくにあたっての古いブラウザーへの対応について解説いたします。まずはダウンロードしてきたファイルの中にある「 ie 」と書かれているフォルダーの中の「 index.html 」こちらを Dreamweaver で開いてください。そしてこれがこのファイルを開いた状態です。このファイルは Dreamweaver で「可変グリッドレイアウト」を選択して、新規ドキュメントを作成した状態のものとなっています。このファイルを使って今回のレッスンの解説を進めていきたいと思います。それでは早速レッスンを始めていきましょう。さてレスポンシブ Web デザインを制作していくにあたって古いブラウザーへの対応ということですが、ここでいう古いブラウザーとは主に Internet Explorer バージョン6バージョン7そしてバージョン8のことを指します。通常これらの古いブラウザーはCSS3 のメディアクエリを使ってのレスポンシブ Web デザインの制作はブラウザー自体が非対応のため実装は不可能となっています。ただしこの Dreamweaver で「可変グリッドレイアウト」を選択した状態で新規ドキュメントを作成するとそのあたりにも配慮されたファイルがDreamweaver から自動で生成されてきます。 それがどれかといいますとこちらの「 respond.min.jp 」ですね。こちらのファイルは一見暗号のようなことしか書かれていませんがJavaScript ファイルとなっておりこちらの HTML から「 respond.min.jp 」を読み込むことによってそういった古いブラウザーでもメディアクエリを使うことができるようになります。Dreamweaver から自動的に出力されたファイルはこの「 respond.min.js 」、そして .html ファイルからはその「 respond.min.js 」が読み込まれている状態になっています。こうすることによって Internet Explorer 6から 8 までの間の古いブラウザーでもレスポンシブ Web デザインの制作が可能になります。そしてもう1点こちらの .html ファイルの上の方を見てみますとこのように「 IE 7 」や「 IE 8 」と書かれている所があります。この部分は Conditional Commentsと呼ばれるものでこの部分は Conditional Commentsと呼ばれるもので古いブラウザーなどで発生する表示の崩れなどに個別に対応していくことが可能です。 具体的に見ていきますとこちら「 html class=”ie6 oldie” 」と書いてますね。そしてこの下は「 html class=”ie7 oldie” 」そしてこちらは「 html class=”ie8 oldie” 」それぞれ HTML タグにこういったクラスが付いています。そしてこちらの一番上の「 lt IE7 」と書かれているところに関してはInternet Explorer バージョン7よりもバージョンが古いものに関してはHTML タグをこちらのクラス付きで出力しろという命令となります。そしてその下は「 IE 7 」と書かれていますね。こちらは Internet Explorer バージョン7の時はこちらのクラスをつけて HTML を出力するそしてその下は「 IE 8 」ですねInternet Explorer バージョン8このサイトを表示した時はこちらのクラスをつけた状態でHTML タグを出力しろという形になります。そして最後こちらに「 gt IE8 」と書かれている部分がありますがこちらの中の HTML タグこちらはクラスに何も入っていませんが要するに Internet Explorerバージョン8よりも大きい場合ですね、大きい場合はクラスに何もつけずに HTML タグを出力するといった形になっています。 こうすることによってInternet Explorer のどのバージョンでアクセスしてきてるかによってこのように HTML につくクラスが異なってきますのでそれを利用して CSS でスタイルシートを各バージョンに合わせて個別に調節していくことができるわけです。このように Dreamweaver でレスポンシブ Web デザインを制作する際にはこういった古いブラウザーにも配慮のされた環境の上で制作を進めていくことができるわけですね。以上でレッスンは終了です。今回は Dreamweaver でレスポンシブ Web デザインを制作する際の古いブラウザーに向けた対応について解説しました。古いブラウザーは製作者にとってどうしても悩みの種となりますがDreamweaver ではこのような機能で製作者をサポートしてくれますので積極的に活用していきましょう。

Dreamweaver CCで作るレスポンシブWebデザイン

このコースでは、レスポンシブWebデザインに対応したサイトをDreamweaverを使いながら制作する方法について解説していきます。レスポンシブWebサイトについての説明や、制作するにあたっての設計のコツ、Dreamweaverがもつ機能や使い方などを実際の制作手順に基づいて解説していきます。

3時間40分 (32 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年04月02日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。