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

ブラウザで確認するための設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サイトのデザイン中に、スマホやタブレットで表示した際の確認をパソコン上で行うための設定を解説します。
講師:
06:42

字幕

このレッスンではパソコン上でモバイル向けの表示を確認する手順について解説します。レスポンシブのページを作る時最終的にモバイル機器の上でどのように表示されるか作っている途中に確認する必要があります。簡単な方法としてパソコンのブラウザーで表示させる時にむりやりドラッグしてこの様に幅を変えてしまうという手もあるんですがちょっと乱暴ですし、もう少し例えばめぼしい iPhone であるとかiPad であるとか、そうしたメジャーな機器でちゃんと表示されるかテストしたいということがあります。もちろん実機を使ってみるのが一番いい方法ではあるんですが1回ごとになかなか実機で表示してみるというのもなかなか手間がかかってしまうのでそれをパソコン上で手軽に行える方法を幾つかご紹介します。まず1つ目が、ブラウザーの ChromeGoogle Chrome を使った方法です。これは Mac Windows 共通して使えます。ではまず、レスポンシブのテストをしたいページを Chrome で開いておきます。開いてる状態でウィンドウ右上の、ここのメニューこれを開きます。そしたら、その他のツールという所があるのでこの中に「デベロッパーツール」というものがあります。 ではこれを開きます。そうすると、通常の表示モードではなく開発向けのモードになります。この下の方には、ページのソースコードが表示されたりもするんですが一番上の部分注目して下さい。今 Responsive と書いてあってそしてピクセル数とパーセンテージが書いてあるんですがこれは、この部分を変えることによって様々な解像度で表示されてる、デバイスで表示されてる状況をシミュレーションできるようになってます。例えばこれが Responsive となっている場合にはこのページ全体をウィンドウごと幅を変えなくともこの表示部分の右側の所これですね。この部分をドラッグすることでこの様に幅を変えてちゃんとレスポンシブ動作をするか、それを確認することができます。1回ごとにウィンドウ全体を変えなくてもいいので、大変便利ですね。しかも正確に何ピクセルになっているかがわかります。そしてこの部分ですが、この様にドラッグして決めるだけではなくこの様に現行のめぼしいデバイスのシミュレーションが入ってます。例えば iPhone6 で表示したらどうなるかという所を選んでやると解像度が iPhone6 と同じように変更されてこの様に iPhone6 で表示した場合というその表示が完全にシミュレーションされるようになってます。 他にも、では iPad で見たらどうなるかという所ですね。そうすると、これぐらいになるとかですね。また、この Edit という部分使うと自分で好きな解像度のデバイスをセッティングすることもできます。またここに回転のボタンがありますがこれを使うとこの様にスマートフォンやタブレットの向きを変えた時にどのように変化するかそれも含めてチェックできるので非常にパソコンの上でありながらモバイルの表示、それをリアルに試すことができます。これがまず Mac でも Windows でもできる方法ですね。そして次は Mac 限定になるんですがMac の上でありながら本当に iPhone で表示させたのと全く同じにしてチェックするという方法があります。そこで使うのが xcode というツールですね。xcode とは iOS のアプリ等を開発するためにApple が無償で配布してるツールで無料でインストールすることができます。xcode には、様々なツールがあるのですがこの xcode メニューの中からOpen Developper Tool という所見てみるとiOS Simulator というものがあります。 これを起動してやるとこの様な iOS Simulator というものが立ち上がって完全にiOS の機能がシミュレーションされたものがこの様に立ち上がります。この Hardware というメニューのDevice という所でシミュレーションしたい機種を選ぶことができます。そして、この Home とか Lock とかこの辺は iPhone のボタンをシミュレーションしてます。Home を押すと、この様にiOS が完全にこの中でシミュレーションされた状態となってるので例えば Safari を起動してそしてこの適当なアドレスにアクセスするとそこの内容が完全に iPhone で表示されたのと同じになります。この画面内をドラッグするとタッチスクリーンを操作してるのと全く同じように動作します。こちらであれば、より動いているのは iOS そのものの中なので、より完全な形で検証することができます。この様に、ブラウザー上でチェックを行ったりまたはこの様に開発ツールを応用してチェックを行ったりすることで、わざわざ1回ごとにスマートフォンやタブレットに転送することなしに、レスポンシブのデザインを確認することができます。 これらの方法 Web デザインには幅広く使えるので是非とも試してみて下さい。

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

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

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

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

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

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