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

タブレット&PC端末に向けたCSS調整(画像の配置調整)

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スマートフォン端末向けのCSS調整が完了したら、次はその部分に対して、タブレット&PC端末に向けて、CSSでレイアウトを調整していきます。このレッスンでは、その手順について解説していきます。
講師:
07:34

字幕

このレッスンでは前回のレッスンに引き続きDreamweaver でレスポンシブ Web デザインを制作していく中でのヘッダーコンテンツ部分のタブレットとPC 端末に向けた CSS の調整方法について解説していきます。まずはダウンロードしてきたファイルの中にある「 header_tab_pc 」というフォルダーの中の「 HTML 」の中にある「 index.html 」こちらを Dreamweaver で開いてください。そしてこれがそのファイルを開いた状態です。前回はこのヘッダー枠の中のスタイルシートの調整を行いましたね。今回はこの部分のタブレットと PC 端末向けのスタイルシートの調整を行っていきたいと思います。それではまずタブレットと PCそれぞれのデザインがどうなっていたか確認してみたいと思います。同じようにダウンロードしてきたファイルの中にある「 header_tab_pc 」フォルダー内の「デザイン」フォルダー内こちらに3つのデザインファイルですね。こちらが入っているのでこちらを開いてください。そしてタブレットのデザインをまずは確認してみましょう。こちらがタブレットのデザインですね。 ここで確認しておきたいポイント、それはスマートフォン用デザインからの変更点です。それではスマートフォン用のデザインも合わせて確認しておきます。スマートフォンのレイアウトはこのようになっていましたね。ではタブレットの方はどうでしょう。このように確認してみるとこちらのロゴの部分の画像のサイズそしてこちらのヘッダー枠の高さが変わっているのが分かります。合わせて PC 用のデザインも見てみましょう。ここで確認しておくのはタブレット用デザインとの変更点です。ただ実はこのデザイン PC 用とタブレット用のこのヘッダー部分のデザインに関してはまったく同じです。となりますとタブレット用のメディアクエリの中でタブレット用のスタイルシートを設定してあげるだけでそれが PC 用にも継承されてくるので今回はタブレットの方の CSS を設定してあげるだけで大丈夫ですね。それでは Dreamweaver に戻ります。それでは早速タブレット用の CSS の調整をやっていきたいと思います。まずこちらのファイルのメニューから「 style.css 」を選択しておきます。そして該当のメディアクエリの部分を探します。こちらですね「 min-width: 481px 」要するに 481px 以上の解像度を持つ端末に適応させるスタイルシートですね。 こちらにタブレットと PC 用のスタイルシートを書いていきます。そして画面の右側のこちらのデザインビューに関してはタブレット用の画面サイズを選択しておきましょう。それではスタイルシートを早速書いていきたいと思います。このメディアクエリ「 min-width: 481px 」こちらの中に書いていきましょう。一番下で大丈夫ですね。まずは先ほどのデザインを確認した通りにロゴ画像のサイズを書いていきます。まずは h1 そして id の logo ですね、こちらの内容を書いていきます。まずは横幅 widthこの値を 450px にします。そして heightロゴの縦幅ですね。こちらを 42px に設定します。この状態で一度ファイルを保存します。ファイルの保存はショートカットキーでWindows なら Control+SMac なら Command+S を同時押しですね。それでは保存をします。するとこちらのデザインビュー上でロゴ画像の大きさが変わりましたね。このような形んなっています。それではデザイン上のもう1つのポイントこちらのヘッダー枠の高さですね。こちらも変えていきたいと思います。こちらは同様にメディアクエリの中の「 #header 」こちらの中に書いていきます。 こちらの値を今回は padding 上下を 60pxそして左右を 0 にします。そして ;これでファイルを保存してください。するとこちらのデザインビューも同様に縦幅が変わりましたね。そしてちょうどロゴ画像が真ん中に来ています。このように前回のレッスンで指定した「 h1#logo 」とさらにこちらのヘッダーですね。これをこちらのタブレット PC 向けに関してはこのメディアクエリの中で上書きしているような状態です。このようにスマートフォンで指定したスタイルをタブレットや PC 端末向けにはそのメディアクエリ内でそれぞれのスタイルシートを上書きしていってレイアウトを変えていくといった手順になります。それでは一度この状態で今回はブラウザで確認してみましょうか。ファイルを保存していることを確認して、こちらの地球のアイコンから「 Chrome 」を選びます。するとこのように表示されましたねまずは PC のレイアウトです。デザイン通りになっていますね。ではこの状態から Chrome の「デベロッパーツール」を開きます。こちらの「デベロッパーツール」をクリックすると横に出てきますね。それではこちらのデベロッパーツールの左端をドラッグして各解像度のレイアウトを確認してみたいと思います。 まず現在は PC 用ですね。これを徐々に狭めていきますとこちらこれでタブレットです。PC とタブレットのヘッダー枠のデザインは同じですので特に変更はないですねるそれではこのままさらにどんどんと縮めていきます。はいこの状態でスマートフォン用のレイアウトに変わりました。このようにヘッダー枠の縦幅が小さくなってロゴ画像も小さくなりましたね。これをもう一度元に広げてみますとこのように大きくなりましたね。これでこのヘッダー枠部分のレスポンシブ Web デザインのHTML コーディングは完了しました。以上でレッスンは終了です。今回は Dreamweaver を使ってヘッダーコンテンツ部分のタブレットとPC 端末に向けたスタイル要するに CSS の調整手順について解説いたしました。次のレッスンではページ内の他の部分に対してのレスポンシブなコーディングの方法を解説していきますのでそちらも合わせて参考にしてみてください。

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

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

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

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

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

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