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

プロジェクトの設定変更

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Museで作成した既存のWebサイトをレスポンシブ対応に作り変えるために必要な基本設定について解説します。
講師:
04:38

字幕

このレッスンではレスポンシブデザインに対応するためのプロジェクトの設定変更について解説します。それでは今、このレッスンのサンプルプロジェクトが開かれています。では、一番トップとなるホームのぺージ、ホームページですね。これをダブルクリックで開けてみましょう。そしてこの部分にページ幅を変更するシミュレーションするバーがあるのでこれをドラッグしてみます。これをドラッグするとブラウザーの幅が狭くなったのと同じ効果となります。これをドラッグしていくと今ですね、この薄く色が変わってるこのポイントが表示範囲となるのでこのちょっと暗くなってる所はブラウザー上に出てないということですね。こちらの部分だけが出てきます。今このサンプルのサイトはレスポンシブになっていないのでこの様にページの幅が変わるとそれだけ内容がはみ出してしまいます。では、これをレスポンシブ対応にするにはどうしたらいいかまず一番根本的な所としてサイト全体の設定変更があります。では、「ファイル」メニューですね。この中に「サイトプロパティ...」というのがあります。ではこれを開けてやります。そうすると、一番最初の「レイアウト」というタブの所に一番最初の所ですね、今「固定幅」となっています。 「固定幅」、今見て頂いたような幅が変わらない所ブラウザーの幅が変わるとはみ出た分はそのまま外に行ってしまう。「固定幅」の設定になってます。ではこれを開けると「可変幅」というのがあります。「可変幅」=レスポンシブモードのことです。これを「可変幅」にしてやればサイト内の設定が変わって可変幅でのデザインをすることが可能となります。また、ここでサイト全体の設定をするほかに例えばページごとにどちらにするか選ぶということもできます。では、このそれぞれのぺージの所右クリックすると「ページプロパティ...」というのがあります。「ページプロパティ...」開けてみましょう。そうすると、此方側にも同じのがあります。さっきキャンセルしたのでまだ変えてないので「固定幅」のままですね。ではこれを「可変幅」にしてやると今設定変更したこのページだけが可変幅となります。そしてこの「ブレークポイント幅」という所ですね。これが一番大きく設定した所これ以上広がらないという大きさになります。対してこれ以上小さくならない「最小幅」というのも設定されます。ではこの段階でOK してみてこの中、見てみましょう。まだ細かい所を変えていないので全体的には、まだ未対応なんですがとりあえずこれを動かしてみると部分的にパーツによっては反応するものがありますね。 これ動かすと、この様にメニューの幅が変わってます。このメニューの所のように他のパーツも全部レスポンシブ対応にしていけば全体がレスポンシブとして使えるわけですね。作業を始める前ですね、作業を始めてからなんかちょっと表示が違うぞとなってしまうので作業を始める前に基本的には一番最初の状態でサイト全体、それを可変幅にしておくまた、それぞれページごとにこのページはレスポンシブにしようという所それを可変幅にしておく既存の固定幅のサイト直す場合にはこの手順ですし、もし新規で作る場合にはこちらに設定があるので最初から可変幅を選んでおけば最初からレスポンシブ前提としてデザインすることができます。作業の根本的な部分となるので是非とも覚えておいて下さい。

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

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

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

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

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

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