HTMLとCSSでオシャレなナビゲーションサイドバーの作り方 - HTML/CSS/Javascript -

#HTML #CSS #Javascript #サイドバー #ナビゲーションバー #ウェブサイト #チュートリアル #入門
❤️ チャンネル登録： / @programming_tutorial_...
＼ShinCode_Campでプログラミングを楽しもう／
幅広いプログラミングの知識を得るための動画プラットフォーム
🎁僕が作成したUdemy講座が見放題
🎁分からない箇所は質問し放題
🎁フルスタック技術が学べる
🎁コミュニティ機能付き
🎁いつでも解約可能
↓↓↓↓↓
code-s-school-...
★今回のソースコード：github.com/Shi...
今回はHTMLとCSSとvanillaJavascriptを使ってオシャレなナビゲーションサイドバーを作ってみました。クリックするとその箇所だけ背景色が加わり、さらにボーダーに丸みをつけてお洒落さを表現しています。addとremove関数を上手く使いこなしてみましょう。
この動画が良いと思ったらチャンネル登録よろしくお願いします。
バグや分からないことがあればコメント欄、またはDMでご質問ください。
★私のTwitter： / shin_engineer
❤️React×TrelloチュートリアルのUdemy92%割引クーポン：shincode.info/2...
❤️Three.js入門のUdemy94%割引クーポン：
shincode.info/2...
❤️React×FirebaseでTwitterクローン構築講座Udemy94%割引クーポン：
shincode.info/2...

[@Pentagon5-ch]

めちゃくちゃやりたかったことをやりやすいペースでわかりやすく教えてくれるところが好きです！

[@miiii2207]

今回も有難うございます！時々、おじいちゃんみたいにむせてるの可愛いですねlololo

[@python3343]

いつもわかりやすい！

[@si-qg4dc]

とても参考になりました！ソースコードを参考にプルダウン形式に変更してみようと思っていますが、なかなかうまくできません。 プルダウン形式に変更する際の解説動画も出たりしませんか？😅お願いします🙇

[@soci0926]

投稿ペースが早い！！

[@programming_tutorial_youtube]

コメントありがとうございます。 なるべく時間がある内に投稿しようかなと笑

[@hitoridatinao]

Idk but I easily understand this Japanese tutorial video rather than other English tutorial even i when don't understand japanese pretty much Nice video!

[@programming_tutorial_youtube]

Thanks CHIN PONYA. Your words make me very happy:)

[@hirofuminakajo]

const list = document.querySelectorAll(".list"); function activeLink() { list.forEach((item) => { item.classList.remove("active"); }) this.classList.add("active"); } list.forEach((item) => { item.addEventListener("click", activeLink); }); 上記のコードを書いたのですが、リストをクリックしてもクリックしたところの色が変わることがなく、それどころか勝手に上に戻る始末です。どういう事でしょうか？

[@syurahito9441]

実際にサイドバーを押した時にそれぞれ別の要素を表示させたい場合は、どのようなコードになるのでしょうか？ ボタンを押した際に要素を切り替えるサンプルコードとかがあれば教えていただけないでしょうか。

[@programming_tutorial_youtube]

react routerのドキュメントを読んでみてください。ヒントが書かれているはずです。Reactのルーティングについても今後の動画で出すかもしれません。 knowbody.github.io/react-router-docs/

[@Wi_antyobi]

すごく参考になりました！ こちらのサイドバーを固定して表示させたいのですが、どのようなコードになるか教えていただけないでしょうか…？

[@programming_tutorial_youtube]

position: fixed;等でできないでしょうか、、

[@alzkaai]

ナビゲーションバーはいいんですが真ん中に文章を表示させるにはどうすればいいですか?

[@tume1124]

子要素の文字のaタグにtext-align center:ですかね。aline-item :center 聞いてるならdisplay: flex;でjustify -content: centerでできるかもしれませんね。よくは知らないですけど場合によってはmargin: 0 autoかもしれないですね。

[@alzkaai]

@@tume1124 ありがとうございます!

[@sinnito4488]

いきすぎパレード！