Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームHTMLリファレンス(アルファベット検索)>zoomプロパティ

CSSプロパティ辞典
タグ一覧(ABC順) 目的別タグ一覧 スタイルシート一覧(ABC順) 目的別スタイルシート一覧

zoom プロパティ …拡大・縮小表示する

使用プロパティ

CSSプロパティ

zoom: 値;

対象となる
要素

すべて

継承

しない

数値(単位なし・1.0が標準サイズ)、% (パーセンテージ)、normal(標準サイズ)

対応ブラウザ IE6 Win

解説

zoom プロパティを使えば、要素を拡大・縮小表示する。

zoom プロパティは Internet Explorer 独自のプロパティで、対応していないブラウザで表示すると表示が崩れる場合がありますので注意が必要です。

使用例

記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>

<!--スタイルシート-->
<style type="text/css">

.sample1 {
zoom: normal;
}

.sample2 {
zoom: 2;
}

.sample3 {
zoom: 50%;
}

</style>
</head>

<!--ページの本文-->
<body>

<p class="sample1">標準サイズ</p>
<p class="sample2">2倍に拡大</p>
<p class="sample3" style="padding-bottom: 20px;" >80%のサイズに縮小</p>

<div>標準サイズ<br>
<img src="logo.gif" width="172" height="60" alt="サンプル" class="sample1">
</div>

<div>2倍に拡大<br>
<img src="logo.gif" width="172" height="60" alt="サンプル" class="sample2">
</div>

<div>80%に縮小<br>
<img src="logo.gif" width="172" height="60" alt="サンプル" class="sample3">
</div>

</body>
</html>
↓
[ブラウザでの表示例]
HOME PAGE ZERO ガイド

標準サイズ

2倍に拡大

80%に縮小

標準サイズ
サンプル
2倍に拡大
サンプル
80%に縮小
サンプル

関連情報ページ

ページトップへ

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

<TOP>

logo
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system