このウェブページの内容
このウェブページでは、「薄いピンクの丸が大きくなって、最後に『なかのさかうえこう』という文字が1文字ずつ表示される」というアニメーションがあります。
HTMLの説明
-
<div class="circle"></div>: これは薄いピンクの丸を作る部分です。 -
<div class="text-container">...</div>: ここに「なかのさかうえこう」という文字が入ります。<span>はそれぞれの文字を個別に扱うために使います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Animated Text</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="circle"></div>
<div class="text-container">
<span>な</span><span>か</span><span>の</span><span>さ</span><span>か</span
><span>う</span><span>え</span><span>こ</span><span>う</span>
</div>
<script src="script.js"></script>
</body>
</html>
アニメーションの説明
- 最初に、薄いピンクの丸が中心から大きくなります。
- 丸が画面いっぱいに広がったら、次は「なかのさかうえこう」という文字が1文字ずつ順番に表示されます。
このCSSのコードは、ウェブページの基本的なレイアウトとスタイルを設定しています。それぞれの部分が何をしているか、一つずつ説明します
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
overflow: hidden;
}
-
body, html { ... }: このコードは、ウェブページの全体的な部分、つまり「body」と「html」タグにスタイルを適用しています。 -
height: 100%;: これはウェブページの高さをブラウザのウィンドウの高さいっぱいにするためのものです。これにより、ページが縦に長い場合でも、デザインが全画面に広がります。 -
margin: 0;: 「margin」とは、要素の外側の余白のことです。ここでは余白をゼロに設定しているので、ページの端と要素の間に隙間がなくなります。 -
display: flex;: これはフレキシブルボックス（Flexbox）というレイアウトの方式を使うという意味です。これにより、ページ内の要素（ここでは中央の円と文字）を簡単に中央に配置できます。 -
justify-content: center;とalign-items: center;: これらはFlexboxのプロパティで、ページ内の要素を水平方向（左右）と垂直方向（上下）の中央に配置するためのものです。 -
background-color: #f0f0f0;: これはページの背景色を設定しています。#f0f0f0は薄い灰色です。 -
overflow: hidden;: これはページの内容が指定した領域を超えた場合に、はみ出した部分を表示しないようにするためのものです。この場合、画面外に出た円や文字が見えなくなります。
これらの設定により、ウェブページはきれいで見やすく、中央に要素が配置されたデザインになります。
もちろん、このCSSコードの各部分を分かりやすく説明しますね。
.circleのスタイル
.circle {
width: 0;
height: 0;
background-color: pink;
border-radius: 50%;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
animation: grow 5s forwards;
}
-
width: 0;とheight: 0;: これは丸（円）の初期サイズを設定しています。最初はサイズが0、つまり見えない状態です。 -
background-color: pink;: 丸の色をピンクに設定しています。 -
border-radius: 50%;: この設定で丸の形を作ります。角を完全に丸くして、円にします。 -
position: absolute;: この丸をページの特定の位置に配置するために使います。この場合はページの中央に配置します。 -
transform: translate(-50%, -50%);: 丸を正確にページの中央に持ってくるための設定です。 -
top: 50%;とleft: 50%;: ページの真ん中に丸を置くための設定です。 -
animation: grow 5s forwards;: 5秒かけて丸を大きくするアニメーションを設定しています。このアニメーションは下で定義されています。
@keyframes grow
@keyframes grow {
to {
width: 200%;
height: 200%;
background-color: lightpink;
}
}
- これは
growという名前のアニメーションを定義しています。 -
to { ... }: これはアニメーションの最終状態を表しています。ここでは、丸が最初の大きさ（0%）から最終的に200%の大きさになり、色が薄いピンクに変わります。
.text-container spanのスタイル
.text-container span {
opacity: 0;
font-size: 3em; /* 文字サイズを大きく */
color: white;
margin: 0 5px;
animation: fadeIn 1s ease forwards;
}
-
opacity: 0;: 文字は最初透明（見えない状態）です。 -
font-size: 3em;: 文字のサイズを大きくしています。 -
color: white;: 文字の色は白です。 -
margin: 0 5px;: 文字の周りに少しスペース（余白）を設けています。 -
animation: fadeIn 1s ease forwards;: 1秒かけて文字がゆっくりと表示されるアニメーションを設定しています。このアニメーションは下で定義されています。
@keyframes fadeIn
@keyframes fadeIn {
to {
opacity: 1;
}
}
- これは
fadeInという名前のアニメーションを定義しています。 -
to { ... }: アニメーションの最終状態では、文字が完全に不透明（しっかりと見える状態）になります。
各span要素のアニメーション遅延
.text-container span:nth-child(1) {
animation-delay: 5.5s;
}
/* ... 他のspan要素も同様に異なる遅延を設定 ... */
.text-container span:nth-child(9) {
animation-delay: 9.5s;
}
-
.text-container span:nth-child(n) { ... }: これは、text-containerクラス内の各span要
素（それぞれの文字）に個別のアニメーション開始タイミングを設定しています。
-
animation-delay: Xs;: これにより、各文字が異なる時間に表示されます（例えば、最初の文字は5.5秒後、次の文字は6秒後に表示されます）。
これらの設定により、ウェブページに動きのある面白いアニメーションが作成されます。