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

ヘッダーとフッターの設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Museのマスターページ上で、Photoshop上でのデザインを元にしたサイズで、ヘッダーとフッターのエリアを作成します。
講師:
04:57

字幕

このレッスンではヘッダーとフッターの作成をマスターページ上で行います。それでは、このレッスンのファイルを開いてマスターのページを開きます。Muse では、このマスターのページでヘッダーとフッターの項目それを設定することができます。では実際にやってみましょう。まず Muse、表示が全体映ってないので1回 75% ぐらいにしてみましょう。そうすると、左右全部映りましたね。このエリアがヘッダーこのエリアがフッターとなります。では今回、1回 Photoshop に切り替えます。Photoshop で作成したこのデザインに合わせて作るのでヘッダー、この部分ですね。そしてフッターがこちらとなりますけどこれらは、この Photoshop のデザインに準じたサイズになってないといけないです。ではまず、この Photoshop で作ったヘッダーこれサイズがどれぐらいなのか知りたいわけですがこんな方法を使うと便利です。まずこれヘッダーの部分グループになってるのでグループを分けます。そうすると、そのグループの中にシェイプでこの白い四角が作ってあります。ではそのレイヤーを選んだ上で「編集」メニューから「自由変形」を実行します。 そうすると、この「自由変形」の設定中はここにそのレイヤーのサイズがでてきます。高さ H が 130.00 pxになってますね。もしこれが例えば% になってたりとかmm になってたりする場合には右クリックしてやってpx を選ぶとちゃんと px でわかるようになってます。これで 130.00 px だと分かったので変形は行わないので✕クリックして、キャンセルします。そしたら今度は Muse の方に移動しましょう。では予めちょっとヘッダー広くとっておきましょう。そして長方形ツールを使ってこの一番隅っこの所からドラッグしてきて、横幅これはいっぱいに合わせます。今、このポインタなどで見て頂くと小さいですけど何 px と出ています。これで 130 に合うように作ってもいいんですがなかなか近い所で合わなかったりします。そういった場合にはまず幅をきっちり 100% にしておいた上で「サイズ変更」という所クリックすると数値入力できます。この時、この鎖これが外れてる状態で高さを 130 にしてやります。これは外れてないと、上も幅も一緒に変わってしまいます。これで変更ができました。ではこのラインここに合わせて、このヘッダーのエリアを設定してやります。 ここに持ってくると、文字が小さいですけどヘッダー 130 px とでていてこれでヘッダー部分ができました。では次はフッターですね。フッターも同じようにちょっと拡げておいてまた Photoshop に行きます。じゃあ Photoshop 上でフッターは下の方に行ってここはグループになってません。むき出しで、このフッターの黒い部分が下の方を見てみると置かれています。このレイヤーを選んで「自由変形」実行すると今度は 100.00 px ですね。では判明したので✕でキャンセルします。そしてまた Muse の方に移動します。ではまた長方形を使って今度は下からもう幅を1回作ってしまいましょう。幅 100% で仮で作って塗りを黒にします。そのうえで「サイズ変更」で高さ、ほぼピッタリでしたけど100 px にしてあげます。これで、このフッターの線をこの部分に持って来ればこれで上下とも Photoshop のデザインと同じ大きさのヘッダーエリアとフッターエリアとなりました。特に Photoshop 上のオブジェクトのサイズを割り出す方法一瞬なかなかわかりづらいですがこの「自由変形」を実行した時の表示これは大変わかりやすいのでこういった目的に使うのが便利です。 是非とも試してみて下さい。

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

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

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

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

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

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