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

Поделиться
HTML-код
  • Опубликовано: 13 дек 2021
  • #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-ch 9 месяцев назад +2

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

  • @python3343
    @python3343 2 года назад +2

    いつもわかりやすい!

  • @si-qg4dc
    @si-qg4dc Год назад +2

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

  • @itsKatzen
    @itsKatzen 2 года назад +2

    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 года назад +2

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

  • @soci0926
    @soci0926 2 года назад +1

    投稿ペースが早い!!

    • @user-hl9uv6cv7k
      @user-hl9uv6cv7k  2 года назад

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

  • @Wi_antyobi
    @Wi_antyobi Год назад +1

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

    • @user-hl9uv6cv7k
      @user-hl9uv6cv7k  Год назад

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

  • @syurahito9441
    @syurahito9441 2 года назад +1

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

    • @user-hl9uv6cv7k
      @user-hl9uv6cv7k  2 года назад

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

  • @alzkaai
    @alzkaai 2 года назад +1

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

    • @tume1124
      @tume1124 2 года назад +1

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

    • @alzkaai
      @alzkaai 2 года назад

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

  • @sinnito4488
    @sinnito4488 5 месяцев назад +1

    いきすぎパレード!