クリスマスっぽいNow Loadingを作ってみた(デザインのお勉強)
今の所何の知識も無いけどいつかUIつよつよアプリを作成したい！の思いだけがあふれてる私が、
「とりあえず好きなデザインから写経＆アレンジしていけばモチベもスキルも地道に上がるんじゃにゃかろうか」を目指すシリーズ。
ただただ写経して、わかんないコード片っ端から理解していくスタイルでいくよ。注意すべきはこれだけ！！
一度で理解しようとすな！！ただの自分用アウトプットやから記事の見栄えは全く気にせずとりあえず全部適当にメモしていけ〜（≧∇≦）
Youtubeの動画サムネイルで作ってみたいな〜って思ったこちらの動画を写経していくよ！
本読んでて試してみたい配色あったから、ちょっとアレンジとフォントも変えてみた！
完成したコードはこちら！
読み込み中にこれを表示して、本題のページ読み込み後に表示してーってJSでできるみたいやけど、それはまた今度にしよう。配色がお気に入りすぎる。
完成までのアウトプットメモ
・使っているのはHTMLとCSSアニメーションだけ！
・Fancy-Border-Radius：要素の丸みを自在に設定できて、そのままCSSコードコピペできるやつ！
・フォントはGoogle-Fontsの「Cherry Swash」
・使用カラーコードは
ベースカラー：#7c2e1e、サブカラー#2a4743, アクセントに#b19962
HTMLから見ていくよ。
<div class="loader">
<span></span>
<span></span>
<span></span>
<h2>Now Loading...</h2>
</div>・今回はspan３つ使ってこれをCSSでいじって、枠みたいにしてる感じ。
・全体はloaderっていうクラス名のdiv要素で囲んでる。
・文字はh2タグ使用。
CSS１つずつ見てくよ
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
「*」は要素すべてを指すためのセレクタらしい。
デフォルトのmarginとpaddingを0に指定、リセットCSSみたいな役割してるってことか？box-sizing: border-boxは要素の幅と高さ計算するときに、パディングとボーダーも入れて計算するためのやつらしい。
body {
height: 100vh;
width: 100%;
background-color: #7c2e1e;
display: flex;
align-items: center;
justify-content: center;
}
今回で言う全体箇所の設定やね。
・height: 100vh;は高さをビューポートの100パーセントで設定しているの意。つまりブラウザに写ってる部分全部を覆うよって感じかな？レスポンシブデザインとかで使えるやつかも。
・width: 100%;は親要素の100％分って意味やけど、今回bodyがいちばんの親要素になるし、bodyはビューポートの幅と同じやから、結局画面全体ですよって意味かな？
・display: flex;にするとフレックスボックスコンテナに変わる。この要素の子要素は全てフレックスアイテムって呼ばれて、そのルールに従って配置される感じ。今回で言うとbodyをフレックスにしてるから、直下の全部の要素がフレックスアイテムになる感じ？
→align-itemsとjustify-contentはそれぞれフレックスボックスコンテナの縦軸と横軸を設定するためのスタイル。どっちもcenterにしてるから、画面の中央に配置される。
直下のloaderがフレックスアイテムとして扱われるっていうことかな？loader内で新しく指定しない限りは中のh2要素などはそのままだと中央に配置されない感じかも。
.loader {
width: 350px;
height: 350px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}実際に今回動かす部分の大元のところ。
bodyのセレクタでdisplay: flexにしてる部分のフレックスアイテムにあたる、やからこれがさっきのcenterで中央に配置されてる状態。
・幅は横縦どっちも350px
・displayはこれもflex、ということは.loaderはbodyのフレックスアイテムやけど、.loader自体もフレックスコンテナになって直下の子要素が.loaderのフレックスアイテムになるってことかな？
・align-itemsとjustify-contentでフレックスアイテム、今回で言うとspanとh2要素を中央揃えしてる状態？
・position: relativeは基本的にposition: absoluteとセットで使用するやつかな。absolute(絶対)指定した要素の基準になるやつ。つまりposition: relative(相対)にしてる.loaderの要素に重なるようにするための記載かな。
.loader span {
position: absolute;
border: 2px solid #b19962;
width: 100%;
height: 100%;
animation: animate 5s linear infinite;
}今回このspanのセレクタが動く線を実装してる状態やね。
でabsoluteが大事なところや。
・position: absolute;にしてることで、position: relativeに設定してた.loaderの位置に合わせて完全に重なるようになってる。
・これをwidthとheight100%にしてborderで設定することで、親であるloader要素の縁に合わせて線が表示されてるようになってるのかな？
※ちなみにもしposiriton: relativeを設定せずにabsoluteだけ設定してる場合は、body要素に沿って配置されるらしいから、今回の場合やと画面全体を囲む線みたいになってしまう感じ。
・animation: animate、ここは@keyframesで設定したanimateていう名前のCSSアニメーションを5秒間隔でlinear(均等な速度)で、infinite(永久的に)に動かす感じ。
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}実際のアニメーション指定部分。
0%(0秒)段階では回転なし。
100%(今回やと5秒時点)で360deg=360度(1周)するようなCSSアニメーションをanimateって名前で定義してる感じ。
.loader span:nth-child(1){
border-radius:28% 72% 46% 54% / 78% 28% 72% 22% ;
}
.loader span:nth-child(2){
animation-direction: reverse;
border-radius:57% 43% 35% 65% / 68% 61% 39% 32% ;
}
.loader span:nth-child(3){
animation-delay: 3s;
border-radius:47% 53% 66% 34% / 68% 21% 79% 32% ;
}nth-child()は子要素のインデックスを指定できる擬似クラスっていうやつらしい。今回span３つ用意してるけど、1つ目〜3つ目をnth-childの書き方で個別に指定して、異なるアニメーション実装してる感じ。
・border-radiusの中身はFancy-Border-Radiusで作った円を使用してるだけ！
・animation-direction: reverseはアニメの方向指定できるやつ。reverseで逆向きにアニメーションが実装される感じ。
・nthの3番目はdelayをかけてる。これはアニメの周期自体をずらすってわけじゃなくて、単純にアニメの開始を3秒ずらしてるだけかな。
.loader h2 {
color: #b19962;
font-size: 2.3rem;
font-family: 'Cherry Swash', cursive;
font-weight: 700;
background-color: #2a4743;
padding: 100vh 40px;
white-space: nowrap;
}now loadingを表示してる部分やね。
・font-sizeのremはpxとかで設定されたフォントサイズに対するサイジングのやつかな？今回やと、ブラウザでデフォルトで設定されてるh2の大きさの2.3倍で表示するためにこの記載にしてる？レスポンシブ対応かな？
・font-familyの書き方としては先に書いた方が優先されて、それがブラウザに対応されてない場合は、次に指定されてるやつを表示して…みたいな感じかな。やから今回の場合は、google fontsで見つけたCherry Swashを優先で指定しといて、それがない場合は、cursiveっていう手書き系のフォントファミリーから表示されるみたいな？
・今回font-weightで文字の太さ設定してるけど、私が任意で設定したgoogle-fontsの方はこれが適用されないっぽいから、cursiveになった時だけ適用される感じかも。フォント側が太さとか決まってるやつやったら指定できない感じやね。
・paddingで100vh(表示画面の100%)と40px設定してるのは、私が勝手に文字を軸に緑の背景を伸ばしたかっただけ。
・white-spaceにnowrapを指定すると、テキストの折り返しが無いようにできる！！これ結構使いそうやね。
今回特に覚えときたいところは…
position: relativeとabsoluteは親要素と子要素で基本セットで使うやつ！！
display :flexに設定すると、それ自体はflexコンテナ、直下の要素はflexアイテム化して並べるためのメソッド使えるようになる！
以上！！