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

スマートフォン端末に向けたCSSの調整(画像の配置調整)

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ヘッダー部分の中身のHTMLコーディングが完成したら、次はその部分に対して、スマートフォン端末に向けて、CSSでレイアウトを調整していきます。このレッスンでは、その手順について解説していきます。
講師:
08:47

字幕

このレッスンでは Dreamweaver でレスポンシブ Web デザインを制作していく中でのヘッダーコンテンツ部分のスマートフォン端末に向けた CSS の調整方法について解説していきます。まずはダウンロードしてきたファイルの中にある「 header_sp 」というフォルダーの中の「 HTML 」の中の「 index.html 」こちらを Dreamweaver で開いてください。そしてこれがそのファイルを開いた状態となっています。このファイルは前回のレッスンでこちらのヘッダー枠の中にこの画像を設置した状態となっています。今回のレッスンではこのヘッダー枠の中に置かれたこの画像この画像に対してスマートフォン向けのスタイル、要するに CSS の調整を行っていきたいと思います。それではレッスンを始めていきましょう。まずはスマートフォンのデザインがどのようになっていたか確認してみたいと思います。同じくダウンロードしてきたファイルの中にある「 header_sp 」のフォルダーの中の「デザイン」そしてこちらの「スマートフォン用デザイン」ですね、こちらを開いて確認してみたいと思います。スマートフォン用のデザインはこちらですね、このようなデザインとなっています。 ポイントはこのロゴ画像のサイズそしてこのヘッダー枠の縦のサイズそして上部にあるこの茶色い線ですね。ちなみにこの茶色い線は他の端末向けのデザインでもこのように付いていますね。この茶色いデザインはこのヘッダー枠の中に収まるのではなくてこのようにサイト全体の上部に付いているといった状態です。これを覚えておいて実際に CSS のコーディングをやっていきたいと思います。それでは Dreamweaver に戻ります。ではまずこちらのデザインビューの画面こちらのデザインビューの画面がスマートフォンサイズで表示されているかどうか確認してください。もしされていない場合はこちらをクリックしておいてください。それではこちらのファイルのメニューから「 style.css 」を選択します。このファイルに今回のスマートフォン向けのCSS を書いていきます。今回のスマートフォン向けの CSSスタイルシートの書く場所ですがこちらのメディアクエリですねメディアクエリの外側に書きます。ですのでこのあたりですねこのあたりに書いていきましょう。このスマートフォン向けのスタイルシートつまりメディアクエリの外側に書いたスタイルシートはスマートフォン向けだけではなくてタブレット向け、そして PC 端末向けにもこのスタイルシートで書いたことが継承されていきますのでそれも頭に入れながら実際にCSS を書いていきます。 それではこのヘッダー画像の中のロゴのサイズから設定していきたいと思います。まず分かりやすいようにコメントを書いておきます。「ヘッダー内」としておきましょうか。そしてここに書いていきます。まずは h1 で id がロゴの要素ですね、この h1 タグに指定していきます。指定する内容はまずロゴ画像の幅ですね、width を 280pxそして 280px ですね。そして heightこちらを 28px とします。次に margin を指定してあげて上下を 0そして左右を auto としてあげます。こうすることによってこのロゴ画像がセンタリングされた状態になりますね。そして最後に line-height そして0px としておきます。この状態になりましたら一度ファイルを保存します。するとこちらのデザインビューでもこのような形になりましたね。それでは次にこちらのヘッダー枠の高さを指定していきたいと思います。ヘッダー枠を指定している部分はこちらのメディアクエリの外側にあるこの #header の部分で指定されています。今は分かりやすい様に背景色を付けていますがこの部分をとっておきましょう。そしてここに高さの指定をしていくわけですが今回はこのロゴ画像を縦軸でも中心に置きたいためpadding で指定します。 そして上下を 15px 空けるようにして左右を 0 としておきます。そしたらこの状態でファイルを保存します。ちなみにファイルの保存ですがこちらの Dreamweaver のアプリケーションメニューから「保存」を選択することでファイルを保存することができますが、ここは便利ですのでショートカットキーを使っていきましょう。ショートカットキーはWindows では Control+SMac では Command+S を同時に押すことで保存することができます。それでは保存をします。そうするとこちらのデザインビューの方でも高さが設定されましたね。ちょうどロゴが縦軸で真ん中に来るようになっています。それでは最後に先ほどのデザインでも確認した一番最上部にあった茶色い線こちらを指定したいと思います。こちらはこの枠内のみならずこの表示領域全体にかかるような形でデザインされていたのでbody タグに付けてあげましょう。body タグは現状こちらの CSS ファイルには存在していないので新たに追加してあげます。そうですね先ほどのロゴの下に書いておきましょうか。body と書きます。そして border-top: の 4pxそして solidそして色をこの 806143というものにしておきます。 そして ; ですね。そうしましたらショートカットキーMac では Command+SWindows では Control+S を押して保存しましょう。これでヘッダー部分のスタイルシートの設定が完了しました。一度こちらでライブビューで確認してみましょうかライブビューはこちらの「ライブ」というボタンを押します。そしてこちらのボタンを押して可変グリッドレイアウトのガイドを隠してあげましょう。するとこのように表示されましたね、先ほどのデザイン通りとなっています。それでは最後に念のため他の端末サイズでも確認しておきましょう。今はスマートフォン向けのサイズが選ばれていますね。この隣のアイコンをクリックしてタブレット端末向けに変えてみます。するとこのようになっていますね、同じようなスタイルとなっています。そしてこちらをクリックしてPC 向けのサイズに切り替えます。するとこちらも同じような形でヘッダー部分のスタイルが設定されています。これはこのメディアクエリの外側に書かれたスタイルシートはスマートフォン向けだけではなくてタブレット端末や PC 端末向けにも共通して反映されているためですねそれではライブビューを解除して元々のデザインビューに戻しておきましょう。 サイズの方もスマートフォンに変えておきます。以上で今回のレッスンは終了です。今回は Dreamweaver を使ってヘッダーコンテンツ部分のスマートフォン端末に向けたスタイル要するに CSS の調整手順について解説いたしました。次のレッスンではこの部分のタブレットとPC 端末に向けたスタイルの調節について解説していきますのでそちらも合わせて確認しておきましょう。

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

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

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

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

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

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