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

メニューをカスタマイズ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
固定レイアウト用に作成されていたメニューを、レスポンシブに変化するように調整する手順を解説します。
講師:
09:01

字幕

このレッスンではレスポンシブデザインに合わせたメニューの変更を行います。それでは 今このレッスンのサンプルファイルが開いてあります。では 一番メインとなる 「ホーム」ページここを開いてみましょう。そうすると、実際にもう完成しているページのデザインがあります。では これ一回 Web ブラウザーで開いてみてみましょう。「ファイル」メニューの「ブラウザーでページをプレビュー」これを実行すると書き出しの処理が行われてこの様に規定になっているブラウザーの方でページが開かれます。では これをちょっと幅を変えてみましょう。ページの幅、変えてみるとまだ レスポンシブになってないのでこの様にコンテンツがはみ出て表示されます。この中でも結構まずいのがこのナビゲーションの部分ですね。ページ上部のナビゲーションのメニューがこの様に幅を変えるとはみ出してアクセスできないページができてしまいます。こうなると、かなり構造的にまずいのでまずは幅が変わってもちゃんとこのナビゲーションが見えてる状態にメニューの改造を行います。それではメニューなんですが、今表示してるのはこのホームですけどこれは共通して使われてる要素なのでマスターの方で変更を行います。 では マスターのページを開きます。そうすると、上にこの様にメニューがでています。そして さっきブラウザーでやったようなページの幅の変更ですがここの部分ですね、このバーをドラッグすることでページの幅を変えた状態をシミュレーションできます。では、これですねドラッグすると、さっきと一緒ですね。この青い線より外側にでると表示がはみ出してるということなのでこうなると表示されてないということですね。では、まずこのメニューのウィジェットこれを1回クリックして全体が選ばれてる状態にします。そしたら、ここの「サイズ変更」という所の横のメニューがあるのでこれをクリックしてみると今「なし」となってます。ページの幅が変わってもこのオブジェクトのサイズは変わらないという設定ですね。では ここを「レスポンシブな幅」これに変更します。そうすると、どうなるかというとこの様にドラッグしてパージの幅が変わると合わせてメニューの幅も変わると、良い状態になりましたね。ただもう1つ問題があって、このメニューの左側の方ちょっと見て下さい。見ているとメニューがはみ出してるのがわかると思います。これなんですけどまたメニューを選んでみるとこの「固定」という所その横に小さいですけどこの四角の中に更にチェックが3つ入っている所があります。 今、このメニューの配置はこの右側を固定する形で行われてるのでなので どんどん幅が変わると、右側ははみ出ないですけど左側がはみ出てしまうとそういった状態になってます。これ逆も一緒でして、もしですね左側で固定されていると、今度は右側がはみ出るといったことになります。なので今回はこれを真ん中をチェックを入れておきましょう。この部分非常に小さいのでクリックできるのかどうかなんかちょっとわかりづらいですけどクリックできます。クリックすることで設定を変えられるので真ん中にしておけばこの様に両方均一に変わっていくようになります。ただ まだ問題があってある程度の所まではいいですが狭くなりすぎると今度文字同士が重なったりとかこういったことも起きてきます。なので 一定の幅まで来たら、フォントのサイズを変えてみようかと思います。では その時、ちょっと対策をしましょう。まず このメニューですね、これを2つにコピーしておきます。では 1回これクリックして選んだらコピーして、そしてペーストしておきます。そうすると 全く同じものが2個できましたね。そしたら 次に、この2つのメニューどっちを出すか切り替えるんですけどそのポイントを決めます。 ページの幅をまず変えていって、ではですね770 ぐらいですね。770 まで縮めたら変わることにします。そしたら ここでデザインを変えるという意味でここのブレークポイントを作成「新規ブレークポイントを作成」をクリックします。そうするとここにもう1個枠ができましたね。このブレークポイントを越えるとデザインが切り替わるというそんな設定になってます。では まずこの大きい幅の方である960 こっちをクリックしてこの広い設定にします。そしたら この状態でこっちのさっきコピーした方のこれ右クリックして「ブレークポイントで隠す」とやってやると見えなくなりました。このブレークポイントの時には今の部品はでてこないという設定ですね。じゃあ これが幅が変わっていってまた ブレークポイントを越えたら出るようになりました。そしたら今度はこっちの上にある方、こちらを「ブレークポイントで隠す」としてやるとこうすると、ブレークポイントによって違うメニューがでるようになります。そしたら、こっち側のメニュー新しく作った方こちら側を上の位置に持って行ってそして何回かクリックしてテキストを直に選びます。そしたら 今 14 ポイントとなってますがフォントサイズを小さくしてしまいましょう。 10 ポイントぐらいに持っていきましょう。そうしてやると、大分小さくなって余裕がでましたね。そうすると、この広い幅の時には大きいフォントで表示されてブレークポイントを越えるとフォントサイズがパッと変わるというこの様な切り替えをすることができます。今、これ順番がこっちのロゴより前に来てしまったので今度は、こっちのロゴの画像、これを「アレンジ」>「最前面へ」とやってやれば、こっちの方が前にでてきますね。この様にしてちゃんと幅を変えている時にそれに準じて変わっていくかそしてこの自動の変更では対処しきれないぐらい変わってきたらブレークポイントを越えるとデザインがガラッと変わるとこのように設定してあげると非常に、いつでも見やすいメニューを作ることができます。こちらもこの様に最終的に色んな物が入った状態でも幅が変わってくるとちゃんとメニューの表示が変わるようになります。このレスポンシブな幅に設定するのとあともう1つブレークポイントの設定ですね。これは非常に重要なので是非覚えておいて下さい。

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

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

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

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

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

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