スタート!CSS入門

幅と高さ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボックスの幅、高さを指定するには、width、heightプロパティを使います。ここでは、これらのプロパティの使い方について紹介します。
講師:
07:02

字幕

ボックスの幅、高さを指定するには width プロパティ height プロパティを使います。このレッスンではこれらのプロパティの使い方について紹介します。まずボックスの幅を指定する width プロパティについて紹介します。width プロパティに使える値は「長さ」「パーセント値」「 auto 」キーワードです。「長さ」は数値とその単位で、「パーセント値」は数値とパーセントで指定します。マイナスの値は使えません。「 auto 」は他のプロパティによって算出されます。適用対象には比置換インライン要素などを除くと書かれていますがこの点については後ほど説明します。その他の仕様はご覧の表の通りです。続いてボックスの高さを指定する heightプロパティについて紹介します。height プロパティに使える値は widthプロパティと同じです。なお「パーセント値」を指定したとき包含ブロックの高さが明示されておらずこの要素が絶対配置でない場合は値が「 auto 」として計算されます。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見るとページ上部に深緑の背景色を適用した領域があります。 HTML を見るとこの領域は header 要素として定義されています。ここでは header 要素に対して幅と高さを指定してみましょう。header 要素に対して width プロパティで幅を300px に設定します。同様に height プロパティで高さも同じく300px に設定します。ウェブブラウザを見ると header 要素に幅と高さが両方とも同じく300px に変更されたことが確認できます。このとき設定された幅と高さはボックスモデルでいうところのコンテンツ領域のサイズになります。ボックスモデルの概念図で言うと、一番濃いグレーの領域です。そのため margin や padding border を設定するとwidth や height の値とは区別されて扱われます。先ほどの CSS に margin と padding を追加してみましょう。もう一度編集画面とウェブブラウザを開きます。header 要素に対して margin プロパティでmargin を 50px に設定します。するとボックスのコンテンツ領域、つまり背景色が適用されている部分のサイズはそのままに header 要素の回りにmargin が 50px に設定されています。 続いて padding も設定してみましょう。header 要素に対して padding プロパティで今度は値を 100px に設定します。ウェブブラウザを見ると今度は背景色が適用されている領域のサイズが大きくなりました。ただし width プロパティや height プロパティでサイズを指定したときと違ってコンテンツつまりボックスの内容であるテキストの回りにpadding 余白が追加されています。このように width プロパティとheight プロパティで設定できるのはボックス全体ではなく内容を表示するコンテンツ領域の幅と高さであるということを覚えておきましょう。続いて置換要素に対して width プロパティやheight プロパティを指定したときの挙動について紹介します。サンプルファイルの「 replaced.html 」を開きます。ウェブブラウザもそちらのタブのプレビューに切り換えます。置換要素とは HTML のインライン要素の分類の内の1つです。img 要素 object 要素 canvas 要素など要素の内容が要素特有のコンテンツに置き換えて表示されるインライン要素のことを指します。 ここでは photo クラスが設定されたp 要素の中に置換要素である img 要素があります。img 要素では通常 HTML 側で width 属性やheight 属性を使って幅や高さを指定します。この要素に対して CSS で幅を上書きすることができます。書いてみましょう。photo クラスの子孫にある img 要素に対してwidth プロパティで幅を300px に設定します。するとウェブブラウザを確認すると画像の幅が300px に縮まっています。なお置換要素とは別に非置換インライン要素いうものもあります。非置換インライン要素とはa 要素 em 要素などのように開始タグと終了タグで囲まれた内容がそのまま表示されるインライン要素のことです。この非置換インライン要素には width プロパティや height プロパティで幅や高さを規定することができません。このレッスンではボックスの幅、高さを指定するwidth プロパティ height プロパティの使い方について学びました。

スタート!CSS入門

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

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

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

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

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