ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/12/07
NEW
【週刊ドットインストール】 レッスン制作の進捗、代表のひとりごと
PREMIUM
JavaScriptでタブメニューを作ろう
JavaScriptでタブメニューを作る方法を学んでいきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
JavaScript入門 基礎文法編
(全27回)
PREMIUM
PREMIUM
0%
JavaScript入門 関数編
(全12回)
PREMIUM
PREMIUM
0%
JavaScript入門 データ構造編
(全27回)
PREMIUM
PREMIUM
0%
JavaScript入門 DOM編
(全22回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(10)
質問と回答
(41)
未完了
#01 タブメニューを作ってみよう
(01:51)
無料公開中
完成版の確認
index.htmlの作成
未完了
#02 学習の準備を整えよう
(02:00)
無料公開中
styles.css
main.jsの作成
未完了
#03 必要な要素を揃えよう
(02:36)
無料公開中
.containerのマークアップ
.menuのマークアップ
.contentのマークアップ
未完了
#04 全体のスタイルを整えよう
(02:36)
bodyのスタイリング
.containerのスタイリング
.menuのスタイリング
未完了
#05 選択されたメニューのスタイルを変えよう
(02:42)
.contentのスタイリング
displayプロパティの操作
未完了
#06 細かいスタイルを整えよう
(01:56)
hover疑似クラス
not擬似クラス
未完了
#07 メニューにイベントを設定しよう
(02:48)
イベントの設定
preventDefault()
未完了
#08 activeクラスを付け替えよう
(01:54)
activeクラスの付け替え
未完了
#09 タブの内容を切り替えよう
(01:42)
contentからのactiveクラスの削除
未完了
#10 タブメニューを完成させよう
(02:24)
contentへのactiveクラスの付与
data属性の利用
#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 選択されたメニューのスタイルを変えよう
.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 タブメニューを完成させよう
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日
リリース情報(note)
今週はVS Codeに対応した『JavaScriptでタブメニューを作ろう』をリリースしました。
関連キーワード
基礎講座
(386)
初心者向け
(379)
HTML5
(32)
CSS3
(20)
JavaScript (ES2017)
(36)
ウェブサイト構築
(155)
詳細情報
最終更新日
2020年3月17日
バージョン情報
Chrome80 / Visual Studio Code 1.42.1