Muse (2015) 基本講座

ブレイクポイントの設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ブラウザの横幅がそれ以下になった際に大幅なデザイン変更を行う「ブレイクポイント」を設定するための手順を解説します。
講師:
04:57

字幕

このレッスンではレスポンシブデザインにおけるブレイクポイントの追加について解説します。Muse はブラウザの幅に合わせて、自動的にデザインが変わっていくレスポンシブデザインの作成に対応しています。レスポンシブデザインの中でも、あるポイントを超えるとレイアウトがガラッと変わる、例えば横幅があるピクセル数以下になったらそれはモバイル機器だと判断して、モバイル用のレイアウトに直すというポイントが存在します。そのポイントのことをブレイクポイントと呼びます。実際にブレイクポイントを設定してみましょう。ではマスターを開けてください。ブレイクポイントの設定はマスターページで行います。マスターページを開けたら一番上を見てください。今紫色のバーが出ていますが、外側の数字、1000 と出ています。これはこのページの最大の幅を表しています。そして内側の 320 というちょっと濃い紫の幅はページの最小の幅を表しています。まだ様々なパーツがレスポンシブ対応されていない状態ですけど、この部分をドラッグすると、こんな感じで、実際にブラウザの幅を縮めたようになります。パーツによって若干動きが違いますね。例えばメニューは動かなくて、画面の外にはみ出していますが、このロゴを見てください。 このロゴは幅が縮まっていくと、一緒になって小さくなっています。これがレスポンシブな幅の動作となります。こうした幅の変更に伴う、追従する動作だけでなく、あるところを超えたら別の画像に入れ替わるなど、設定することができます。ではそのためのブレイクポイントを作ってみましょう。作り方はいくつかあって、一つはここの幅を示しているバー、ここを右クリックして、「ブレイクポイントを追加」とすると、数値入力をすることができます。ではまず 640 と入れて、OK しましょう。そうすると、640 のところに、新たな幅の表示が加わりました。これがブレイクポイントです。これがレイアウトを直した後は、ここを超えると、新たな別のデザインに変わるという設定が行えるようになります。ではブレイクポイントのもう一つですが、この幅を変えていくと、動かしているところにピクセル数がでています。では 丁度 480 になるところで止めてみましょう。このように特定のところで、今ピクセル数を見ましたが、目分量でこれくらいかなというのでも結構です。実際にここでブレイクポイントを作ろうかという幅に設定できたら、この「新規ブレイクポイントを作成」をクリックすることでも、このようにブレイクポイントを作ることができます。 これで一番外側と、640 を超えたとき、480 を超えた時、3 種類のデザインを作る準備ができました。目安としては、この紫がパソコンのデスクトップ向けのデザイン、青いエリアはタブレット向けのデザイン、緑のエリアはスマートフォン向けのデザインという風に使い分けて、それぞれのデバイスで一番見やすいレイアウトを作ることができます。特に最近のウェブサイトはスマートフォンからのアクセスも非常に多くなっています。スマートフォンで見たときに、単にパソコンの画面が小さくなっただけだと、かなり見づらくなってしまうケースも多いのでよりユーザビリティの高いサイトを作るにはこうしたレスポンシブルへの対応が必須になっています。まずは基準となるブレイクポイントの作り方を覚えておいてください。

Muse (2015) 基本講座

WebデザインソフトMuseを使うと、HTMLのコードを使わずにデザイン性に溢れるWebページを簡単に作ることが可能です。このコースではマスターページの作成やコンテンツの追加、テキストの追加や色の設定、ウィジェットや拡張機能の活用、レスポンシブなレイアウトの設定やデータをアップロードしてウェブ上に公開する手順などMuseの操作をひと通り学ぶことができます。

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

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

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

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