フロントエンドを支える3つの技術
HTML、CSS、JavaScriptがそれぞれ構造、スタイル、動作という固有の役割を担い、組み合わさってWebサイトを作る仕組みを学びます。
「フロントエンドを支える3つの技術」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全3レッスンが含まれています。
3つのツールに出会う 🤝
フロントエンドは、HTML、CSS、JavaScriptという3つのツールで動きます。この3つを学べば、ほとんど何でも作れるようになります。では見ていきましょう！
家を建てると考えてみましょう 🏠
家を建てるところを想像してください。HTMLが構造、CSSが塗装とスタイル、JavaScriptが命を吹き込みます。これだけです。
HTML：構造
HTMLはページの構成を整えます。見出し、段落、画像、リンクなどです。すべてを所定の位置に支える骨格です。
HTMLを少し見てみる
少しだけ見てみましょう。この1行はページに見出しを作るだけです。暗記する必要はありません。読みやすさに注目してみてください！
<h1>Hello!</h1>CSS：見た目
CSSは見た目を整えます。色、フォント、余白、レイアウトなどです。何もないページを、実際に眺めたくなるページに変えます。
CSSを少し見てみる 🎨
この小さなルールはテキストを青くします。わかりますか。望む見た目を指定すると、ブラウザーが実現してくれます。親しみやすい仕組みです。
h1 { color: blue; }JavaScript：動き
JavaScriptはページを動かします。クリックへの反応、ポップアップ、メニュー、リアルタイム更新などです。画像のようなページを、実際に体験できるものへ変えます。
3つはチームで働く
通常、1つだけを使うことはありません。すべてのページでHTML、CSS、JavaScriptが力を合わせます。3つがそろえば無敵です。あなたも同じです。
小さく始めて、早く成長する
3つすべてを一度に極める必要はありません。少しHTMLを学ぶだけでも、実際のページを作れます。一歩進むたびに新しい力が身につきます。
3つのツールを習得！ 🚀
フロントエンドのツールキット全体に出会いました。大変な部分は終わりました！次は、フロントエンド開発者としてどんな exciting な未来が待っているのかを見ていきます。
クイックチェック
簡単な確認です！Webページの構造を担うツールはどれでしょうか？
よくある質問
「フロントエンドを支える3つの技術」レッスンは無料ですか？
はい。「フロントエンドを支える3つの技術」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全3レッスンが含まれています。
「フロントエンドを支える3つの技術」で何を学びますか？
HTML、CSS、JavaScriptがそれぞれ構造、スタイル、動作という固有の役割を担い、組み合わさってWebサイトを作る仕組みを学びます。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。
「フロントエンドを支える3つの技術」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- フロントエンド開発とは何ですか
- フロントエンドを支える3つの技術
- フロントエンド開発者としての将来