Muse (2015) 基本講座

モバイル向けメニューの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
アコーディオンのウィジェットと垂直のメニューを組み合わせ、タップすると項目が開くモバイル向けのメニューを作成します。
講師:
06:50

字幕

このレッスンではモバイルに特化した新しいメニューを作成します。それではマスターのページを開きます。今の状態ですけど元々あったメニューがこのブレークポイントに来ると隠されるようになってます。なので、こっちのブレークポイントからまた新しいメニューを作ってやりましょう。そしたらブレークポイントの部分でこのロゴもクリックして選択した上で右クリックして「ブレークポイントで隠す」とやっておいて、ロゴもとりあえず出なくします。そしたらこの部分に「ウィジェットライブラリ」から「パネル」>「アコーディオン」これを持ってきます。アコーディオンはクリックしたりタップしたりした部分がこの様に開くものですけど、これで上の部分をタップした時にメニューが開くというそんな仕様にしてみようと思います。では必要なのはこの一段分だけなのでまずこの下の段を開けて2回クリックしてこのテキストを選びます。そして Delete します。この見出しも削ります。こっちの部分も削ってこの見出しも削ってとやってやると見出しが一段と中身が一段だけになります。この文も要らないですね。これも削ります。それでですね、標準の状態だとこのままだとクリックしても閉じなくなります。 そんな時はオプションから「すべてを閉じることができる」これにチェックを入れると1個だけだけど開閉できるようになります。ではこの文字も要らないのでダブルクリックしてテキストを Delete します。そしたら、この塗りを黒にしておきましょう。空いた状態の所も同じく黒にしておきます。そしたら閉じた状態でこのヘッダーの部分いっぱいに拡げてやります。そうすると、このタップで開閉するようになります。それでですね、このメニューは幅を広げても残ってしまいます。なので、今度はこの拡げた状態で右クリックして「ブレークポイントで隠す」とやってあげるとこっちだと元のメニューがでてきてブレークポイントを越えるとこっちに切り替わるとこの様に切り替えることができます。ではまずこれロゴが無くなってしまったのでこれを復活させましょう。ただ黒にしたので元々のロゴだと黒文字なので見えなくなってしまいます。そこで、このレッスンの素材であるassets の中にあるvictor_kings_bw_ai という Illustrator のファイルがあるのでIllustrator で開きます。すると、こんな感じで真っ白に見えるんですが実はこれ白一色のロゴがここに入っています。 じゃあこれを選んでライブラリに追加しましょう。そしたら Muse に戻ってライブラリを開けます。そうするとロゴがあるのでこれを持ってきます。そしてここに配置してあげましょう。そうすると、ロゴが復活します。ではここのアコーディオンの中にまた「ウィジェットライブラリ」から「メニュー」の中の「垂直方向」これを持ってきます。そうすると、縦のメニューが出てくるのでこれを、このアコーディオンの中に入れてやります。サイズを調整してやって幅もいっぱいにしてちょっと全体の幅を広げましょう。こうすることによって開閉できるメニューができました。では、このメニューもまず2回クリックして個別のボタンを選んで塗りを黒にします。そうすると、全部揃ってきます。こんな感じでモバイル用のメニューができました。ではこうしてできたメニューを実際に試してみましょう。他のページに行っても幅に合わせて元のメニューとモバイルが切り替わります。ここでロゴが出っ放しになってるのでこれをマスターの方でこっちの大きい方に来たらこの白いロゴは隠すとやっておけば大丈夫ですね。ではこれをプレビューしてみましょう。こちらの「プレビュー」でやるかもしくは「ファイル」の「ブラウザーでページをプレビュー」これを実行します。 そうすると、ブラウザーの方に書き出しが行われます。そして実際にできたページで幅を変更していってモバイル用のメニューができました。そしてタップすると、この様に内容がでてくるというそのような状態となりました。モバイル用に、このタイプのアコーディオンタイプのメニューはよく使われます。大体お約束事として、こういった所に一番良いロゴなんかがあったらそこをタップするとメニューが出てくるというのは大分ユーザーの方も慣れているので是非このスタイルを採用してみて下さい。

Muse (2015) 基本講座

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

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

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

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

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