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

オブジェクトをスケーリング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ページ上に配置されているオブジェクトが、幅の変更にあわせてサイズ変更するように設定する手順を解説します。
講師:
06:22

字幕

このレッスンでは ホーム画面のレイアウトの修正を行います。ぞれでは このレッスンのサンプルファイルを開いてそしてホーム、ここの所開けてやります。現在の状態ですが、ページの幅を変えるとメニューが変化するのとブレークポイントまで行くとこのヘッダー部分のテキストがなくなるといった所まで作ってあります。では、次に、この中段の画像とテキストこの辺を操作してみましょう。今の状態は何もしてないので、普通にページの外にどんどんはみ出していきます。では まずこれら、それぞれのこの3つのブロックなんですけどクリックしてみると一遍に全部選ばれるようになってます。これ どういう状態かというと右クリックしてみると「グループ化解除」と出てきます。ということは、このテキストと画像とこの色のべた塗りのブロックこれはグループ化されているということになります。それぞれ実は別々のグループとなっています。では、まずこのグループを選んだら「変形」の所見てみましょう。そして今「サイズ変更」の部分これ「固定」になってるのでこれを「レスポンシブな幅と高さ」これにしてみましょう。そうすると、動かしてみると良さそうですね。この様に変わっています。 では 次、真ん中ですね。真ん中も「変形」をクリックしてそして これも「レスポンシブな幅と高さ」にしてみます。そして こちらが右側のものも同じく「レスポンシブな幅と高さ」にします。じゃあこれでどうなるか見てみるとサイズは変わっていくんですけどそれぞれ位置が変わらなくて結局はみ出してしまいます。なので、これそれぞれこの右側にある青いグループはページの右側に固定そしてこの真ん中の黄色い所は真ん中に固定とそれぞれしてやりましょう。そうすると、どうでしょうか。見てみると良い感じですね、この様にちゃんと位置も追従して縮んでいくようになりました。ただこれもまだ問題がありましてずっと小さくしていくとある時点でこの様にテキストが2行になってきたりするんですけどそうすると、こんな感じで写真がはみ出してしまいます。この上のテキストの分だけ増えた分だけ押し出されてこの枠の外にでてしまうんですね。これもちょっと見栄えが悪いですね、なのでこの場合、こうしましょう。では今「グループ」になってますけどここまで先に設定した上で1回グループ化を解除してしまいます。これもグループ化を解除してしまいます。それぞれ1回バラバラにします。 そしたら、今縦の幅が変わらないことによってレイアウトの崩れがでてきたのでではここで今まで「レスポンシブな幅と高さ」だったものを「レスポンシブな幅」に変更してみます。そしてテキストは単体だと見てみると「レスポンシブな幅」になっていますね。では こちらのブロック、これも「レスポンシブな幅」にします。青い所も「レスポンシブな幅」にします。そしてこの中の写真や画像は「レスポンシブな幅と高さ」にしておきます。この様にそれぞれ背景と前面の挙動が変わりました。こうするとどうなるかというとテキストがこの様に2行になったら記述が変わって画像が下にずれるようになったので画像がはみ出さなくなりましたね。「レスポンシブな幅と高さ」だとこの縦横の比率が変わらないのでさっきみたいなことがおきるんですがこの写真や画像は縦横の比率が変わったら困るんですけどこの背景はむしろフレキシブルに変わってほしいのでそんな時には「レスポンシブな幅」にしておきます。この文字は最初から「レスポンシブな幅」だけの設定になってます。そして画像は幅と高さ両方をレスポンシブにしてやると、状態にするとこの様にうまい具合にサイズが変わってもそれぞれがちょうどいい具合に変形してくれます。 まず最初、レイアウトを作る時グループにしておいた方がやりやすいですがこの様に個別にそれぞれ設定を変えなきゃいけないこともあるのでそういった時は、グループを解除してサイズを設定するといったことになります。ここですね、結構やっていて迷うようなポイントなので是非とも覚えておいて下さい。

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

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

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

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

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

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