Museで作るカラフルなスクロールページ

スケジュールの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
アコーディオン型パネルのウィジェットを使い、セッション内容のスケジュールを、テキストからコピーして作成します。
講師:
10:01

字幕

このレッスンではスケジュールの作成を行います。それでは、ホーム画面を開けてこの下の方の青いエリアここにスケジュールの作成を行います。では、ウィジェットライブラリからパネルのアコーディオンこれを出してきましょう。アコーディオンを使ってこんな感じでクリックしたところの内容が開くインターフェイスができますね。では、これの変形で幅を 675 にします。リンクを外しておきましょう。675 にします。そうすると、こんな形全体をもう少し引いてみましょう。これぐらいのサイズになります。では、これをクリックして選んで整列のコンテンツエリアに揃える、これで、中央に揃えておきましょう。そして、これがマウスの状態によって変わるステートですね、それの設定を行います。「ウィンドウ」>「ステート」のパネルを出します。ちょっとこっちの方に置いておきましょう。そして、これを選びます。一回クリックして、この見出しの部分これを選びます。そしたら、まず通常の所にあわせます。通常時の色は、まず線はなしですね。線はなしで塗りをダークブルーにします。これは、Photoshop から拾っているんですね。そして、マウスダウンも同じアクティブも同じ色にします。 そして、ロールオーバー。マウスが重なっている時だけこんな感じの青にしましょう。元々のスウォッチの方に入っている青にしました。こんな感じにステートによる切り替えを設定しました。そしたら、この見出しの文字の設定を行います。ステートのパネルは閉じましょう。そして、ダブルクリックして文字の所に行ったらテキストの揃えを中央にします。そして、「ウィンドウ」>「段落スタイル」ここから、「Section Heading 」これを選びましょう。そして、フォントサイズをちょっと下げてやります。そして、これですね。このスタイルも新しくSchedule としておきましょう。これで他のところもすぐに作ることができます。そしたら、このレッスンの素材のひとつであるschedule という名前のWord ファイルですねここに時刻と予定が書いてあります。ここから、コピー&ペーストを行います。まず、一番上の時間をコピーしたうえでこちらに持ってきます。では、文字のところに貼ってあげるとこんな感じですね。そしたら、この本文部分こんなに沢山はいらないのでこれを調整しましょう。まずクリックを進めてこの部分を選択するようにしてこれをドラッグしてくると真ん中に揃えます。 そしたら、内容を入れましょう。7:30-8:00 はBreakfast Meet & Greet となっていますね。こちらも中央揃えにしてあげてではフォントの設定を行いましょう。フォントが lato lightこれを選んでやってそしてサイズを 18 にしましょう。そして、色は黒でいいですね。そしたら、この余計なスペースを詰めます。そしたら、ここの開けた状態のパネルのサイズこれを2回クリックすると選べるのでここを変形を使って高さですねこれを 70 にしましょう。するとほどよい感じになります。では、次のところ、こちらもスタイルが揃ったので次の予定を入れます。では、時間を入れてここの細かい内容のところですがこちらの内容をコピーペーストした方が速いのでCommand もしくはCtrl+C を押してこちらのこの部分はDelete で消してしまってそして、ペーストを行います。すると、貼り付けられるので上に合わせてこの時間に対応する内容を入れます。そして、変形ですね。高さは 70 としてあげると同じスタイルになります。これをどんどんどんどん繰り返していきます。こちらにテキストの貼り付けを行います。 そして、ステートでスタイルが変わってしまっているのでこちらのステートを変えてマウスダウンのところや通常のところですねここでこの文字のスタイルを段落スタイルをschedule にしてあげるとこのように直ってくれます。これで全部が同じ見出しとなりました。こちらも元々のをDelete した上でこちらの1行をコピーしてペーストして上につくようにします。そして、変形ですね。高さを 70 とします。そして、こちらのプラスをクリックするとどんどん増やしていくことができます。どんどん場所が足りなくなってくるのでそうした場合には、一回下の項目 これらを選んでうえで下の方にずらしてあげます。そして、サイズを広げてやればOK です。これをこのこちらのテキストの内容が全部入るまで繰り返してやれば全部そろった内容が出てきます。一回、動きを見てみましょう。プレビューを押すとこの様なスタイルとなってクリックしたところが開いて内容を見れます。そして、マウスを重ねたところがこの青色にハイライトすると。このような状態となっています。では、デザインに戻って1個だけ今一番最初の段階ではどこかしらが開いている状態になっています。 これを最初は全部閉まっている状態にしてやる時にはこちらのオプションからすべてを閉じることができるこれをオンにしておきます。そうするとこちらをクリックしたときに閉じますのでこの状態でもう一回プレビューしてみると最初から全然開いていないそして、どこかをクリックしたら表示されてその都度全部閉じることができるといった状態になってすっきりします。こういったアコーディオン型のメニューは限られたスペースで多くの項目を載せることができてしかもインタラクティブに反応するのでかなり使いやすいページを作ることができます。ぜひとも活用してください。

Museで作るカラフルなスクロールページ

WebデザインソフトMuseを使うと、デザイン性にあふれたWebページを簡単に作ることができます。このコースではページ全体の設計、画面のスクロールに合わせた動きやエフェクトの追加、ページ内のナビゲーション作成やウィジェットの活用、そしてできあがったファイルをアップロードしてWebサイトを公開するまでのひと通りの手順を学んでいきます。

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

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

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

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