Muse基本講座

スマートフォン用バージョンを作成する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
iPhoneやAndroidOSのスマートフォンによる閲覧に最適化されたページの作成とセッティングについて解説します。
講師:
04:26

字幕

このレッスンでは スマートフォン用の表示を追加します 現在の状態はデスクトップ用と タブレット用の 表示が出来ている状態です では ここに新しく スマートフォン用も 追加してみましましょう 「スマートフォン」をクリックします そしたら「コピー元」が出てきますが タブレット向けがあるので 表示の近い「タブレット」を選びます そして「サイトプランをコピー」 「ページ属性をコピー」で 「 OK 」をすると スマートフォン用の構成ができました そうしたら タブレットの「マスター」から ヘッダーをコピーしてくるのですが スマートフォンは表示領域が狭いので こういったタイプのメニューを付けると 画面がいっぱいになってしまいます なので 今回はこのメニューは使わずに ロゴと背景だけ持ってきましょう これだけまとめてドラッグして Mac の方は command Windows の方は Ctrl を押しながら C を押してコピーをしたら スマートフォンに移動して 「マスター」に行きます これで command もしくは Ctrl と V を押します では このロゴはよけておいて 後で使います 背景を一番上に持って行って ヘッダーサイズに合わせます それでは ここにスマートフォンに 向いた感じのメニューを作ってみましょう 「ウィジェットライブラリ」から 「パネル」の「アコーディオン」を 出してきます そうすると この「アコーディオン」パネルが 出てくるのですが これは今 3つページがあります 今回は1個しか使わないので 1個を選択したら Delete して 消してしまいます また 見出しをもう1つクリックして Delete して 消します これで1個だけになりました そして このアコーディオンの中には テキストが入っているので これを2回クリックして 直接選んだら Delete して 消します そうしたらまた 「ウィジェットライブラリ」の中に 今度は「メニュー」の「垂直方向」 これをこのアコーディオンの中に ドロップします すると こんな感じの表示になります そうしたら このアコーディオンごと こちらの方に持って行って 大きさをヘッダーに合わせましょう そうしたら メニューの大きさを このアコーディオンの幅に合わせます そして アコーディオンの縦幅です こちらもメニューのように合わせます そうしたら ここのテキストは要らないので 消してしまいます そうしたら 今 下の背景が見えなくなってしまったので ここで「ステート」を表示して この全ての表示の所で 塗りを透明にします 「ロールオーバー」も透明に 「マウスダウン」も透明で 「アクティブ」も透明にしておきましょう そうすると いつも ここが見えるようになるので このロゴをここに持ってきます その上で これが大事なのですが ここの「すべて閉じることができる」 という所にチェックを入れておきます そうじゃないとこれが開きっぱなしで 閉じなくなってしまいます では この状態でプレビューをしてみましょう すると この様になって クリックするたびに スマートフォンなのでタップですね タップするたびに 開閉して メニューを出したり ひっこめたり 出来るようになりました スマートフォンだと たたんでおけばコンパクトになるので 大変便利です この様なウィジェットの応用で 作るメニューを 是非とも試してみてください

Muse基本講座

Adobe MuseはHTMLやCSSといった専門知識がなくても、IllustratorやInDesignを使うような感覚で手軽にWebサイトをデザインできるソフトです。このコースではMuseを使ってページに文章や写真をレイアウトするやり方やグラフィックの作成、モバイル機器に対応したサイトの作成方法などについて学習します。

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

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

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

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