今回のポイント
CSSでは、画像や文字などの大きさを指定する場面が多くあります。
そこで今回はこの大きさの指定について、解説していきたいと思います。
今回は画像とHTMLファイルを準備して、それらを使って画像の大きさを調節しながら確認していきましょう。
画像の準備
前もって画像の準備をしておきしょう。
今回はこの画像を準備しました。
【画像の情報】
種 類：PNGイメージ
大きさ：1656 × 630
名 前：pakupaku.png
この画像は、HTMLと同じフォルダに保存しておきます。
HTMLファイルの準備
そして今度は先程準備した画像をブラウザに出力するために、HTMLファイルを準備してソースを記述しておきます。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<img src=”pakupaku.png” alt=”ぱくぱくブログ画像１”>
</body>
</html>
『HTMLファイルの作り方』は、以下の記事を参考にしてみて下さい。
『HTMLでの画像の表示方法』については、以下の記事を参考にしてみて下さい。
CSSファイルの準備
今回は外部にCSSファイルを作成して指定する方法を使います。
分からない方は以下の過去の記事を参考にしてみて下さいね。
デフォルト状態の事前確認
それではここまで出来たら、今の画像の状態をブラウザで確認しておきましょう。
ブラウザに対して、大きすぎるくらいに表示されていますね（汗）。
それでは今回の本題である『絶対単位』と『相対単位』を使ってこの画像を調整して違いを見ていきましょう。
絶対単位と相対単位とは
CSSにおいて、単位は大きく分けると『絶対単位』と『相対単位』に分けることができます。
それぞれを簡単に解説すると以下の通りです。
- 絶対単位・・・ブラウザの設定や環境に依存せず、サイズを指定する単位
- 相対単位・・・ブラウザの設定や環境に依存して可変的にサイズを指定する単位
絶対単位
ブラウザの設定や環境に依存せず、サイズを指定する単位である絶対単位。
それでは絶対単位には、どのようなものがあるか見ていきましょう。
| 単位 | 呼称 | 解説 |
| in | インチ | 1(in)=2.54(cm) |
| cm | センチ・メートル | 1(cm)=10(mm) |
| mm | ミリ・メートル | 10(mm)=1(cm) |
| pt | ポイント | 1(pt)=1/72(in) |
| pc | パイカ | 1(pc)=12(pt) |
CSSを使って『絶対単位』で指定してみる
準備しておいたCSSファイルに、以下の内容を記述してみましょう。
今回のポイントは今の画像を小さくすることです。
img {
width: 5.2in;
height: 2in;
}
これは絶対単位である『in（インチ）』を使って指定した例です。
width: 5.2in; → 横幅を5.2インチで指定
height: 2in; → 高さを2インチで指定
それではブラウザで確認してみましょう。
画像を小さくすることに成功しました。
しかし、これは絶対単位で指定された大きさ指定です。
ブラウザを小さくしても絶対単位で指定した画像は、大きさが変わることはありません。
PCとスマートフォンのブラウザでは、画面の大きさが変化します。
このような場合、画像の大きさが環境に合わせて変化しません。
相対単位
ブラウザの設定や環境に依存して可変的にサイズを指定する単位である相対単位。
それでは相対単位には、どのようなものがあるか見ていきましょう。
| 単位 | 呼称 | 解説 |
| px | ピクセル | 画面解像度に対して相対 |
| em | ems | デフォルトサイズの文字の高さに対して相対 |
| ex | x-height | デフォルトサイズの文字”x”の高さに対して相対 |
| % | パーセント | 各親要素のサイズ対して相対 |
CSSを使って『相対単位』で指定してみる
先程絶対単位を書き込んだCSSを、以下の記述内容に修正してみましょう。
img {
width: 80%; height: 80%;
}
これは相対単位である『％（パーセント）』を使って指定した例です。
width: 80%; → 横幅を親要素のデフォルト値の80%で指定
height: 80%; → 高さを親要素のデフォルト値の80%で指定
それではブラウザで確認してみましょう。
元の画像の大きさと変化が内容に見えますね。
しかしブラウザを以下のように小さくしてみて下さい。
ブラウザに合わせて画像が小さくなっていることが分かります。
これこそ環境に合わせて画像の大きさが相対的に変化している証拠です。
いかがだったでしょうか。
絶対単位と相対単位理解いただけたでしょうか。
サイトの構造を考える時に、絶対単位と相対単位を使い分ける場面は多々あります。
今回の指定方法をマスターして、使いこなしていきましょう。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
