Muse (2015) 基本講座

コンテンツの修正

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レスポンシブデザインに対応するため、ページ内のオブジェクトを個々に、幅変更時、ブレイクポイント通過後などにあわせ変更を加えます。
講師:
12:34

字幕

このレッスンではレスポンシブデザインに合わせたコンテンツの修正を行います。それではマスターのページからレスポンシブに合わせてコンテンツを直していきましょう。今、幅を変えてみるとまずこのロゴですね。これは大きさが変わっています。これはレスポンシブになっているということです。この設定は、このロゴを選んで「変形」という所を見るとこの「サイズ変更」という所で「レスポンシブな幅と高さ」となっています。これがオンになってると今のようにページの幅に合わせて大きさが変わっていきます。加えてもう1つ例えばこのロゴずっとこの一番左側に置いておきたいのでそういうものは、この「ページに固定」というのをオンにしておきます。これの場合には、左端ですね。ここに固定しておきます。ではその一方こちら側のメニューを見てみましょう。幅を変えてみると大きさ字体も変わらないですし、はみ出してしまいますね。これはどういうことかというとメニューを選んでみます。ここの部分これ表示される項目によってはさっきの「変形」の中ではなくて表に同じものがでてることがあります。まず「固定」を見てみると固定されてないですね。なのでこれは右側に固定しましょう。 そうするとこの様に、とりあえず画面の外にはみ出なくなりました。ではそれにさらに加えてこの部分ですね、これ「レスポンシブな幅」とします。そうするとページ幅を縮めるとメニューも縮まっていくようになりました。ただ、あまり幅を小さくするともう文字もはみ出て破綻してしまいます。なので一定の幅になったらこのメニューを隠してしまって別のメニューを出すということにしようと思います。ではブレークポイント作ります。このバーを右クリックして「ブレークポイントを追加」そしたら 640 にしましょう。で OK すると640 のブレークポイントが追加されてそこに合った状態となりました。今バーは青になったのでこの 640 からのモードそれに変わっています。そしたら、このメニュー選んだ状態で右クリックすると「ブレークポイントで隠す」というのがあります。これを実行すると見えなくなります。これは削除したのではなくちゃんと幅を広げると、この様にでてきます。あるブレークポイントに来たら表示したくないものは今のように右クリックのメニューから「ブレークポイントで隠す」というのを設定しておきましょう。そしたら、このフッターのメニューも同じですね。 フッターメニュー、選びます。まず位置の固定を右側にしておきます。そして、「サイズ変更」を「レスポンシブな幅」とします。そうすると、こんな感じで縮まっていきます。そして 640 のここまで来たら選択した上で「ブレークポイントで隠す」とやってやるとこちらも消えるようになります。ではこちら側のSNS のボタンですね。こちらもShift キーを押しながらそれぞれクリックして纏めて選んだ上で「ブレークポイントで隠す」とやっておきましょう。そうすると、こんな風に一番広いパソコン向けのモードで表示されるものと640 、大体タブレットぐらいでしょうか。こっちのモードとで表示するものを分けることができます。では同じ要領で次は HOME に移動してみましょう。HOME で幅を変えてみるとここが、この三角の所がさっきマスターで設定したブレークポイントそこを越えるとメニューなんかは無くなります。他の項目はまだ対応してないので別途こっちのページで調整していきます。じゃあまずこっちは大分違う要素も多いので新たにブレークポイントをもう一個作りましょう。右クリックして「ブレークポイントを追加」で740 と入れておきましょう。 この 740 の所でまた隠すものとかを決めます。では、今この LEARN MORE のボタンですけどずれちゃってますね。これを「整列」を使って「コンテンツエリアに揃える」として中央を押すとこの様に真ん中に来ます。そして「ページに固定」ですね、これ真ん中にしておけばちゃんと真ん中に配置されたままとなります。ちなみにこちらのモードでも位置が変わってしまうのでこちらでも同じように今は真ん中になってますね。真ん中になってるのを確認した上で中央に固定します。これは別々ブレークポイントごとに別々にやる必要があります。そしたら、ブレークポイントにまた移動してこっちのモードですね、テキストが幅が狭くなったので2行になってしまいました。なので、ここはテキストの方でフォントサイズを下げておきましょう。では18 ぐらいにしておくとこの様に綺麗に収まります。そしてこの位置が変わったのでボタンなんかももう少し上にしてやりましょう。この写真ももうちょっと上でいいですね。こんな風にして調整します。そしたら下の方の様々な要素を見ていきましょう。下のこの CONTACT のボタンとテキストも変わってるのでボタンをちゃんとした位置に持ってきます。 そしてテキストこちらはサイズを下げておきます。そして、これが拡げた時、やはりこのボタンもはみ出してしまってるのでこれは「変形」の方で「ページに固定」と「レスポンシブの幅」としておくとちゃんと変更に合わせて追従していってそして 740 を越えた所もやはり同じように右に固定して幅をレスポンシブにしておきましょう。そしたら、こうした個々のパーツの修正に加えてレイアウトも直しておきましょう。ではまず、このメンバーの写真こういったものも付いては来てるんですが窮屈になってくるのでレイアウトを変えましょう。740 になったらではそれぞれサイズを小さくします。サイズを小さめにしてそして横に並べるとどんどん窮屈になるのでこういった時にはもうまるっきり違うレイアウトにしてしまうというそんな手もあります。こちらにこの様な感じで新しいレイアウトを作ります。こうしておくと、ここに来るまでは従来通り横並びでポイントを越えるとパッとレイアウトが変わって大変見やすさを維持することができます。例えばこういう横並びのものなんかもこれ以上狭くなっていったらくっ付いてしまいますのでこういったものも、横並びになっていたものをこんな感じで、ここのこれらの下の要素をちょっと下の方に持って行ってそしてエリア拡大して縦並びにしてしまいましょう。 他のものは下の方に持ってきます。こうした横に並んでいた物を縦に直すというのはレスポンシブに対応する時に非常によく使われるレイアウト変更のパターンです。この様な感じですね。この要領でどんどんデザインを直していきます。これが幅を変えたらその都度、おりに触れてブラウザーで確認して下さい。「ブラウザーでページをプレビュー」とやってやると書き出しが行われてブラウザーで表示されます。ブラウザーの幅をこの様に変えていくとちゃんとレスポンシブに対応してブレークポイントを越えるとこの様に表示が変わってくと本物のブラウザーの上でちゃんと動作してるかそれを確認して下さい。これもどんどんどんどん縮めていくとスマホと同じような幅になりますのでデバイスは一緒なんですけどレスポンシブデザインの場合にはこのブラウザーの幅を非常に縮めた状態でスマホ向けの表示なんかも確認できます。そうすると実際にうまくいってるかどうかそれを実際の動作環境で試すことができます。大きくは、まずはブレークポイントを設けてある時点からはレイアウトをガラッと変える。そして位置が変わって困るものは左右であったり中央に固定する。そしてパーツは、この幅に合わせて常に変化するように設定する。 そういった項目、押さえていって直してやると1個のページデザインから比較的、少ない手間0から作るんじゃなくてレイアウトの修正で、もう1つモバイル向けのページを作ることができます。最近の Web サイト制作には欠かせないテクニックとなりますので是非とも覚えておいて下さい。

Muse (2015) 基本講座

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

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

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

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

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