START
作ったWebサイトをインターネットに公開し、URLで共有できる状態にします。
レッスンをみる 効率化したい方 便利ツールを使いこなすEmmet、Google Fonts、Bootstrap、Bootstrap Iconsで制作スピードと表現の幅を上げます。
レッスンをみる 動きを加えたい方 よく見るUIの動きを実装するスクロールアニメーション、画像ギャラリー、カルーセルなど、サイトに取り入れやすい動きを学びます。
レッスンをみる 表現を深めたい方 GSAPで本格的なアニメーションを学ぶTween、Timeline、ScrollTriggerを使い、複数の動きを制御する表現へ進みます。
レッスンをみるOVERVIEW
Webサイト制作の基礎を学ぶと、HTMLで構造を作り、CSSで見た目を整える流れが見えてきます。ここからは、作ったページを公開したり、制作の手間を減らしたり、よく使われるUIの動きを取り入れたりして、実際の制作で役立つ力を身につけていきます。
この学習ガイドでは、GitHub Pagesでの公開、Emmet、Google Fonts、Bootstrap、Bootstrap Iconsによる制作効率化や見た目の拡張を扱います。
さらにAOS、GLightbox、SwiperでWebサイトでよく見る動きを実装し、GSAPでタイムラインやスクロールに合わせた本格的なアニメーションにも触れられます。
GitHub Pagesを使い、手元で作ったWebサイトをインターネット上に公開する流れを学びます。
EmmetやBootstrapを使って、HTML/CSSの記述やよくあるUI作成を効率よく進める方法を身につけます。
AOS、Swiper、GSAPなどを使い、スクロールやカルーセル、アニメーションをWebサイトに取り入れます。
BEFORE YOU START
この学習ガイドは、HTML/CSSでWebページを作った経験がある方向けです。
必要に応じて、入門ガイドやJavaScriptの基礎もあわせて確認しましょう。
GUIDE
GitHub Pagesを使い、制作したWebサイトをURLで共有できる状態にします。
入力補助、Webフォント、UIフレームワーク、アイコンを使い、制作スピードと見た目の幅を広げます。
スクロールアニメーション、ポップアップギャラリー、カルーセルなど、サイトに取り入れやすい動きを学びます。
Tween、Timeline、ScrollTriggerを順番に学び、複数の動きを制御するアニメーション表現へ進みます。
NEXT STEP
FAQ
HTML/CSSで簡単なページを作った経験があれば学べます。まだ不安がある場合は、Webサイト制作入門でHTML/CSSの基礎やレイアウトを確認してから進むのがおすすめです。
GitHub Pagesのレッスン内で必要な操作を確認できます。GitやGitHubに慣れていない場合でも、動画の手順に沿って進められます。
AOS、GLightbox、Swiper、GSAPのようなライブラリを使う場面では、JavaScriptの基本を知っていると理解しやすくなります。必要に応じてJavaScript入門もあわせて学んでください。
Bootstrapはよく使う部品を素早く組むのに便利ですが、細かな調整にはHTML/CSSの基礎が役立ちます。基礎を押さえたうえで使うと、意図した見た目に近づけやすくなります。
まずAOSやGLightbox、Swiperでよくある動きの実装に慣れ、より細かな制御をしたくなった段階でGSAPへ進むと理解しやすいです。
1本あたり3分前後の動画で構成されているため、1日20〜30分のペースでも数週間ほどで公開、便利ツール、よくある動き、本格アニメーションまで一通り触れられます。
一部レッスンはプレミアム限定です。ただし無料で視聴できるレッスンもあるので、内容を確かめたうえでプレミアムプランをご検討いただけます。
公開済みのポートフォリオサイトや、Webフォント、アイコン、カルーセル、スクロールアニメーションを取り入れたWebページを作れるようになります。
LEARN NOW
3分動画でマスターできるプログラミング学習サービスです。あなたもプログラミングを始めてみませんか？
Copyright © 2011-2026 dotinstall.com. All Rights Reserved.
