こんにちは。最近色々な方から、プログラミング、特にweb制作の領域を独学する上で「HTML/CSSはやったけど、これから何をどこまで学習したらいいか分からない」という質問を受けることが多くなりました。
そこで、僕が思う「何をどこまでできれば良いか」をシリーズで連載していこうと思います。なるべく初心者に分かりやすいよう丁寧に書いていきます。
10/02追記
本シリーズはjQueryで解説をしておりますが、今後は基本的にVanilla JSなど別の方法で実装した方がベターかと思われます。→参考：https://itokoba.com/archives/4765
10/4追記
jQueryからVanilla JSに移行する際の手助けになるような情報をまとめた本をzennさんで出しました。ぜひお買い求めください。
HTML/CSSの次は、JavaScriptを絡めていくつかのパーツを作れたらある程度案件に対応できる
「何をどこまでやるべきか」という話ですが、LPやサイト制作の案件目線で考えた時には目次でリストアップしたパーツがきちんと作れれば概ね大丈夫だと考えています（他にこれも追加すべき！というご意見ありましたらぜひください）。
JavaScriptと言ってもjQueryでいいですし、Vue.jsを使っても構いません。もちろん生でもいいです。
というわけで、ここからは各パーツの軽い紹介と記事をまとめていきます。
ハンバーガーメニュー
よくページの上部にある、ボタンを押すとメニューが開閉する要素です。
記事はこちらから。
スライドショー
中の要素がスライドするように動くパーツです。
記事はこちらから。
タブメニュー
いくつかのタブを切り替えることでコンテンツも合わせて切り替わるようなメニューです。
記事はこちらから。
モーダルウィンドウ
モーダルウィンドウは、元の画面の上に別枠で表示されるウィンドウです。
記事はこちらから。
ドロップダウンメニュー
各メニューにマウスオーバーすると、さらにメニューの項目が表示されるような要素です。実はJavaScriptを使わずに実装することができます。
記事はこちらから。
スクロールアニメーション
スクロールに合わせてセクション要素をアニメーションさせつつ出現させます。
記事はこちらから。
スムーススクロール
ページ内リンクなど、通常のスクロール以外でスクロールが発生する際の動きを滑らかにします。
記事はこちらから。
アコーディオンメニュー
項目をクリックすると、各サブメニューが開閉するようなメニューです。
記事はこちらから。
まとめ
というわけでそれぞれのパーツの紹介と解説でした。もちろん実際に案件に関わってみると今回紹介したもの以上に多くのことを要求されると思います。
しかし、初学者から無限に勉強すればいいわけではないですし、逆に勉強だけしていてもたどり着けないものが仕事の中にたくさんあります。
「その仕事にたどり着くために最低限必要なもの」という目線で今回紹介しました。
皆様の参考になれば幸いです。
より詳しいロードマップはこちらから
コメント