Life is Tech! Lesson
オリジナル制作サンプル集
できあがりイメージ
つくりかた
HTML
<header>
<h1>Mom’s Bakery</h1>
</header>
このHTMLのh1タグで囲まれているところに対し、CSSを反映させていきます。
CSSのファイルに@keyframes を追加します。場所はどこでも大丈夫です。
CSS
@keyframes zoom_in {
100% {
transform: scale(1);
}
}
zoom_in は@keyframesの個別の名前で、自由につけることができます。今回は分かりやすくzoom_in (ズームイン)としました。
transformではどのくらい大きくさせるかを指定することができます。
scale(1)は、小さい状態から CSS で元々設定していたサイズまで大きくさせる設定です。
コピーしたコードをペースト（貼り付け）するか、直接書いてみましょう。
CSSのセレクタで h1 を探しましょう。
CSS
h1 {
color: #ffffee;/* フォントの色 */
font-size: 90px;/* フォントの大きさ */
font-family: lobster;/* フォントの種類 */
text-align: center;/* 文字・画像を中央にそろえる */
padding: 20px;/* 内側の余白 */
margin: 30px;/* 外側の余白 */
}
サンプルでは h1 に指定していますが、好きな箇所に反映できます。
分かりやすくするために枠線は削除してあります。
また、header の背景を変更しています。
h1の中にanimationとtransformを追加します。
CSS
h1 {
color: #ffffee;/* フォントの色 */
font-size: 90px;/* フォントの大きさ */
font-family: lobster;/* フォントの種類 */
text-align: center;/* 文字・画像を中央にそろえる */
padding: 20px;/* 内側の余白 */
margin: 30px;/* 外側の余白 */
animation: zoom_in 2s ease-in-out forwards ;
transform: scale(0.4);
}
animationでは、先ほど指定した @keyframes zoom_in に対して、2秒かけて大きくさせるという指定をしています。時間を変更したい場合は2sの数字を書き換えます。
ease-in-out ではアニメーションの滑らかさを、forwards では動き方(拡大)を指定しています。
transformではどのくらい大きくさせるかを指定しています。scale(0.4) は 0.4 のサイズから大きくさせる設定です。
CSS
animation: zoom_in 2s ease-in-out forwards ;
transform: scale(0.4);
コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。
Webページを開いたときに、タイトルにだんだん大きくなるアニメーションがついていたら完成です。
ブラウザのリロードボタンをクリックすると確認することができます。
