Museを使ったレスポンシブWebサイト制作

ホームのヘッダを修正

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ホーム画面のヘッダ部分に表示されているテキストなどの項目を、ページ幅に応じて調整する手順を解説します。
講師:
04:03

字幕

このレッスンではフォームのヘッダーのカスタマイズを行います。それでは今この状態ですけどホームページを開きます。このレッスンのサンプルファイルのホームはこんな状態ですね。既に全部パソコンの表示向けにレイアウトができていてそして幅を変えると メニューの部分がレスポンシブにこの様に変化するようになっています。メニューは変化するんですがその他の項目がまだ全然設定されてないので他の項目を設定していこうと思います。では手始めに、このヘッダーの部分これのこのテキストの部分これの対策を行おうと思います。今この部分、見てていただくとまずページ幅を変えると早速ちょっとはみ出してしまってますね。どんどん行くと最終的に見えなくなってしまう。これはまずいので、まずちゃんとページ幅が変わっていってもこのテキストは見ていてるといった状態にしようと思います。それではまず選択ツールを選んでる状態でこのテキストの塊を選択します。そしたらここの「変形」の部分これをクリックします。そして今「ページの固定」の部分が左側になってるんですけどなので左に行くほどずれていってしまうのでこれを、この右側の方に固定します。この状態でまたページの幅変えてみると今度はちゃんと右側の端っこにくっついてきてくれて望み通りの結果となっています。 それぞれのオブジェクト、どこに固定するか左右どちらかか真ん中かですね。このメニューは真ん中に固定してありますけどこのテキストの場合には右側をキープしたほうが良いということですね。これを、この項目ごとに選んでいきます。そして更にこれ狭くなっていくとこの辺はずっといいんですけどこの後メニューの表示がパッと変わります。このモバイル用のメニューになるとメニューとテキストが重なってしまいます。なのでこれちょっとまずいので重なった段階で変えなきゃならないですね。そしたら、ここの三角をクリックして、このメニューの方で表示が変わる部分まで飛びます。そしたら、このページにはブレークポイントが設定されてないんです。この三角はあくまで、これはマスターの方のブレークポイントを表してるにすぎないのでこの幅になった所でこの+のボタンをクリックすると新たにブレークポイントができます。そうすると、このページの中のパーツが選べるようになるので選んだ上で 右クリックして「ブレークポイントで隠す」これ実行します。そうすると、出なくなりました。これで、この広い表示の時にはテキストがでてきてそして縮めていって最終的なモバイルのメニューになるとテキストはなくなると、この様な状態となりました。 こうして、既存のパーツも元々固定したレイアウトだったので意識してなかった、この幅が変わった場合の挙動これをここにセッティングしていきます。まずはこのヘッダーの部分処理を実際に行ってみて下さい。

Museを使ったレスポンシブWebサイト制作

Museを使うと、パソコンだけでなくスマートフォンやタブレットなどのモバイルデバイスで快適に閲覧できるレスポンシブWebサイトを簡単に作成することができます。このコースではレスポンシブWebデザインの基礎知識やMuseを使ったメニューのカスタマイズ、オブジェクトのスケーリングや画面の幅に応じた再配置、デザインの調整に付随する問題の解決方法などを学びます。

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

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

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

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