今回はCSSだけで出来るアニメーションのやり方を紹介します。
アニメーションは難しいイメージがありますが、実はとても簡単です。
ぜひ習得して、Webデザインに取り入れてみてください。
今回はCSSだけで出来るアニメーションのやり方を紹介します。
アニメーションは難しいイメージがありますが、実はとても簡単です。
ぜひ習得して、Webデザインに取り入れてみてください。
CSSアニメーションは、CSSだけで出来るアニメーションです。
動作が軽快で、重くなりにくいのが特徴です。
CSSアニメーションは「変化の前後をなめらかにする」方法と「複雑な動きを演出する」方法の2つがあります。
この方法はマウスカーソルを乗せた時など、シンプルなアニメーションに向いている方法です。
このアニメーションの方法は下記の様な特徴があります。
CSSを上書きする時に変化前と変化後をなめらからにアニメーションすることが出来ます。
変化前と変化後だけを決めて、アニメーションして切り替えます。
アニメーションは一直線に変化するので、複雑な動きは出来ません。
アニメーションは変化後から変化前に戻す時もアニメーションすることが出来ます。
この方法はより複雑な動きを取り入れたアニメーションが可能です。
このアニメーションの方法は下記の様な特徴があります。
CSSで複雑なアニメーションをすることが出来ます。
CSSで変化前と変化後の状態を決めて、さらに変化途中も細かく設定することが出来ます。
変化前と変化途中と変化後を決めてアニメーションします。
複雑な動きが出来るのに対して、変化後から変化前にアニメーションを戻すことは出来ません。
アニメーションが終了したあとは、アニメーションが始まる前の状態に戻ります。
アニメーションの方法は2種類あることが分かりました。
実際に作ってそれぞれの特徴に触れてみましょう。
まずはトランジションを使って変化をなめらかにアニメーションします。
いろんな使い方がああるので、よく使う方法を紹介します。
メニューのリストにマウスカーソルを乗せた(ホバー)時にリストの背景の色と文字の色をなめらかに変更します。
ホバーした時のCSSプロパティの変更を感知して、変更前の状態から変更後の状態になめらかに変化します。
背景の色と文字の色を対象にしたいので、「all」にしてすべてを対象にします。
変更前と変更後を「0.8秒」かけてアニメーションさせたいので、「.8s」にして0.8秒かけてなめらかに変化します。
ホバーした時にメニューのリストのCSSを同時に変化させます。
背景の色: black
文字の色: white
背景の色: white
文字の色: black
はい!とても簡単ですね!
アニメーションさせた要素にトランジションを追加するだけです。
続いてはアコーディオンを作ってみましょう。
メニューをクリックした時にそれに関する項目をアコーディオンのように表示します。
クリックされた時に、リストの高さをなめらかに変化させます。
今回は高さの変更だけですが、「all」にしてすべてを対象にします。
変更前と変更後を「0.8秒」かけてアニメーションさせたいので、「.8s」にして0.8秒かけてなめらかに変化します。
クリックした時にメニューの高さをCSSで変えて開閉します。
リストの最大の高さを「0」にして、ulタグの高さが「0px」になります。
さらに、高さが「0px」になってはみ出てしまった部分は非表示にします。
高さが「0px」にしたから非表示になると思った方がいると思います。
実際に高さは「0px」になっていますが、実はそれだけでは非表示になりません。
要素の高さを「100px」にしてわざとはみ出るようにしました。
この場合、高さは「100px」になっていますが、文章は下にはみ出てしまっている状態です。
「overflow: hidden」を設定すると、要素の高さの「100px」からはみ出た部分は表示されなくなります。
高さを変更すれば見える範囲も変わります。この特徴を利用してアコーデオンメニューを作ります。
「メニュー」をクリックした時は、JavaScriptというものを使ってメニューのリストを開いたり閉じたりします。
メニューが開いたり閉じたりする仕組みはこのようになっています。
「メニュー」をクリックすると「onclick」が反応します。
「onclick」の中に設定している「toggle()」という処理を開始します。
「toggle()」の処理は「script」タグの中に記述します。
「accordion」クラスに「open」クラスを付加します。
もし「open」クラスがある場合は反対に「open」クラスを消去します。
CSSで「open」クラスがある時とない時でメニューリストの高さを変更します。
「open」クラスがない時の最大の高さを「0」に設定します。
「open」クラスが付加された時の最大の高さを「300px」にして、メニューリストを開きます。
ちょっとだけ難しくなりました。
「open」クラスがあるかないかでメニューを開きました。
JavaScriptの部分はなんとなく覚えとく程度で大丈夫です。
続いては、スマホ用のメニューボタンを作ってみます。
「40px」の黒の正方形を作ります。
この後の工程で3本の白いバーの設置とメニューボタンの配置します。
その際に「fixed」が重要になるので、忘れないようにしましょう。
「iタグ」を使って白い3本のバーを作ります。
iタグの本来の使い方は「Naname Letter」のように斜め文字にしたい時に使用するタグですが、今回のようにアイコン用のためにiタグを使用します。
iタグのdisplayプロパティの初期値は「inline」という値で、大きさを変えられません。なので、大きさを変えられるように「block」に上書きします。
3本の共通部分をまとめて設定します。
黒の正方形の左から50%(半分)の位置に指定します。
白いバーの縦横それぞれの50%(半分)の大きさ分を左と上に位置を修正します。
クリックされた時の白いバーの変化を「0.5秒」かけてアニメーションさせます。
上から1本目のバーの縦方向の位置を指定します。
黒の正方形の上から「10px」の位置に指定します。
上記の共通部分で指定した「translate」で上に修正します。
上から2本目のバーの縦方向の位置を指定します。
黒の正方形の上から「50%」の位置に指定します。
上記の共通部分で指定した「translate」で上に修正します。
上から3本目のバーの縦方向の位置を指定します。
黒の正方形の上から「30px」の位置に指定します。
上記の共通部分で指定した「translate」で上に修正します。
メニューボタンを画面に固定してスクロールしても付いてくるようにします。
画面の上部に固定して配置します。
画面の左側に固定して配置します。
マウスを乗せたの時にマウスカーソルの形をポインターに変えます。
positionで要素同士が重なるデザインの時に「z-index」というプロパティで重ねていく順番を指定します。
もしヘッダーの裏に隠れて見えなかったらもったいないので必ず上に重ねて表示されるようにします。
このz-indexの数字が大きいほど優先的に上に重なるようになります。
z-indexの初期値は「0」が基準になります。z-indexの値が大きい順に手前に表示されます。
反対に背景画像など奥に表示させたい時は「-1」のようにマイナス値を指定することも出来ます。
JavaScriptでopenクラスを付加します。
openクラスが付加されたきっかけでアニメーションが動き出します。
中央にある必要ないので透明にして消します。
上下の2本のバーを使ってクロスさせます。
1本目のバーを45度回転させて中央に寄せます。
「rotate」を使って角度を変更します。
黒の正方形の中央に寄せます。
3本目のバーを-45度回転させて中央に寄せます。
「rotate」を使って先ほどとは反対の角度に変更します。
黒の正方形の中央に寄せます。
transformの値に「translate(-50%,-50%)」と「rotate(45deg)」の2つの値が指定されています。
もちろん、要素の回転させているのは「rotate(45deg)」です。
では、どうして「translate(-50%,-50%)」が必要なのでしょうか?
理由は位置がズレてしまうからです。
もし下記のようにした場合、元から指定していた「translate(-50%,-50%)」は上書きされて「rotate(45deg)」のみが適用されます。
これを上書きされても「translate」は残したいので1つ目に「translate」、2つ目に「rotate」を間にスペースを空けて2つ適用させています。
どうですか?出来ましたか?
急にやることが増えてちょっと難しかったですね...。
この後は先ほど作ったメニューボタンを使って、ドロワーメニューを作ってみましょう。
メニューの横幅を画面の最大の大きさまで広げます。
メニューの高さを画面の最大の大きさまで広げます。
「vh」という単位は「viewport height」の略で画面(ブラウザ)の縦の大きさを基準にした単位です。
つまり「100vh」は画面の高さと同じ大きさを意味します。
ちなみに「vw」という単位「viewport width」は画面(ブラウザ)の横の大きさを基準にした値になります。
上部に「40px」のスペースを作ります。
左上に設置するメニューボタンと被らないようにします。
スクロールしても画面に固定されるようにします。
画面の上部に固定して配置します。
メニュ-を画面の左側に配置して、画面の外に飛ばします。
メニューの左側を横幅の大きさ(100%)をマイナス値で指定します。
なめらかに変化させてスライドするようにします。
今回は「left」の値のみですが、「all」にしてすべてを対象にします。
変更前と変更後を「0.5秒」かけてアニメーションさせたいので、「.5s」にして0.5秒かけてなめらかに変化します。
JavaScriptのトグルを使ってクラスの付加・消去をして表示・非表示を切り替えます。
JavaScriptで「open」クラスが付加された時に、CSSで表示するように上書きします。
「left: -100%」で画面の外に飛ばしていたメニューを「left: 0」で戻します。
モバイル用のメニューに使えますね!!
今回は左から表示していましたが、上から表示するなどアレンジしてみて下さい。
今度はアニメーションの遅延を追加してさらにオシャレにしちゃいましょう。
メニューの横幅を「200px」にして記事の部分は見えるようにします。
最初はメニューが見えない状態にしたいので、「left: -200px」で画面の外に飛ばします。
メニューの横幅と同じ「200px」をマイナス値で画面の左側に飛ばしています。
表示する時は、「left: 0」にして見える状態にします。
メニューの開閉を「0.5秒」かけてアニメーションします。
メニューが開く前は透明にして、開いた後は不透明にします。
「opacity」の値を最初は「0」に設定して、メニューが開いた時に「1」にして見えるようにします。
メニューが開く前はリストを左に寄せて、開いた後は元の位置に戻します。
マージンの左側を「-20px」を指定して、マイナス値でリストを左に寄せます。
メニューが開いた時にマージンの値を「0」にして元の位置に戻します。
メニューのリストを「0.5秒」かけて変化させて、さらに開始タイミングを遅らせます。
「0.5秒」かけて変化をアニメーションさせます。
「0.5秒」遅らせて表示させます。
メニューが完全に開くまで「0.5秒」かかるので、開き終わった後に1番目のリストを表示させます。
「0.7秒」遅らせて表示させます。
メニューが開くまでの「0.5秒」と1つ目のリストが開始して「0.2秒後」に表示させます。
「0.9秒」遅らせて表示させます。
メニューが開くまでの「0.5秒」と1つ目と2つ目のリストが開始して「0.4秒後」に表示させます。
「1.1秒」遅らせて表示させます。
メニューが開くまでの「0.5秒」と1つ目と2つ目と3つ目のリストが開始して「0.6秒後」に表示させます。
アニメーションは開始タイミングを遅らせることが出来ます。
マウスを乗せた時やクリックがきっかけでアニメーションをスタートさせていました。
そのきっかけから何秒後にアニメーションをスタートするか決めることが出来ます。
「transition-delay」というプロパティを使ってアニメーションの開始を遅らせます。
アニメーションが開始するタイミングを「1秒」遅らせます。
これまでの書き方に1ヵ所付け加えるだけで遅延することが出来ます。
アニメーションさせたい対象をすべてにしています。
アニメーションで変化させる時間を「2秒」に設定しています。
アニメーションが開始するタイミングを「1秒」遅らせます。
まとめて設定する場合は、記述する順番が重要になってきます。
基本的には最初に「all」、次に「変化する時間」、その後に「遅延する時間」の順番で記述していきます。
例えば「all」の位置を一番後ろに変えるとどうなるのでしょうか?
この場合は、特に問題はありません。
「all」は順番に関係なく記述可能です。
秒数の記述する順番が変わるとどうなるのでしょうか?
上記のように「2s」と「1s」を入れ替えると意味が反対になってしまいます。
この場合、「1秒かけて変化」「2秒遅延する」という意味なってなってしまいます。
もし「2秒かけて変化」「1秒遅延」のアニメーションを設定する場合は、下記の順番で記述します。
もしかしたらアニメーションの遅延はあまり使わないかもしれません。
ちょっとアレンジを加えたい時などに使えそうですね!!
今度はより複雑なアニメーションを作ってみましょう。
いろんな動きが出来たり、アニメーションを繰り返したり出来ます。
まずは、ローディングアニメーションを作ってみましょう。
まずはスピナーの大きさになる「50px」の正方形を作ります。
上下左右に「5px」の紺色のボーダーを作成した後に、上/左/右の色を透明に上書きします。
透明は「transparent」色付きは「#01558d」で指定します。
より少ないCSSで書くとするなら、下記のように書きます。
先に「5px」の透明のボーダーを作成した後、下のボーダーのみ色を上書きしています。
最後に要素を丸くして円にします。
ローディングアニメーションのs設定をします。
「animation」プロパティを使って設定を行います。
アニメーションの名前を「guru-guru」にします。
開始から終了まで「1秒」かけて1回転するようにします。
アニメーションの変化の速さを一定にします。
変化を一定の速さに設定してなめらかに回転させます。
変化の速さに緩急を付けたり、一定にしたり変化の速さを変えることが出来ます。
すべて同じタイミング・同じ秒数でアニメーションさせてみました。
開始と終了をなめらかにします。
何も指定しなかった場合、初期値の「ease」が自動で適用されます。
ゆっくり始まります。
ゆっくり終わります。
ゆっくり始まってゆっくり終わります。
一定の速さで回ります。
アニメーションを無限に繰り返すようにします。
アニメーションが終わったら、また最初からアニメーションをして繰り返します。
アニメーションは1回で終わります。
数字を入れた時はその回数分繰り返します。
下のサンプルは3回アニメーションします。
無限に繰り返します。
キーフレームで「0%〜100%」でその都度CSSを書き換えてアニメーションしています。
最初(0%)の時は「0°」から始まり、最後(100%)の時は「360°」で終わるようにします。
「360°」まで回転し終わったら、アニメーション設定で指定した「infinite」で繰り返します。
どうですか?仕組みは理解出来ましたか?
ページが読み込まれて表示されるまで、飽きさせない効果があります。
ぜひ使ってみて下さい。
次はふわっと表示するフェードインという方法を紹介します。
「HELLO」の要素はボタンが押されるまで見えないようにしたいので、透明にしときます。
JavaScriptでopenクラスを付加された「HELLO」の要素はCSSでアニメーションが開始されます。
ふわっと表示する部分を作成します。
最初(0%)の時は透明にして、さらに「translateY」で縦方向に「30px」下にずらします。
最後(100%)の時は見えるようにして、さらに「translateY」を「0」に上書きして元の位置に戻します。
ふわっとアニメーションが終わった後は、アニメーションが始まる前の状態に戻ります。
つまり、このままだとアニメーションが終わったあとに「HELLO」は透明に戻ります。
これを避けるために「open」クラスが付加された時、下記のように「HELLO」を不透明に右上書きします。
上記の書き方だとアニメーションが開始される前に一瞬表示されちゃうのではないかと思った方がいるかもしれません。
安心してください。アニメーションと不透明は同時に適用されます。
まず先にキーフレームのアニメーションが優先され、その後に「opacity: 1」が適用されるイメージです。
つまり、「opacity」「animation」の書く順番を変えても全く変わりません。
ちょっと難しいですね...
少しずつキーフレームの使い方がわかってきていると思います。
実際に一つ一つ確認しながら作ってみて下さい。
次はスクロールアナウンスを作りましょう。
アイコンのフレーム部分を作ります。
「box-sizing」でボーダー領域までの大きさを指定しています。
さらに、横幅「60px」の半分の大きさ「30px」で角を丸くしています。
ドット(点)を作ります。
ポジションを使って上から「20px」の位置にセットしてアニメーションが始まる前は透明にしときます。
テキストの「Scroll」部分を作ります。
フォントサイズを「20px」に固定して、アイコンの下に設置します。
「top: 100%」でアイコンの最下部にくるようにしています。
これはそんなに難しくはないですね。
アニメーションさせてるのはドットの部分だけです。
スクロール出来るか分かりにくいって時に作ってみて下さい。
アニメーションはちょっと置いといて擬似要素やりましょう。
擬似要素!?何それ?と思った方、ヒツジも最初「何それ?」って思いました。
簡単に言うと、「CSSで新しく要素を作っちゃおう!!」ってことです。
擬似要素とはCSSで新しく要素を作り出したモノ。
HTMLでは要素が1つしかありませんが、CSSで要素を作ると最大2つまで架空の要素を作りだすことが出来ます。
擬似要素は「Before」と「After」の2種類があります。
なぜ「Before」と「After」という名前なのか、理由は簡単です。
「Before」はHTMLに記述された「要素」のすぐ前(左側)に追加されます。
今回は「☆」を要素の前に追加してみました。
「After」はHTMLに記述された「要素」のすぐ後(右側)に追加されます。
今回は「☆」の色を変えて要素の後に追加してみました。
擬似要素を表示させたい時は必ず「content」が必要になります。
もし「content」がなかった場合は一切表示されません。
擬似要素に何か文字を入れて表示させたい時は「content」の「''」に文字を入れます。
文字を表示させたいのではなく、例えば四角や丸など図形を表示させたい時は「content」の中を空にします。
擬似要素は仮想的に作られる要素ということがわかりました。
おそらく「今まで擬似要素使わなくてもいけた!!」と思うことがあると思います。
まさにその通りですが、使い方次第ではとても便利で効率的になります。
こちらの商品は9800円※です。
「notes」クラスがあるすべての文章の左側に「※」を挿入されます。
このようにCSSで「※」を追加されるようにすると毎回キーボードで入力する手間は省くことが出来ます。
CSSの擬似要素で「※」を挿入します。
要素の前(左側)に追加したいので「before」を使います。
「content」の中に「※」を記述します。
注釈を例にした「Before」の使い方でした。
この方法は簡単でよく使われる方法です。
次は「After」を使ったパンくずリストを作ってみましょう
よくサイトの上部にある、関連する項目を表示している部分を見たことがありませんか?
上記の場合、「トップページ」から「サービス」の中の「修理」という項目を選んで「PC」のページを今見ている状態を利用者に伝えています。
パンくずリストはページの構造がパッと理解出来るように、ほとんどサイトで設置されています。
パンくずリストは「ul」タグと「li」タグを使うことが多いので、今回は「ul」「li」を使って作成します。
Flexboxを使ってリストを横並びにします。
さらに下に「2px」の破線を引きます。
After要素でリストの後(右側)に追加します。
そして「>」の左右に「5px」の余白を入れます。
最後の「pc」の後には「>」は必要ないので、最後の「>」は非表示にします。
これも簡単ですね。
CSSで擬似的に付け加えることで、HTMLの修正なしで出来るのがいいですね!!
それでは最後に「Before」「After」を使った応用編をやってみましょう。
Web制作は短期間で習得可能です。
「position」を「relative」に設定して、この後に作成する擬似要素を自由に移動出来るようにします。
この後に作成する擬似要素は外にはみ出たデザインにするので、マージンで上下に「30px」左右に「15px」の余白を作ります。
また、パディングで上下左右に「10px」の余白を作って文章をみやすくします。
「2px」の大きさで文章全体を線で囲います。
さらに角を「10px」の大きさで丸くします。
Web制作は短期間で習得可能です。
擬似要素「before」「after」の共通部分を設定します。
「absolute」を設定して、擬似要素を動かす準備をします。
そして、背景は紺色にして角は丸めます。
より実用的な「Before」と「After」の使い方をやりました。
今話してるこのヒツジも実は擬似要素で表示しています。
本物はどこでしょうかね....。
ちょっと高度なアニメーションを作ってみましょう。
擬似要素の「Before」と「After」を使ってアニメーションします。
ちょっと難しいですが、余裕がある時にやってみて下さい。
アニメーションさせるために、まず先にリスト(liタグ)のデザインを作ります。
パーツごとに重要なポイントを押さえて説明していきます。
リストの左側に「Before要素」、下に「After要素」を設置するため、「relative」を必ず指定します。
リスト同士の間隔(上下)を「.8em」※のスペースを作ります。
さらに、左側に「20px」のスペースを作ります。
これは左側に「Before要素」を設置するのでそのために空けています。
リストの左側にある「Before要素」と間に「10px」のスペースを作って、見やすくします。
擬似要素の「before」と「after」の共通部分をまとめて指定します。
「10px」の紺色の正方形を作ります。
正方形をリストの左側に置くため、「right: 100%」と指定します。
もし「right: 0」だったら右側に配置されますよね。
「right: 100%」は、リスト本体の大きさ(100%)分を右から左に移動=左寄せにします。
上下の位置を中央寄せします。
まず、上から「50%」の位置(半分の高さ)に設置します。
その後、正方形の半分の大きさ「5px」を上に修正して、中央に寄せます。
今回は位置の指定に「calc」という計算してくれる関数を使いました。
簡単にいうと「%」「px」「em」など、単位の違うものでも計算してくれる関数です。
例えば上記ような「10px」の正方形を中央に配置したい時の計算を考えます。
「100px」の高さのある要素の中で正方形を中央に寄せる時、その半分の高さ「50%」は「50px」の位置に配置されます。
さらにそこから正方形の半分の大きさ「5px」を引いて上に修正します。
計算結果は「top: 45px」が指定されます。
calc関数を使わないで、「translate」でもほぼ同じ働きが可能です。
上から「50%」の値で中央まで移動します。
その後に「translateY」で高さを「5px」上に戻して中央寄せしています。
高さ「2px」の紺色の線を引きます。
横幅は「0px」にして、ホバーした時に「100%」にして広げます。
「top: 100%」と「left: 0」で左に寄せます。
リストをマウスカーソルでホバーした時にアニメーションさせます。
擬似要素の「Before」と「After」を「0.2秒」かけてアニメーションするように、まとめて指定します。
正方形のブロックを「top: 100%」で一番下まで移動しながら高さを「2px」に変えて、ブロックを潰したような演出をします。
横幅を「0」にしていたものほ「100%」にして、横に伸びる線を演出します。
アニメーションの遅延を利用して、Before要素とAfter要素を繋がったアニメーションにします。
遅延を「0秒」にして先にアニメーションします。
「0.2秒」かけてBefore要素が変化した後、After要素がスタートします。
After要素を「0.2秒後」にスタートさせます。
ホバーした時に「0.2秒」遅らせていたAfter要素を「0秒」の遅延に上書きして遅延をなくします。
ホバーした時に「0秒」遅らせていたBefore要素を「0.2秒」の遅延に上書きして遅らせます。
遅延しないのになぜ「0秒」の遅延を記述する必要があったのでしょうか?
理由は、「ホバーした時」と「ホバーを解除した時」にBefore要素とAfter要素の遅延設定を入れ替えるためです。
ホバーした時はBefore要素の後にAfter要素がアニメーションするように、After要素を「0.2秒」を遅延しています。
ホバーを解除した時はAfter要素の後にBefore要素の順で元に戻します。
そのために、遅延設定を入れ替えています。
うーん、いまいちよく分からないという方!
ちょっと面倒ですが、CSSを一つ一つ書き加えながら確認してみてください。
きっと理解出来ますよ。
「120px」の正方形を作成していきます。
この正方形を基準に円・テキスト・波紋を作成していきます。
Before要素を使って、直径「60px」の紺色の円を作成します。
そして、作成した円を正方形の中心に配置します。
After要素を使って「Wave」というテキストを円の上に作成します。
「left: 0」「right: 0」で左右を最大まで広げて、その後テキストを中央寄せしています。
また、contentにattr()という関数を使って、HTMLからCSSへ「Wave」というテキストを引き継いで表示させます。
HTMLからCSSにテキスト形式で引き継いで、擬似要素の「content」に代入することができます。
その際に「attr()」という関数を使って「data-text」の値を受け取り・代入をして表示します。
このようにするとAfter要素またはBefore要素の「content」は修正しなくても、再利用が可能になります。
waveクラスの「Before要素」と「After要素」を使って2つの波紋を作成します。
直径「50px」の円に、ボーダーで「2px」の白い枠を作成します。
そして、作成した2つの円を正方形の中心に配置します。
波紋は最初見せたくないので、要素の重なりを利用して波紋を隠します。
z-indexを使って「1〜3」で重なる順番を指定します。
数字が大きいほど出前に重なって表示されます。
ホバーした時にアニメーションを設定して波紋を表現します。
「round」クラスにホバーした時に、その中の波紋である「wave」クラスをアニメーションします。
さらに、「wave」クラスの「After要素」を「0.7秒」遅らせてスタートします。
アニメーションの動きを作成します。
アニメーションの遅延をすることで、2つの波紋を表現しています。
はい、めちゃめちゃ複雑です。
結構意味がわからなかったかもしれません。
これも一つ一つ確認しながら頑張ってください!!
Web制作は短期間で習得可能です。
ヒツジは2年前にHTML&CSS超入門という本で独学で学び始めて、現在は3つのサイトを立ち上げ運用しています。
焦ってしまうこともあるかと思いますが、しっかり地道に学んで時には休んで頑張っていきましょう。