Muse (2015) 基本講座

マスターページの設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マスターページにおける、ヘッダーとフッター及び上下パディングの設定や、区切り線を引く実例を紹介します。
講師:
08:08

字幕

このレッスンではマスターページ設定の基本について解説します。それではこのレッスンのサンプルのファイルを開くとこのような状態になっています。もういくつかページが作ってある状態ですけど中身はまだ全部真っ白です。それではこうした複数のページに共通する例えばメニューなんかの要素ですね。そうしたものを一括して作れるマスターページを設定してみましょう。ではマスターのサムネイルをダブルクリックして開くとこのような状態になっています。まずマスターのページを開くとこんな風に上の部分とそして下の部分にそれぞれ線が引かれています。これをそれぞれこの線から上のエリアがヘッダーそしてこの線から下の部分がフッターとなります。ここが他のページ内の要素とは隔絶して扱われてそれぞれのページに共通するヘッダーメニューナビゲーションだったりとかフッダーのメニューやクレジット表記なんかですねそういったことに使うエリアとなっています。ヘッダー、フッターそれぞれこのエリアの広さを表すバーと共に一番端っこの部分にこんなスライダーがあります。これですが上が上部のパディングを調整するスライダーとなっています。具体的に動かしてみるとこれを動かすとこんな感じに余白ができてきます。 この余白がパディングと呼ばれます。実際のヘッダーがから含めたページ要素はブラウザの表示領域の一番上からこの分だけ開けて始まるというそうした余白の設定になります。パディングの幅を動かしてやるとちょうどこの辺に出ていますね。数字としてページ上部今 20 ピクセルと出ていますけど動かすと開けた分だけリアルタイムで数値が表示されます。このようにしてあまりに上にぴったりくっつけていると窮屈かなという時にはこのように余白を作ることができます。そしてフッターの方ですね。こちらもこのようにパディングの調整が可能です。フッターの要素がブラウザの表示の一番下からどれぐらい離れて表示されるかそういった要素を決めることができます。そしてそれぞれの内側にあるのがヘッダーとフッターの幅を設定するスライダーですね。これはこのパディングの部分から数えて何ピクセルというのがこの辺に表示されています。例えばこんな感じにするとちょうどこの部分ですね。領域が 70 ピクセルという事になります。フッターも同様にこの調整でフッターの幅を変えることができます。それでは1つの例としてヘッダーの部分とその下のエリアを区切る線ですね。それを描いてみましょう。 ではこのツールを使いましょう。長方形ツールですね。これをクリックして選びます。これは読んで字のごとくドラッグすれば長方形を描くことができるツールです。ではこのヘッダーの左上のグリッドのあたりですね。このあたりを起点にしてドラッグしていきます。そしてこのそれぞれの基準の線にはぴたっとこのようにスナップしますのでちょうどこのヘッダーの部分を囲むように描きました。描きましたけど何も見えてないですよね。これは実は線の色とか幅が設定されていないためです。ではこの線の色の設定これで黒にしてみましょう。そして幅ですね。それを2にすると2ピクセルの線幅になります。これで見えてますね。では一度プレビューをクリックしてみましょう。そうすると実際にブラウザでどんな風に出てくるかそれが確認できます。見ると長方形になっちゃってますね。できればこの上の線はなくして線一本だけで区切りたいって時にはこんなことができます。ではマスターの方に戻ってこの選択ツールで今描いた長方形を選んでいる状態で線のこの線と書いてある所ですねこのオプションを表示します。そうしたら線幅という所ですが見てみると上下左右ばらばらに設定が可能になっています。 ここのチェーンがオンになっていると全部いっぺんに変わるんですがこれを外してしまうと個別に変えることができます。ではまず両サイドをですねゼロにしてしまいます。そして上もゼロにします。そうするとどうなるかもう一回プレビューしてみましょう。上と左右がなくなって一本線になりましたね。長方形はこんな風に一本線を引くにも使うことができます。ただ今見ていただくと、こちらではページの端から端まで行っているのにそれより表示領域の大きいブラウザですね。それで見るとこんな風に余白が空いてしまいます。これがなんか中途半端でいやだなという時にはこれをやはり選んでいる状態でここの部分ですね。「レスポンシブな幅」となっていますけどこれを「ブラウザ幅に合わせて拡大縮小」これに合わせます。そうするとこの時点では見た目が何も変わらないんですがプレビューするとこのように両脇ですね100% の表示となります。完全にヘッダーとフッター区切るのにブラウザの幅に合わせた一本線を引きたい場合にはこの「ブラウザ幅に合わせて拡大縮小」このチェックを入れてください。ちなみにこの状態で「ブラウザでページをプレビュー」こちらをクリックするとウェブブラウザが起動してこのように実際のブラウザ上で見ることもできます。 ちゃんと 100% になってますね。これで幅を変えてもこのようにブラウザの幅に合わせてこの線の幅も変わっているといった状態になっています。このようにマスターページで何らかの設定を行った際、この後にこちらのプランのページに来るとこんな感じで他のページにも同じ要素が適用されています。マスターページで設定した内容は一度に他のページにも適用されて基本的なデザイン項目として使うことができます。まずは基本的なヘッダーとフッターの幅の決め方と上の端っこ、下の端っこからのパディングの設定ですね。この部分を覚えておいてください。

Muse (2015) 基本講座

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

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

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

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

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