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

オブジェクトを再配置

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ページの幅が一定の値を下回った時に、サイズ変更だけでなくレイアウト自体を変更させるための手順を解説します。
講師:
04:15

字幕

このレッスンでは、ページの幅に応じてレイアウトを変更する手順を解説します。それでは、このレッスンのサンプルのプロジェクトを開いてみるとホームがこのような状態になっています。幅を変えるとそれに合わせてこの集団のブロックと、画像ですね、これがレスポンシブに変化していきます。ただこれもあまりズーとどこまで縮めても小さくなっていくとだんだん見づらくなってきます。なので、ある程度のところまではレスポンシブに幅と高さが変化するようにしてある時点を超えたら幅と高さは変わらずにレイアウトが変わって小さい画面でも見やすい形にするとそのような形を作ってみようと思います。では、今、このプロジェクトですがこの700ピクセルのところにブレークポイントが作ってあります。こっちへ飛んでみましょう。そうすると、今の段階だとまだ前のレイアウトを総収しているのですがこれが、例えば、今、3列になっているのを2列にしてやれば同じ大きさでもまだすごく余裕が出てきますね。では、ここのブレークポイントでレイアウトが変更されるようにしてみましょう。それでは、まず、今、スペースがないのでこのスペースを開けましょう。ちょっとページを下の方まで見てみるとこのテキストのエリアがズーと下まであってここからフッターです。 フッターはこのページに直にあるのではなくてマスターの方に共通の要素として入れてあります。この様にマスターにいれてあるフッターはこの上のオブジェクトが動くと見てください、押されて動いてますね。そして同様にこちらもスペースが空いてくるとそういう状態になっています。では、このテキストのエリアをズーと下の方までやって充分なスペースを空けたら、では、こちらにあるオブジェクトを纏めてドラッグ&ドロップしてこの様にレイアウトを直してあげましょう。こちらも纏めてドラッグしてきてレイアウトを直します。こうするとだいぶ余裕ができますね。そしてこのテキストのオブジェクトを上に持ってくると余分なスペースが無くなってちゃんとフッターもついてきています。こうすると、だんだん最初3列表示だったのが小さくなってきてある時点を超えると、2列になるとこういったフレキシブルな対応が可能となります。そして、もう一点、これを700を超えたところを見てもらえると動かしても幅が変わっていないですね。これですが、せっかくレイアウトが変わってもどんどん小さくなって意味が無いのでこちらのブレークポイントではそれぞれレスポンシブな幅と高さ、またはレスポンシブな幅になっているのですがこちらのブレークポイントに来た時点でそれぞれのサイズ変更が無しになっています。 この固定されたサイズのままになっていますね。そうすれば、ちゃんとこのレイアウトを保ったままで大きさが変わらずに小さくなりすぎて見づらくなることがないままに使うことができます。こうした操作に合わせてレスポンシブにどんどん幅がかわっていくという動作とある時点を超えるとポコンとレイアウトが変わるという動作これを併用すると、よりフレキシブルに見やすいサイトを作ることができます。こうした工夫のテクニックも是非とも覚えておいてください。

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

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

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

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

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

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