今すぐ登録して、24,700件以上登録されている、業界エキスパート指導のコースを受講しましょう。
最小レイアウトの作成
このレッスンでは ページ幅が更に狭くなった時の レイアウト変更について解説します。 それでは、このレッスンの サンプルプロジェクトですが この様にフルサイズの時だと ここが３列表示。 そして、縮まっていくと 700 ピクセル以下になると ２列表示へと変化します。 では、さらに狭くなった時 キリがないので、どこかの時点で レイアウトを更に変えておこうと思います。 では、ページ幅を 今回は 600 ピクセルの所に ブレイクポイントを作りましょう。 では、ここにブレイクポイントを作ります。 では、ここまで来たら いつまでもこの体制を なかなか維持するのは大変なので 画像を割り切って、諦めて、 このブロックと文字だけの 表示にしようと思います。 ではまず、これらの画像を 600 ピクセル以下の時は 表示しないように変更します。 では、画像を１個、まずクリックして 次に Shift キーを押しながら クリックすると 複数選択できます。 効率よく作業するために ４つの画像を全部選びます。 そしたら右クリックして 「ブレークポイントで隠す」とすると こちらの時には表示されていて ここを過ぎると出なくなるんですね。 この様な設定を作ることができました。 それでは、このブロックのサイズを 直していきましょう。 まずは、このカラーの所をクリックして 選んだ状態でドラッグしていくと 丁度、この斜線の引いてある この模様の所に合わせると 丁度、良いサイズになります。 では、同じ様に こちらもサイズを合わせた上で そしたら、このブロックを丸々 この様に垂直に並べてしまいましょう。 そうすれば、かなり狭くなっても 対応することができます。 では、こっちのブロックも 同じように縮めて ここも並べます。 こちらも同様にサイズを小さくして 丁度、良いところに並べます。 こうすると、フルサイズの大きな表示から 更にレスポンシブで縮まってきて ２列のコンパクト表示になる。 そして、更に一番小さな こういった表示になる。 この３段階で切り替える様になりました。 特に一番狭い スマホ向けの表示にした時には あまり表示に欲張ってしまうと 余計に要素が多くなりすぎて スクロールが長くなって 見られなくなってしまいます。 折角であれば これぐらいまで割り切って スマホの中で効率よくユーザーが…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。