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

垂直メニューの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スマホなどページ幅が極端にせまくなった場合に最適な縦表示のメニューを作成する手順について解説します。
講師:
04:57

字幕

このレッスンでは狭い幅の時に表示するための縦型のメニューを作成します。それでは、このレッスンのサンプルプロジェクトを開いてホームページを見てみましょう。そして、ページの幅ですねこれを変えてみるとある程度の所まで来るとブレークポイント過ぎるとこの様にテキストが小さくなるように設定がしてあります。ただ、これももっと例えばスマートフォンぐらいまで幅が狭くなると文字がこのようにはみ出してしまいます。根本的にこの横長のナビゲーションというのはパソコンの横幅の広い画面を想定しているのでスマートフォンの様な縦長の狭い幅の画面には向いていないんですね。なので、ある程度の所まで来たら根本的にこのメニューを使うのをやめて別のタイプのメニューを表示する事にしてみましょう。それでは、改めてマスターを開きます。そうすると今通常のメニューがあります。そしたら、新しくモバイル用の縦メニューをアサインします。では、まずこのブレークポイントを作っておきましょう。ページ幅をどんどん狭くしていって今回は 600 px で表示を完全に切り替えようと思うので600 px のところでブレークポイントを作ります。そしたら、ウィジェットライブラリからこの中のメニューですねウィジェットライブラリの一番下にあるメニューを開けてそして垂直方向、水平方向とあるので垂直方向のメニューをドラッグして持ってきます。 そうすると既に今あるページが反映されたメニューがこのように出来上がります。では、今の状態だと常に出てしまうのでまずこの 600 のほうですねここでだけ縦メニューが出すことにしたいのでこれを一回クリックして選択しておいたら右クリックをして「他のブレークポイントで隠す」他にブレークポイントが複数あるので一個一個設定するのは面倒くさいので他のブレークポイントで隠すとやっておくと600 のときには出るんですけど他のブレークポイントで消えるといった形になります。では、今度は逆にこのメニューですねこれは「ブレークポイントで隠す」を選んでおけばこっちでは出るけれどここに来ると出なくなると。このように切り分けることができます。それでは、このメニューのサイズと位置を決めていきましょう。まず、この上の方にドラッグしていって一番上にぴったりと付けます。そして、横幅を広げていきます。この 600 のときの表示の幅になりました。そしたら、これはレスポンシブの幅に設定されています。一応確認してもし設定されていなかったらレスポンシブの幅にあわせてください。そして、この真ん中の部分ここに固定するようにチェックを入れます。 そうするとこのようにモバイル表示にピッタり向いたメニューとなります。これでずっと幅が変わってくるとパソコン用のわりと余裕のある表示のときの大きな文字の表示そして、表示幅が狭くなってきたので文字を小さくしてまたしばらく持たせると。そして明らかに幅の狭いモバイル機器の領域に入ったら完全にモバイル向けのメニューになる。このような三段構えを行うことができました。レスポンシブでもこの様に動かしている途中にサイズが変わるだけじゃなくてある程度のところまできたら全くインターフェイスを変えるというのも有効な手立てです。この使い分けとあとどれくらいのブレークポイントで変更していくかこういった部分をぜひとも参考にしてください。

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

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

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

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

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

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