ドットインストール - 3分動画でマスターできるプログラミング学習サービス

PREMIUM

JavaScriptでタブメニューを作ろう

JavaScriptでタブメニューを作る方法を学んでいきます。
0%

このレッスンをはじめる前に

このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。

JavaScript入門 基礎文法編

JavaScript入門 基礎文法編 (全27回) PREMIUM

PREMIUM
0%
JavaScript入門 関数編

JavaScript入門 関数編 (全12回) PREMIUM

PREMIUM
0%
JavaScript入門 データ構造編

JavaScript入門 データ構造編 (全27回) PREMIUM

PREMIUM
0%
JavaScript入門 DOM編

JavaScript入門 DOM編 (全22回) PREMIUM

PREMIUM
0%
#03 必要な要素を揃えよう
なぜページ遷移をしないのに a タグを使っているのですか？
2022年3月27日
<section> の中にそのまま文字を書いていますが、文字を <p></p> で囲う必要はないのですか？
2022年1月27日
href="#" は何のために書くのですか？
2022年1月27日
#04 全体のスタイルを整えよう
.menu li a は display: flex; での li 要素を横並びにしているのに合わせて、inline-block を使用しているのですか？
2023年6月14日
#05 選択されたメニューのスタイルを変えよう
.menu li a.activeでaと.activeの間に半角スペースをつけないのはなぜですか？
2024年2月9日
.content に display: none; が適用されないのはなぜですか？
2022年2月28日
li タグではなく a タグに対してスタイルをつけるのはなぜですか？
2022年1月27日
display: block の働きについて教えて下さい
2022年1月27日
.content.activeの挙動がわかりません
2022年1月27日
display: blockで他の文章が消えるのはなぜですか？
2022年1月27日
セレクタの書き方で混乱しています
2022年1月27日
#06 細かいスタイルを整えよう
transitionは変化前、変化後のどちらに書いても問題ないのでしょうか？
2022年3月24日
CSS プロパティの順番はどのように決めていますか？
2022年1月27日
:not(.active) の .active とはどのような状態のことをさすのですか？
2022年1月27日
liに直接スタイルを指定しても適用されないのはなぜですか？
2022年1月27日
contentの高さでmin-heightにしているのはなぜですか？
2022年1月27日
「.menu li a:not(.active):hover」を書き換えてみたのですが...
2022年1月27日
CSSの書き方がいまいち理解できていません
2022年1月27日
transitionにopacityをつける必要がありますか？
2022年1月27日
#07 メニューにイベントを設定しよう
addEventListener() を li ではなく a に指定したのはなぜですか？
2022年11月24日
document.querySelectorAll('.menu li a'); ではなぜ 3 つの要素をそれぞれ全て取得する必要があるのでしょうか？
2022年9月29日
イベントオブジェクトとは何でいつ使用されるのですか？
2022年9月29日
preventDefault を使うのに、なぜ a タグをつける必要があるのですか？
2022年1月27日
コード中、ドットで結んでいる関係は何なのでしょうか？
2022年1月27日
イベントオブジェクトがいまいちわかりません
2022年1月27日
ページ遷移のキャンセルについて
2022年1月27日
#08 activeクラスを付け替えよう
10 行目と 13 行目がなぜ字下げされるかわかりません
2022年1月27日
クラスの付け外し処理に if 文を使う場合と使わない場合の違いはなんですか？
2022年1月27日
forEach の仕組みがよくわかりません
2022年1月27日
forEachを使う理由を教えて下さい
2022年1月27日
activeクラスが動作する仕組みがわかりません....
2022年1月27日
#09 タブの内容を切り替えよう
content.forEach() の処理を記述する場所を教えてください
2022年1月27日
#10 タブメニューを完成させよう
clickedItem.dataset.id はどこから出てきたのですか？
2024年2月23日
document.getElementById(clickedItem.dataset.id) の括弧内を ' ' で囲まないのはなぜですか？
2022年6月9日
a と section の紐づけについて教えて下さい。
2022年6月5日
HTML 、CSS 、JS を組み合わせた書き方がなかなか覚えられません
2022年1月27日
カスタムデータ属性はどんな時に使うのか？
2022年1月27日
activeクラスをつける処理がよくわかりません
2022年1月27日
clickedItemの挙動がわかりません
2022年1月27日
clickedItem.dataset.idの内容がよくわかりません
2022年1月27日
カスタムデータ属性はquerySelectorで取得できますか？
2022年1月27日
タブメニューを中央に配置したい
2022年1月27日
「document.getElementById(clickedItem.dataset.id)」の動きがわかりません
2022年1月27日

サービスメニュー

ご利用にあたって

プログラミング勉強会

ソーシャルメディア

更新情報

Copyright © 2011-2024 dotinstall.com. All Rights Reserved.