Museを使ったレスポンシブWebサイト制作

全体のまとめ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
作成したレスポンシブ対応ページを実際にWebブラウザで表示させて、内容の見返しを行います。
講師:
03:09

字幕

このレッスンでは、最終的な確認を行います。それでは、このレッスンのサンプルプロジェクトを 今 開いている状態です。では、ホームを開くと一通りのリスポンシブ対応が終わった状態となっています。これが最大の幅ですね。パソコンのデスクトップ上で見た時の表示となります。そして幅が小さくなっていくとまずは、メニューの部分ナビゲーションのメニューの部分があるところまで来るとパッとフォントサイズが小さくなる単に幅が変わるだけでなくてこの様にある時点でガラッと変わるところがあるというのがまず、1つの特徴ですね。そして更に小さくなっていくと今度はこちらの方700ピクセル以下になるとこの画像の部分が3列表示から2列表示なるそしてさらに縮んでいって600ピクセルを切るとヘッダーのナビゲーションメニューも縦のもの、モバイルに特化したものになってこちらの中段からもう画像は消えてしまってこのバックのブロックと文字だけになりました。では、このように作ったら最終的に「ファイル」>「ブラウザでページをプレビュー」これを使ってチェックをしてみましょう。MUSE で制作したページは必ず実際のブラウザの方でも拠点、拠点で確認して、ほぼ食い違うということが少ないケースであるのですけどちゃんと思い通りに動いているかチェックを行います。 では、こちらChrome で開いた状態ですね。最大幅の時の表示はもうそのままですね。幅を縮めていくとMuse 上と同じ動作をしていますね。メニューがだんだん小さくなってきてそして、2列表示なってさらに縮めていくとこのようなモバイル用のメニューとこうした小さい表示になりました。この様にちゃんと動くことを確認します。そして、これをさらに、できたものをサイトの方にアップロードした後は実際に例えば、タブレットであるとかスマートフォンであるとかパソコン用のブラウザで幅を変えたのとまた違ったもの本当のモバイル用のレスポンシブの恩恵を一番受けられる環境で見てみてそれがちゃんと表示されているかを確認してします。このような感じでレスポンシブデザインに変更というとかなり身構えてしまうことも多いと思いますが一箇所、一箇所、役割と後、ポイントごとのレイヤーとそれを考慮してやっていけば割りとそれほど、Muse 上であれば苦労することなく変更することが可能です。ぜひ様々な面で有利になるレスポンシブのデザインに挑戦してください。

Museを使ったレスポンシブWebサイト制作

Museを使うと、パソコンだけでなくスマートフォンやタブレットなどのモバイルデバイスで快適に閲覧できるレスポンシブWebサイトを簡単に作成することができます。このコースではレスポンシブWebデザインの基礎知識やMuseを使ったメニューのカスタマイズ、オブジェクトのスケーリングや画面の幅に応じた再配置、デザインの調整に付随する問題の解決方法などを学びます。

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

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

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

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