강의

멘토링

커뮤니티

Programming

/

Front-end

Vanilla JS ベース UIコンポーネント - タブメニューの作成

一つのウェブページを構成するには、部分部分の各コンポーネントを作れる必要があります。ピュアコーディングだけでUIコンポーネントを作ってみましょう。HTML、CSS、JavaScriptを使える方におすすめです。

8名 が受講中です。

難易度 初級

受講期間 無制限

  • codingghost2025
HTML/CSS
HTML/CSS
vanilla-javascript
vanilla-javascript
HTML/CSS
HTML/CSS
vanilla-javascript
vanilla-javascript

受講後に得られること

  • HTML

  • CSS

  • JavaScript

Vanila JSベースのUIコンポーネントシリーズ

HTML、CSS、Vanila JavascriptでWebページに必要なコンポーネントをコーディングします。

  • 基本に忠実でなければ実力が増えることがあります。

  • Figmaデザインファイルを受け取っても、同じようにレイアウトとインタラクションをコーディングできるはずです。

このようなことを学びます。

タブメニューの作成

HTMLマークアップからCSSスタイリングまで、1つ1つゆっくりと続きます。この時、気にするべき部分とアクセシビリティを考慮した部分まで実務者が指導します。
aria-controls、aria-selected について学びます。

Vanila JS

jQueryや他のjsライブラリを使用せず、純粋なjavascriptでDOM要素を制御して扱うコードを書く

CSS変数をJSで制御する方法を学びます。

受講前の注意

練習環境

  • オペレーティングシステムとバージョン(OS):macOS

  • 使用ツール:VSコード、Chromeブラウザ

  • PC仕様:無関係

学習資料

  • ソースコードファイルをダウンロードできます。

  • ソースコードを含むPDFファイルをダウンロードできます。

選手の知識と注意事項

  • HTML、CSS、Javascript をご利用いただける方がお聞かせください。

  • 質問を残していただければ、答えます。

  • 講義資料の画像とPDFは商業的な配布と使用を禁止しています。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • vanilla JavaScriptでタブメニューを実装してみたい方

  • 一緒にコーディングを試してみたい方

  • HTML, CSS, JavaScriptを活用した例を作ってみたい方

前提知識、
必要でしょうか?

  • HTML

  • CSS

  • JavaScript

こんにちは
です。

こんにちは。私はプロダクトデザインとコーディングを共に行っている個人事業主のフリーランスです。
数多くのウェブサービスやハイブリッドアプリ、ネイティブアプリを企画からローンチまで手掛けてきました。
数年前に済州島に移住して拠点を構え、これまで休むことなく走り続けてきた自分にひと時の休息を与えつつ、これまでオン・オフラインで講義してきたことや積み上げてきた知識を、一つひとつ足跡として残しています。

講義を作りながら、ゆっくりと…分かりやすいものであってほしい。「あ、これならできそう」と思ってもらえることを常に忘れないようにしています。また、例題を作りながら達成感を感じてもらうことも、私の計画の一部です ^^:: 今日ももう一行コーディングしてから眠りにつきましょう。皆さん、応援しています!

2025 独学で進めるコーディング自習書「コーディング・レベルアップ」著者
YouTube「コーディングゴースト」を運営しています。
YouTubeチャンネル:https://www.youtube.com/@codingghost941
Instagram:@blackcrown.design.studio
フリーランス・インスタ漫画「イランイ」:@ejey.irangi

カリキュラム

全体

10件 ∙ (1時間 15分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

¥1,744

似ている講座

同じ分野の他の講座を見てみましょう!