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

最小レイアウトの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スマホなどページの幅がせまい時に、写真などの要素を割愛してデザインを最適化する例を解説します。
講師:
03:44

字幕

このレッスンではページ幅が更に狭くなった時のレイアウト変更について解説します。それでは、このレッスンのサンプルプロジェクトですがこの様にフルサイズの時だとここが3列表示。そして、縮まっていくと700 ピクセル以下になると2列表示へと変化します。では、さらに狭くなった時キリがないので、どこかの時点でレイアウトを更に変えておこうと思います。では、ページ幅を今回は 600 ピクセルの所にブレイクポイントを作りましょう。では、ここにブレイクポイントを作ります。では、ここまで来たらいつまでもこの体制をなかなか維持するのは大変なので画像を割り切って、諦めて、このブロックと文字だけの表示にしようと思います。ではまず、これらの画像を600 ピクセル以下の時は表示しないように変更します。では、画像を1個、まずクリックして次に Shift キーを押しながらクリックすると複数選択できます。効率よく作業するために4つの画像を全部選びます。そしたら右クリックして「ブレークポイントで隠す」とするとこちらの時には表示されていてここを過ぎると出なくなるんですね。この様な設定を作ることができました。それでは、このブロックのサイズを直していきましょう。 まずは、このカラーの所をクリックして選んだ状態でドラッグしていくと丁度、この斜線の引いてあるこの模様の所に合わせると丁度、良いサイズになります。では、同じ様にこちらもサイズを合わせた上でそしたら、このブロックを丸々この様に垂直に並べてしまいましょう。そうすれば、かなり狭くなっても対応することができます。では、こっちのブロックも同じように縮めてここも並べます。こちらも同様にサイズを小さくして丁度、良いところに並べます。こうすると、フルサイズの大きな表示から更にレスポンシブで縮まってきて2列のコンパクト表示になる。そして、更に一番小さなこういった表示になる。この3段階で切り替える様になりました。特に一番狭いスマホ向けの表示にした時にはあまり表示に欲張ってしまうと余計に要素が多くなりすぎてスクロールが長くなって見られなくなってしまいます。折角であればこれぐらいまで割り切ってスマホの中で効率よくユーザーが情報にアクセスできるように直してやるのもかなりフレンドリーな設計といえます。こうした段階を追ったレイアウトの変化を是非とも試してみて下さい。

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

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

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

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

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

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