スタート!CSS入門

幅と高さの最小値および最大値

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボックスの幅、高さには、最小値と最大値を指定することができます。ここでは、これらを指定するためのプロパティの使い方について紹介します。
講師:
04:17

字幕

このレッスンではボックスの幅と高さの最小値、最大値を指定するプロパティの使い方について紹介します。まずボックスの幅と高さの最小値を指定するmin-width min-height プロパティを紹介します。min-width min-height プロパティに使える値は「長さ」「パーセント値」です。「長さ」は数値とその単位で、「パーセント値」は数値とパーセントで指定します。マイナスの値は使えません。その他の仕様はご覧の表の通りです。続いてボックスの幅と高さの最大値を指定するmax-width max-height プロパティについて紹介します。max-width max-height プロパティに使える値は「長さ」「パーセント値」「 none 」キーワードです。「長さ」と「パーセント値」は min-widthmin-height プロパティと同様の扱いです。「 none 」キーワードでは幅や高さの最大値に制限をしないという指定になります。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見るとページ上部に深緑の背景色を指定した領域があります。 HTML を見るとこの領域は header 要素として定義されています。ここでは header 要素に対して特に幅が設定されていないためウェブブラウザの幅を変えるとその幅に追従してheader 要素の幅も変わります。幅が変わっていますね。それでは幅の最小値を設定してみましょう。header 要素に対して min-width プロパティで最小の幅を 400px に設定してみましょう。ウェブブラウザを見ると変化がないように見えます。しかし先ほどと同じようにウェブブラウザの幅を変えてみると幅が 400px より小さくなったときに横スクロールバーが出ていることが分かります。これは header 要素の最小の幅に 400px が確保されているためそれよりも小さくはならなくなったということです。これらのプロパティはリキッドレイアウトと呼ばれるサイズを固定せずフレキシブルなレイアウトを実装する際によく使われます。なおこれらのプロパティは widthプロパティ height プロパティと競合することがあるためその挙動を規定する詳しいルールがあります。これらのルールは非常に細かいためCSS 2.1 の仕様でルールが定義されている箇所のURL を紹介しておきます。 この URL では原文のため英語ですがウェブ上には有志によって日本語に翻訳されている文章もありますのでそちらも参考にしてください。このレッスンではボックスの幅と高さの最小値、最大値を指定するプロパティの使い方について学びました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

5時間21分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年11月25日

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

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

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