CSSによるレイアウト

最低幅と最大幅の設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
min_widthとmax_widthプロパティを使って最低幅と最大幅を設定する方法について学びます。
講師:
09:00

字幕

このレッスンではミニマムwidthと マックスwidthプロパティを使って 最低幅と最大幅を設定する方法について 学びます 可変レイアウトではウィンドウサイズが 極端に小さくなるとカラムはコンテンツを 保持できないほど小さくなり それらが互いに衝突して重なり始め 要素間の関係が失われてしまいます 逆にウィンドウサイズが極端に大きくなったとしても カラムの幅が広がりすぎて 可読性を損ない 画像などのリソースが それらと関連する要素から 離れてしまいます これに対処する方法は minimum width 及びmax widthプロパティです これらのプロパティを使うことで 決められたサイズの中にレイアウトが 収まるようにしつつ 可変の状態を保つことができます 現在ブラウザではサンプルファイルの fluid.htmを開いているところです 可変レイアウトで実装されたウェブページが 表示されています ページの下のほうには 2つの背景色がついた要素があり その片方には画像が表示されています 現在は特に問題がないように見えます 今使っているのは幅が 1,280pxのモニターです もしウィンドウサイズも極端に小さくした場合 可変レイアウトにより全体が縮まり カラム内の文章は読みづらくなるでしょう 実際にやってみましょう こんな感じです このサイズではとても快適に読める状態ではありません これ以上小さくできないところまで 小さくしてみましょう かなり読みづらくなりました 一番下までスクロールすると 画像がレイアウトを無視して表示されています この画像だけは固定レイアウトに なっているからです この状態では可変レイアウトの目的を 達成することができません ここでいったい誰が こんなウィンドウサイズ見るのという 疑問が生まれるかもしれません しかしモバイルデバイスでは このような解像度でウェブサイトを 閲覧することになります それではミニマムwidthとマックスwidthプロパティーを使って このレイアウトを改善してみます このhtmlをエディタで開き ボディセレクタまでスクロールします 現在幅は80パーセントに指定されています これに対してマックスwidthプロパティーを使って 最大時の幅を設定することができます マックスwidthプロパティーはmax-widthと記述します 値は1,200pxに設定してみましょう 同じように 最小時の幅ミニマムwidthプロパティーを こちらでは480px設定します これらのプロパティを使うことで 幅に対して範囲を設定できます つまり通常時は80パーセントで表示されるものの 1,200pxより大きくなったり 480pxよりも小さくなったりすることはない という状態にできるのです それではこの範囲は具体的に どのように決定するのは良いのでしょうか 一旦ファイルを保存して ブラウザに切り替え リロードをしてみましょう ウィンドウサイズが大きい時は 先ほどと変わらず表示の問題はありません 縮小していくと 幅が480pxになったところで 縮小が止まりました これで問題ないでしょうか それとも大きすぎるでしょうか 一番下を確認するとやはり まだレイアウトが崩れています このような時に必要なのはレイアウトを 崩している原因を見つけ そこを可変レイアウトに最適化することです エディタに戻りましょう 今度はマックスwidthプロパティを1,024 ミニマムプロパティ640に設定してみます 保存して再度ブラウザに切り替え リロードボタンをクリックします 最大時は1,024pxで固定され 最小時は640pxでレイアウトの変化が 停止します この時左右のカラムにある文書は どちらも家族性が確保されています 下にスクロールするとやはり例の画像によって レイアウトは崩れていますので 対処する必要がありそうです しかしこれは最大幅や最小幅というよりも 画像自体のレイアウトを 固定から可変に変更したほうがよさそうです ここまでの作業でテキストの読みやすについては 向上することができました 全体の最小幅を640pxにすることで 最低限必要なカラムの幅を確保できています 一方最大幅を設定するマックスwidthプロパティでは このようにページの幅だけではなく 画像にも有効に使うことができます 先ほどこの画像が原因で レイアウトが崩れていることを指摘しました この画像を親要素にあわせて スケールするようにしてみましょう エディターに戻ります 下にスクロールして画像を見つけます ニュースクラスが適用されたsection要素 この中にイメージタグがあります これが該当の画像です ここで画像に対して幅を100%に 設定することもできますが ウィンドウサイズによっては 本来の画像の幅と高さで表示できる可能性があります そのような時はスケーリングする必要はありません そのためまずここでは幅と高さの指定を削除します そしてこのまま何も設定しません 固定値もパーセンテージも設定しません ただ削除するだけです デフォルトでは幅と高さを指定しない場合は ブラウザでは画像の元のサイズで表示されます この特性を利用してこの画像にクラスを 適用することで 少しスタイルを追加します 新しいクラスはフレックスとつけます CSSまでスクロールし バナークラスの下に フレックスのクラスセレクタを追加します ここでは非常にシンプルなスタイルを使います マックスwidthプロパティを使って 値に100パーセントを設定します これは何を意味するでしょうか まずフレックスクラスが与えられた画像は その本来の幅と高さで表示されます しかし最大の幅は100%という指定をしました これによりブラウザが画像を 表示するために必要な領域の幅と高さを計算する時 その値は要素の中に収まるようになっています これを保存しブラウザに切り替え リロードしてみましょう 画像の部分に注目してください 画像に可変レイアウトが適用されました 画像の実寸がこれより大きかった場合でも その最大時の幅は画像が置かれている要素よりも 大きくなりません つまり要素の幅100%に設定されていることが わかります これでミニマムwidthプロパティや マックスwidthプロパティを使って 可変レイアウトの調整ができました 可変レイアウトを実装するには固定レイアウトよりも はるかに多くの労力を必要とします これはどうしても避けられないことはありますが また一方で特定の解像度に制約されないレイアウトを 実現し より多様なウェブページを 作ることができます このレッスンではミニマムwidthと マックスwidthプロパティを使って 最低幅と最大幅を設定する方法について学びました

CSSによるレイアウト

このコースでは、大きく3種類に分かれたCSSによるレイアウトについて解説します。ピクセルパーフェクトなデザインを実現しやすい固定レイアウト、スクリーンやウィンドウのサイズ変更に対して変化する可変レイアウト、ユーザーの環境に応じて最適なレイアウトを提供できるレスポンシブレイアウトなどについて丁寧に説明します。

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

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

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

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