HTMLで「100」と「100%」の意味とは？
HTMLの属性値でよく見かける「100」と「100%」。どちらも数字なのに、単位があるものとないものがありますよね。一体何が違うのでしょうか？
「100」はピクセル、「100%」は親要素に対する割合
結論から言うと、HTMLにおいて「100」はピクセル数を、「100%」は親要素に対する割合を表します。
- 100: 幅や高さなどを100ピクセルに指定します。
- 100%: 親要素の幅や高さに対して100%の大きさを指定します。
例えば、画像の幅を指定する場合、
<img src="example.jpg" width="100">と記述すると、画像は幅100ピクセルで表示されます。
一方、
<img src="example.jpg" width="100%">と記述すると、画像は親要素の幅いっぱいに表示されます。
親要素は常にページ全体とは限らない
ここで注意すべき点は、「100%」の基準となる親要素は、常にページ全体とは限らないということです。
例えば、以下のようなHTMLの場合、
<div style="width: 200px;">
<img src="example.jpg" width="100%">
</div>画像はdiv要素の幅（200px）を基準に、100%の大きさ、つまり200pxで表示されます。
「100」と「100%」の使い分け
「100」と「100%」、どちらを使うべきかは、状況によって異なります。
| | 固定サイズ | 親要素に合わせて可変 | |------------|----------------------|------------------------| | 100 | ○ | × | | 100% | × | ○ |
例えば、常に一定の大きさで表示したいヘッダー画像は「100」、ウィンドウサイズに合わせて表示を調整したいコンテンツ画像は「100%」と使い分けるのが一般的です。
よくある質問
Q1: 「100%」で指定した要素が親要素からはみ出してしまう場合は？
A1: 親要素にoverflow: hidden;を指定することで、はみ出した部分を非表示にできます。
Q2: 「100」と「100%」以外に、単位はあるの？
A2: はい、emやrem、vw、vhなど、様々な単位があります。それぞれの単位について詳しく学び、適切なものを使い分けましょう。
Q3: レスポンシブデザインで「100%」は有効？
A3: はい、レスポンシブデザインにおいて「100%」は非常に有効です。ウィンドウサイズに合わせて要素の大きさを柔軟に変更できるため、様々なデバイスに対応したウェブサイト制作に役立ちます。