column

ITコラム

colmun_main4837

プログラミングノウハウ

2017.04.28

CSS【 幅と高さ 】1~widthプロパティ、heightプロパティ

widthプロパティとheightプロパティは、領域の幅と高さを指定するプロパティです。
どちらも、数値で指定したり、割合で指定したり、自動調整を指定したりします。
今回は、widthプロパティとheightプロパティの概要についてまとめたいと思います。

widthプロパティとheightプロパティについては、以下のページもご参照下さい。
CSS【 幅と高さ 】1~widthプロパティ、heightプロパティ(本ページ)
CSS【 幅と高さ 】2~min-width、min-height、max-width、max-height

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. widthプロパティとheightプロパティ

widthプロパティとheightプロパティの値は、どちらも次の通りです。

auto デフォルト値
親要素や自分自身のコンテンツ等によって自動計算
数値 pxやemなどの単位を付けて指定
% 親要素の幅や高さに対するパーセントで指定

 
widthプロパティとheightプロパティの値は、継承されません。
また、両プロパティは、全ての要素で使用できます。

widthプロパティとheightプロパティで指定した内容は、インラインの要素には効きません。
但し、デフォルト値がインラインの要素でも、displayプロパティでブロックインラインブロック等の指定をすると、widthプロパティやheightプロパティで指定した内容が有効になります。
また、インラインの要素でも、置換要素であれば、widthプロパティやheightプロパティで指定した内容が有効になります。
置換要素とは、中身が他のものに置き換えられる要素で、テキストではなく画像など他のファイルが入るため、幅や高さが生じる要素のことです。img要素などは置換要素です。

▲目次へ戻る

2. widthプロパティのauto指定

値を自動計算するautoは、widthプロパティとheightプロパティのデフォルト値ですが、widthプロパティの値がautoになる場合は、次のようなルールがあります。

• width:autoの場合は、パディングとボーダも含まれる

• width:autoの場合は、置換要素は原寸となる

実際の表示と意図したものとにずれが生じる原因となるため、このルールは覚えておいた方が良いです。
 

width:autoの場合は、パディングとボーダも含まれる

widthプロパティとheightプロパティに関して、そのデフォルトの範囲はコンテンツの領域ですが、ブロックレベルの要素に対してwidth:autoの指定の場合は、パディング領域とボーダ領域も含めて、親要素に対してちょうど収まるように幅が調整されます。

CSS 幅と高さ widthプロパティ heightプロパティ プログラマカレッジ
 

width:autoの場合は、置換要素は原寸となる

img要素など、要素に独自のサイズがある置換要素に関して、width:autoの指定の場合は、そのサイズの原寸になります。
同じwidth:autoの指定でも、置換要素は原寸表示ですので、注意が必要です。

CSS 幅と高さ widthプロパティ heightプロパティ プログラマカレッジ

置換要素を、親要素にちょうど合うように表示したい場合は、width:autoではなくwidth:100%を指定します。
この場合に、height:autoと指定すると、widthプロパティの値に合わせてアスペクト比を維持した高さとなります。

画像が親要素より小さいサイズの場合は、width:100%を指定すると拡大表示されるため、解像度が低くなることに注意が必要です。

▲目次へ戻る

3. img要素の幅や高さを揃える

サイズやアスペクト比が違う次の3つの画像の幅や高さを揃えます。

img1.jpg
(幅500px、高さ333px)
img2.jpg
(幅350px、高さ350px)
img3.jpg
(幅400px、高さ515px)

各img要素を、幅50%で指定します。親要素の幅に対して50%の幅となります。
高さは、height:autoと指定して、画像のアスペクト比を維持します。

 
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {margin:0; padding:0;}
div#sample img {
    display:block;
    margin:0.5em 0;
    width:50%;
    height:auto;}

<!-- HTMLファイル -->
<div id="sample">
    <img src="img/img1.jpg" />
    <img src="img/img2.jpg" />
    <img src="img/img3.jpg" />
</div>

今度は、img要素の高さを100pxで統一します。幅はwidth:autoと指定します。

 
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {margin:0; padding:0;}
div#sample img {
    margin:0 0.5em;
    height:100px;
    width:auto}

<!-- HTMLファイル -->
<div id="sample">
    <img src="img/img1.jpg" />
    <img src="img/img2.jpg" />
    <img src="img/img3.jpg" />
</div>

テーブルのセルの中に、width:100%指定のimg要素を入れると、img要素を同じ幅で横並びに表示できます。
この場合、テーブルセルはtable-layout: fixedで均等幅にします。

 
ソースは次の通りです。

<!-- CSSファイル -->
table#sample {
    margin:0; padding:0;
    display:table;
    table-layout:fixed;
    width:100%}
table#sample td {
    display:table-cell;
    vertical-align:top;
    padding:0 5px}
table#sample td img {
    width:100%;
    height:auto}

<!-- HTMLファイル -->
<table id="sample">
    <tr>
        <td><img src="img/img1.jpg" /></td>
        <td><img src="img/img2.jpg" /></td>
        <td><img src="img/img3.jpg" /></td>
    </tr>
</table>

▲目次へ戻る

4. width属性height属性とCSS

img要素にwidth属性、height属性でサイズ指定をしても、CSSの指定の方がHTMLの属性値より優先度が高いので、width属性、height属性の値は無効となります。

<img src="01.jpg" width="300" height="300">
 
<style scoped>
img {
    width:100%;
    height:auto}
</style>

上記の場合は、幅300pxの指定は無効となり、親要素に合わせた幅のサイズとなります。
高さも、300pxの指定は無効となり、幅に合わせてアスペクト比を維持した高さとなります。

width属性height属性も、CSSも指定しない場合でも、CSSのデフォルト値であるwidth:auto、height:autoが適用されるため、img要素は原寸表示となります。

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ