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

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

Пікірлер: 15

  • @Pentagon5-ch
    @Pentagon5-ch8 ай бұрын

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

  • @python3343
    @python33432 жыл бұрын

    いつもわかりやすい!

  • @si-qg4dc
    @si-qg4dc Жыл бұрын

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

  • @soci0926
    @soci09262 жыл бұрын

    投稿ペースが早い!!

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    2 жыл бұрын

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

  • @itsKatzen
    @itsKatzen2 жыл бұрын

    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!

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    2 жыл бұрын

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

  • @Wi_antyobi
    @Wi_antyobi Жыл бұрын

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

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    Жыл бұрын

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

  • @syurahito9441
    @syurahito94412 жыл бұрын

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

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    2 жыл бұрын

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

  • @alzkaai
    @alzkaai2 жыл бұрын

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

  • @tume1124

    @tume1124

    2 жыл бұрын

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

  • @alzkaai

    @alzkaai

    2 жыл бұрын

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

  • @sinnito4488
    @sinnito44883 ай бұрын

    いきすぎパレード!

Келесі