CSS - ズーム：初級者向けガイド

こんにちは、将来のCSS魔法使いたち！今日は、CSSのズームの魔法の世界に飛び込みます。コードを書いたことがないとしても心配しないでください - この旅の親切なガイドとして私はあなたをお連れします。このチュートリアルの終わりまでに、あなたはプロのようにウェブページをズームして回れるようになるでしょう！

CSS - Zoom

CSSズームとは？

まず、CSSズームとは何についているのかを理解しましょう。ウェブページ上のものを大きくしたり小さくしたりできる拡大鏡を持っていると imagine してみてください。これがCSSのズームプロパティがやっていることです！要素を拡大または縮小して、そのサイズと位置を影響させます。

使用可能な値

ズームプロパティで使用できる異なる値を見てみましょう：

値	説明
normal	デフォルト値、ズームは適用されていません
	ズームレベルを百分率として（例：150%）
	ズームレベルを数として（例：1.5）

これらを詳しく見ていきましょう！

適用可能な要素

コードに飛び込む前に、ズームプロパティをどこで使用できるかを知ることは重要です。すべての要素に適用できます。::beforeおよび::afterの擬似要素も含まれます。这意味着、ウェブページ上のほぼすべてにズームをかけることができます！

DOM構文

CSSでズームプロパティを使用するためには、基本的な構文を知る必要があります。以下です：

element {
zoom: value;
}

シンプルですね？では、具体的な例を見てみましょう！

CSSズーム - normal値

'normal'値は、ウェブページに「Hey、自分らしく！」と伝えるようなものです。デフォルト状態でズームは適用されていません。

.my-element {
zoom: normal;
}

この例では、.my-elementは元のサイズで表示されます。これは、私が生徒たちに「初日には自分らしく！」と伝えるのと同じです - 大きく見せる必要も小さく見せる必要もありません！

CSSズーム - 値

さあ、面白いことにします！百分率を使用してズームインまたはズームアウトできます。

.zoom-in {
zoom: 150%;
}

.zoom-out {
zoom: 50%;
}

ここで、.zoom-inは要素を1.5倍に拡大し、.zoom-outは元のサイズの半分に縮小します。私が間違って携帯電話のテキストサイズを200%に設定したときのように、突然すべてが巨大になります！

実際に見てみましょう：

<div class="zoom-in">I'm zoomed in!</div>
<div class="zoom-out">I'm zoomed out!</div>

最初のdivは大きくなり、二番目のdivは小さくなります。試してみて違いを確認してください！

CSSズーム - 数値値

数値を使用してズームをコントロールするのもまた方法の1つです。百分率と似ていますが、%シンボルは不要です。

.big-zoom {
zoom: 2;
}

.small-zoom {
zoom: 0.5;
}

この場合、.big-zoomは要素のサイズを2倍にし、.small-zoomは半分に縮小します。私が眼鏡なしで読もうとするときのように、すべてが2倍にズームが必要になります！

CSSズーム - アニメーション

さあ、大晦日です - ズームにアニメーションを加えましょう！これはとても楽しい部分です。

@keyframes zoomInOut {
0% { zoom: 1; }
50% { zoom: 1.5; }
100% { zoom: 1; }
}

.animated-zoom {
animation: zoomInOut 3s infinite;
}

このアニメーションは、要素を連続的にズームインとズームアウトします。通常サイズから150%にズームし、再び通常サイズに戻る - すべて3秒で、無限に繰り返します。

HTMLでどう使うか：

<div class="animated-zoom">Watch me zoom!</div>

素晴らしいですね？要素が呼吸しているかのようです！

実用的な例

実際の例ですべてをまとめましょう。私たちは、ホバーしたときに画像がズームインするフォトギャラリーを作成していると imagine してみてください：

<div class="gallery">
<img src="cat1.jpg" alt="Cute cat" class="gallery-img">
<img src="cat2.jpg" alt="Another cute cat" class="gallery-img">
<img src="cat3.jpg" alt="Yet another cute cat" class="gallery-img">
</div>

.gallery-img {
width: 200px;
height: 200px;
transition: zoom 0.3s ease;
}

.gallery-img:hover {
zoom: 1.2;
}

この例では、ホバーした画像が元のサイズの120%にスムーズにズームします。猫がこんにちはと言うかのようです！

結論

そして、ここまでがCSSズームの基本です、みんな！ツールキットの中の他のツールと同じように、ズームを賢く使ってください。太多的ズームは、ウェブページが楽屋の鏡のようになります！

これらの例で練習し、異なる値で実験し、すぐにあなたのウェブページにズーム効果を加えることができるようになります。そして、私を超えてCSSスキルで勝つかもしれません！

codingを続け、学び続け、そして、最も重要なのは、それを楽しむことです。次回まで、近所のCSS先生から、お別れです！

Credits: Image by storyset