デイトラ卒業制作終えて、NoCodeは残ってましたが、そのタイミングでUdemyのセールを実施していて、9,600円が1,380円!!と衝撃の割引価格だったので勢いで買いました。「ガチ、フロントエンド」は“ベストセラー”と高評価で人気の講座だそうで、作者「Code Mafia」さんはYoutubeのチャンネルもありますので、少し見て「こんなカンジの進め方か～」を掴んでからでもいいかと思います。
調べればすぐ出ますが、Udemyは毎月のペースでしょっちゅうセールやってます(笑)しかも1万とか2万とかの講座が90%OFFになったりもするので、購入するタイミングに気をつけてください。まだこの講座1つしかやってないですがUdemyは
レッスン形式は動画
1度購入したら見放題
コメントで質問も可能
特徴としてはこんなとこでしょうか。この「ガチ、フロントエンド」は約20時間!!もありボリューム満点なので1,380円ならコスパ抜群です。Progateやドットインストールのように月額1000円見放題ではなく、購入後はいつでも閲覧可能なのもうれしいですね。
そんな「ガチ、フロントエンド」のレビューになります。購入を検討されている方の参考になれば幸いです。
Sec1 はじめに
この講座の目的や何を作るのかを紹介します。「HTML,CSS」「フロントエンドとは」「バックエンドとは」から解説があるので、一応“基礎”からの解説があるので完全初心者でも学べる講座なのかもしれませんが、実際は「HTMLって何？」というレベルの人ではかなりキツい…かと思います。
Chrome、VScode、zipファイルで素材のダウンロードをしますが、だいぶ駆け足なのでやはり完全初学者にはキツいかな。VScodeの拡張機能「Live Sass Compiler」をインストールしてSassを動かしますが、下の「Watch Sass」ボタンを押さないとコンパイルが始まらなかったり、「記述しているコードは合ってるのに、Live Sass Compilerが正常に動いていない」がまれにあります。その際はVScodeを一旦閉じて再起動すれば解決ですが、これが嫌いな人は代わりに「Easy Sass」をインストールするケースもありますのでご参考に。
「Live Server」も起動しておくとブラウザの「更新」ボタンを押さなくても記述したcssが画面に反映されるプラグインですが、「えっと…どこがどう変わった？」がわからないので個人的に“学習”にはオススメしません。「更新ボタン“ポチッ”、おっ！変わった」が初めは大切だと思います。作業に慣れて”開発”をスピーディーに行いたい方が使うべき機能ではないでしょうか。
各セクションにstartとendという「ここに書いてね」ファイルと「これが完成品だよ」ファイルがあるのでプログラミングでよくある「言われた通りに書いたのに動かない」の際に「テキスト比較ツール」などで「自分の書いたコードとendの完成品コード」を比較することで目視では「こんなの見つけらんねぇよ…」もすぐ見つかるので活用しましょう。
ここでは解説されませんが、質問の仕方も重要です。「動きません」「分かりません」だけでは答えようがないので質問する際は、まず過去に自分と同じ箇所を質問している人がいないかを確かめ、自分で検索してみてそれでも解決しない疑問の場合は可能な限り詳しく自分の考えをまとめて、自分のコードを貼り付けるなどしましょう。
Sec2 超初心者向け基礎 Sec3 省略記法
HTML,CSSの書き方を基礎の基礎から解説しますので、Progateなどを学習した方はいい復習になるかと思いますし、中級者は飛ばしてしまっても構わないセクションです。
最後の要素詳細度については中級者でも見ておいた方がいいかと思います。なかなかこれを細かく説明するのは難しいので「どれだけ条件を絞ったか」で考えるといいんですね。
Emmet記法も紹介しますが、暗記するようなものでもないかなと。この講座を進めていくうちに動画を見て書き方をマネることがありますので自然と身につきます。“7”の最後で初バイバイかな、割と早くから言ってたんですね。
Sec4 css基礎
“13”では「borderとは、padding-marginとは、font-weightとは」など優しい解説、これなら初学者もついてこられるはず。その次“14”にもうtransitionなので流石に進行が早いですね(笑)”15”ではSass…ここまで早いのも斬新だけど、まぁどうせ使うんだったら早く使い始める方がいいのかも。半角スペースを“空ける空けない”の違いは大きいので大事ですし、.btn-cubeをネストの中で「&-cube」と書く、これは完全初学者ではキツい…けど講座内で数百回と出てくるので“使いながら覚える”と覚悟があればいけるかも。 “19”で一旦文字のみになり驚きますがサラッと読んでおきましょう。
“21-22”は演習です「自分で考えて作る！」と志高い方でなくとも一緒に見ながら書きながらでも大丈夫ですが、プログラミング学習あるあるで「ただのコピペ作業」になってしまうことがあるので、気を付けてください。画面上で正しく動いているから勉強してる気になるのが注意点です。“24-25”positionやz-index解説でも言われますがクセのあるプロパティなのでじっくり学びましょう。開発ツールでpositionの値を付けたり消したり、z-indexの値も変更するとで画面表示が変わってくるので色々触ってみることをオススメします。stickyは親要素の中でfixedの役割、これもマニアックかな。
“25”の動画内で適度に間違えてるのがいい。「hoverはspanではなくbtnが対象」であって書き方も「.slide-bgが付いたbtnにhoverが付いた時にspanに対して」といきなりスラスラ書けなくても、まずは読めることが大事という僕の持論です。”28-29”の3Dアニメーションはtransform-style: preserve-3d;やperspective: ○○px;と聞いたことのない用語が続けて出てきて急に難易度上がります。
Sec5 CSSアニメーション
“34”で@keyframeを作って「どういうアニメーションか」を自作する方法を学びますが、これはドットインストールやデイトラでも出なかったやつですね。このSec5で「CSSでここまで出来るのか」を体感します。”36”で@mixin animation(受)でデフォルトを指定しながら引数を受け取り、それを要素の中で@include animation(渡)が使えます。「～を定義し引数を渡して使い回す」はプログラミング学習で多くの人が躓くポイントではないでしょうか？“矢印の向き”がわからないんですよね、「これが呼び出されて、この値があっちに飛んで～」を意識しましょう。”37”の:nth-childと:nth-of-typeは使い方が似ているので注意、:nth-of-typeの方が厳格に要素を見てるというカンジでしょうか。”38”でなんとsassでfor文です
@for $i from 1 through 2 {
&:nth-child(#{$i}) {
animation-delay: -0.32s / $i;
}
}使う機会も多くないでしょうから、ちょっと覚えてられないかな…ちなみにinterpolationは書き入れ・差し挟む・内挿だそうです。”39”の冒頭にてプログラミング学習で良く使われるカタカナ語の「モジュール」という単語がでますが、“部品”のことです。”40-41”でローダーを見本通りに作りますが、同じように作れるようにならなくても、何をやってるか分かればいいです。というのもやはりこの講座レベルが高いので“プロの業”がまれに出てきて、我々初心者は「ここまで出来なきゃいけないのか…」と思いますが、見ていて「なるほどね」書いてみて「おっ！動いた」で十分だと思います。
“43”ではcssだけでtextAnimationをつくります。「_mixin.scss」のようにアンダーバーから始まるものは“部品”とみなされcssファイルに変換されることがない。transformプロパティはinline要素には適応されない。GoogleFontの使い方もここで解説、使いたいフォント(複数選択可)を選んでEmbedからlinkをコピーしてhtmlファイルのhead内に貼り付け、font-familyプロパティもcssファイルに貼り付けて完了。
“44”で画像をフェイドイン・アニメーションを@each文を使って効率良く記述
$pattern: (
"up": translateY(6px),
"down": translateY(-6px),
"left": translateX(40px),
"right": translateX(-40px)
);
@each $key, $value in $pattern {
.appear.#{$key} {
& .item {
transform: $value;
}
}
}patternに入っているkey情報とvalue情報をappearクラスとitemクラスに当てはめる、とこれも読めればよく、この講座でもこの後にeach文は登場しません。
“45”でこの講座でよく使うobject-fit: cover;が紹介されます。background-size: cover;のimgタグ版です。”46”cover-slideのアニメーションものちにJavaScriptで制作するものですが、ここではcssでも実装します。アニメーションが早いんですよね、inviewが付いた箇所の$durationを.3sから3sなど変更すると動きをゆっくり確認できると思いますので、試してみてください。
“47”pointer-events: none;でマウスを感知しない(zoomが効くようになる)という説明ですが、hoverしてbackground-colorは受け付けているんですよね。「MDN」からの引用ですが、noneを付けると
要素がポインターイベントの対象になることはありません。しかし、子孫要素が pointer-events の別の値をセットされていた場合は、その子孫要素自体はポインターイベントのターゲットとなりえます。
だそうです。今回は
<div class="cover-slide hover-darken inview">
<img class="img-zoom" src="images/image-1.jpg" alt="">
</div>hover-darkenにpointer-events: none;を付けていてその子孫要素であるimg-zoomのhovertransform: scale(1.3);を活かす、ということです。「でも、薄い黒幕はhover対象なの？none付けたら対象にならないのでは？」とも思いました。
.hover-darken {
&::before {
略
pointer-events: none;
@include animation(
略
);
}
&:hover::before {
background-color: rgba(0, 0, 0, 0.4);
}
}この点についてレッスンでも質問している方がいましたので、そちらをまとめると
::beforeはポインターを受け付けない→imgがポインターを受け付けzoomが作動
.hover-darkenにhoverしたら::beforeに薄い幕付けてね
ということです。なるほど1つずつ読み解けばそうなります。ちなみに他の質問で
.hover-darken {
&::before {
content: "";
position: absolute;
～～～略～～～
&:hover {
background-color: rgba(0, 0, 0, 0.4);
}
}ではダメなのか？という質問がありました。わからなくはないですね、これに関しては
「そもそも疑似要素(::beforeや::after)は:hoverなどの疑似クラスを持てない」のだそうです。他の方の質問を読むのも勉強になりますね。
“48”ではデイトラでも出てきた不思議なpadding-topの使い方が紹介。background-imageでは通常のimgタグと違って画像のアスペクト比を保つのが難しいためです。(size: contain;なら保てるけど余白が生じる)ここでは背景を付けたdiv要素に
&::before {
display: block;
content: ‘’;
padding-top: 50%;
}
と、ここで前半終了です。長い…20時間もあるのでしょうがない。個人的にはSassの書き方やアニメーションの奥深さが勉強になりました。動画の中でも言われていたでしょうか、少しずつ自分で変えてみることをオススメします。例えば「margin-bottomをpadding-bottomに変えてみよう」「delayの時間を極端に早くor遅く」などですが、もっと熱心な方は「この前見たあのページのボタンhoverかっこよかったな、作ってみよう」とか
Sec6からJavaScriptに入るので、ここで区切りがいいですね。ちなみに後半の方が長くなります…
コメント