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

レスポンシブとレイアウト

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レスポンシブデザインを作成する上でよく使用される、レイアウト上の機能のバリエーションを解説します。
講師:
04:39

字幕

このレッスンではレスポンシブ Web デザインとオブジェクトのレイアウトの関係性について解説します。それでは、このレッスンのサンプルプロジェクト今開いてますけど、この Homepage ですね。これ、プロパティを見てみるともう「可変幅」になってますね。ではこれを開いてみましょう。そうすると、シンプルな形でオブジェクトが幾つか置いてあるのでこれを使ってレスポンシブでデザインする時のオブジェクトのレイアウトについて基本的な所を解説します。ではここのバーをドラッグして幅を変えてみるとまずこのロゴを見ててください。位置が変わらずにページの外にはみ出てしまいます。これは何故こういうことが起こるかというと、オブジェクトですね、これを選択します。そうすると、この「固定」という所が小さいですけど左基準になってるんですね。なのでこの左から、ここまでの距離感これを保つようになってるのでそれが保たれるのでページの外に出てしまうとそういったことになってます。レスポンシブでデザインする時にはこの様に、どこを基準にレイアウトするか幅が変わるのでそれが大事になってきます。このロゴをちゃんと一通り右に置いておきたい時には右基準にしてあげるとこんな感じでちゃんとついてきてくれます。 こういった、どこを基準にするかこれ非常に大事になってくるのでまず基本として覚えておいて下さい。ではちょっと下の方に行きましょう。今度はこんな感じで4つのオブジェクトが並んでますね。ちょっと見てみるとこんな感じに縮まっていくと段々段々等間隔によっていきます。これはどこを基準になってるかというと基準は付けてないですね。その代わり均等にこの様な形で動くようになっています。ではほぼ均等に動いていくのはいいのですがあまり狭くなると、この様に固まってしまうくっ付いてしまうという問題があります。こういう問題を避けるためにはもうこのレイアウトが変わるだけでは限界という所まで来たらレイアウトそのものが変わるとそういったきっかけを作ってやります。ではある程度狭くなったポイントここにブレークポイントというのを作ってやります。そうするとこの様に見た目が変わります。ブレークポイントを作ったらこのブレークポイントを選んでる状態の所でレイアウトを変えてやります。こんな感じでオブジェクトのレイアウトを変更するとこの様になります。元々の所ですね、この様にさっきと同じように変わっていってブレークポイントを越えるとパッと変化するとこの様な動作させることもできます。 そうすればレイアウトの限界に来た時にまた違うレイアウトで違う展開ができると非常にフレキシブルな展開ができますね。また、位置だけでなくロゴの方に戻るとこれを一回選択していてではここの部分今「なし」となってるのを「レスポンシブな幅と高さ」というのに変えてあげるとこの様に幅が変わるのにつれてロゴ自体の大きさも変わっていくとこの様に大きさの変更でレイアウトに影響が出てくるとそんな要素もあります。こういった基本的な要素まずはこのシンプルな所でちょっと確認してみてそれを踏まえた上で本格的にページ全体をレスポンシブに直していく作業のサンプルの方に進んでください。

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

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

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

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

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

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