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

レジストレーションの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レジストレーションのエリアに、コピーを利用して値段表示を複数作成した後、フッターにコピーライト表示を追加します。
講師:
09:34

字幕

このレッスンでは REGISTER のセクションを作成します。それではこのレッスンのファイルを開いてだいぶ出来てきましたね。下の方を見ていくとこの部分ですね、ここには REGISTER のエリアを作ります。では、サイズをちょっとだけ縮小して75% にしてこの上で作業を行います。この背景選んでしまって邪魔になるので右クリックして「ロック」しておきましょう。そうすると、ここは選択されないので作業が行いやすくなります。ではまず長方形を作ります。ではドラッグしたら塗りを黒にします。そして、「サイズ変更」で幅も高さも250 にしましょう。そしたら中央に配置してそして線をこのピンク色で付けます。そしたら単純に全部囲むんじゃなくてこの線のオプションをクリックしてそして全部連動を外します。そしたら、この上と左右の数字を0にして下を pixel にするとこんな感じのちょっと面白い世界になります。そしたら、ここに重ねてテキストのエリアをこんな感じで作ってやります。そしたらここに内容を入れるのですがこのレッスンの素材のregister.docx ですね。この中にある、この真ん中のGold Package というテキストをコピーします。 そして、ここの部分にペーストします。ただ黒だと見えないので文字の色を白にしておきましょう。そして「テキスト」のオプションで中央揃えにします。ではここから形を変えていきましょう。まずこの Gold Package という所を選択してフォントを変更します。では Lato のBold にしましょう。そしてサイズを 18 にしてそしてカラーをこの黄色にします。では次はこの $499、ここはフォントを Adelle の Bold にします。そして数字を 80 にします。そしたら最後はここのテキストフォントを Lato のLight にします。サイズは 16 にします。そうすると、こんなデザインとなりました。そしたらここに次ボタンを設置します。ではこの BOOK NOW を改造して使いましょう。Mac の方は OptionWindows の方は Alt を押しながらドラッグして複製します。そしたらステートですね、色を変えます。まず「通常」これを選んでる状態で塗りはこの青にします。そしたら次はステートを「ロールオーバー」にしてここは緑にしましょう。そうすると、マウスダウンも緑になるので次「アクティブ」ですね。 ここも緑にします。こうしてやると、こんな感じに変化するようになります。ではこれを、ここに入れてやるんですけど下にもぐってしまう場合には右クリックして「アレンジ」>「最前面へ」とやります。そうすると上に出てきます。サイズがちょっと大きいのでドラッグして縮めてやってこの文字、1回クリックすると選択されるのでこんな風に調整します。これで1個できました。では、これを利用して他のも作りましょう。ではこれを選んでやってOption または Alt を押しながらドラッグするとこんな風に複製できます。これを更に、また Option またはAlt を押しながらドラッグすると均等間隔に並ぶとこんな表示になるのでこれで3つ並びました。そしたらちょっとアクセントをつけるのに両脇下げましょう。1個選んで今度は Shift キーを押しながらもう一個を囲むと両脇を選べるのでShift キーを押しながらカーソルキーでこれをでは6回分にしましょう。6回分動かしてこの様に移動させます。そしたら文章の内容を変えていきましょう。まず、こっちの左側ここはBlonze Package の内容をコピペします。ではこのタイトルの所選択して差し替えをペーストします。 値段も差し替えて次にこっちのメインも差し替えます。そしたら反対側はSilver Package なのでこっちもSilver Package そして値段は399最後に文章を変えてこんな感じとなりました。ではこれで後はタイトルを追加するだけですね。こっちのタイトルをOption または Alt を押しながら引っ張ってきてまずは上にぴたっと付けます。そしたらカーソルキーの下を1 2 3 4 5 6 7 8 9 1020 回押します。そしたらここですね。REGISTRATION と入れてあげます。そしてフッターまで作ってしまいましょう。フッターはこっちのマスターのページで作成します。では、テキストツールでエリアを作ってそしてここに著作権表示の内容を入力します。そしたらここの「段落スタイル」これはこの Body Copyというのを選びます。そしてフォントサイズこれを下げていきましょう。12 にしてあげます。そうすると、こんな感じになります。ではこれを中央に配置してこの効果の所の不透明度これを 40 ぐらいにしておきましょう。すると控えめで良い表示になります。そしたらフォームに戻ってプレビューしてみましょう。 そうすると、一番下の方コピーライトも表示されてボタンも機能するようになってます。では後、このボタンの内容も必要に応じて変えておきましょう。例えばここですね。REGISTER としたとするとこれをコピーしてこちらにペーストしてやれば変えることができます。この様に使いまわしてもすぐにテキストを変えれば変えられるというのが良い所ですね。この様にして REGISTRATION のエリアができました。

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

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

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

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

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

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