40行で完成！ハンバーガーメニューを作るCSSチュートリアル【HTML/CSS/Sass/JS】
Vložit
- čas přidán 30. 06. 2024
- 今回は、CSS 40行で作るハンバーガーメニューの作り方を紹介しています😆❗️
基本となるベーシックなハンバーガーメニューなので、ぜひこの動画を通して覚えてみてください☺️♪
🔗今回使用したファイル
jsfiddle.net/HIROCODE/6uow5th...
🎥 この動画の構成 🎥
00:00 CSS 40行で作るハンバーガーメニュー
00:36 基本ファイルの作成
01:18 sassをコンパイルするプラグイン「Live Sass Compiler」
02:14 リアルタイムコーディングのプラグイン「Live Server」
03:09 HTMLでベースを作る
03:40 CSSでハンバーガーを作っていく
07:10 JavaScriptでクラスを操作する
10:10 CSSでメニューの表示を作る
11:17 【 今回使う、便利なCSSの書き方 】
13:56 ハンバーガーのアニメーションを作っていく
17:33 完成！
ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇
czcams.com/users/hirocode?sub_c...
⭐️ 自分でWebサイト作ってみませんか？ ⭐️
誰でも、できる！Webサイト公開の流れ！
• 【10分でサイト公開】誰でもできる！Webサ...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム
/ hirocodeweb
🔋 僕が使っている、おすすめのデバイス 🔋
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
【 パソコン 】
✅ Apple Macbook Pro 16inch
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
【 周辺機器 】
✅ Apple AirPods Pro
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
✅ Apple iPad Pro 11インチ
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
✅ なるほどデザイン
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
【 デザイン 思考編 】
✅ 誰のためのデザイン？
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
✅ IAシンキング Web制作者・担当者のためのIA思考術
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
------------------------------
BGM：トーマス大森音楽工房
/ freemusicthomasoomori
------------------------------
#htmlcss #css #javascript
以前質問した際、このような動画を作るとのことでしたが、本当に作っていただいてありがとうございました。しっかりと学習いたします。
おー良かったです😆❗️是非是非参考にしてみてください☺️♪
「このコマンドでこんな効果が得られる」をよく熟知されていますねぇ
感動しました。
画像効果はChatGPTで質問できないですからな。
嬉しいコメントいただきありがとうございます🙇
ChatGPTに全部お任せはまだまだ時間かかりそうですね😆❗️
非常に参考になりました！
１点質問なのですが、aタグにClass付与することはできないのでしょうか？
動画内のコードを元にaタグ内のID,Classへ同一の名前を付与、JSを同じ名前に変更して実行したのですが、DIV要素なら問題ないのですが、付与したいタグがaだとなぜか発火せず…
お時間のある時でもよいのでアドバイスいただけますと助かります！
ありがとうございます😆♪
aタグにhref属性が付与されている場合、ページ遷移してしまいます。ブラウザによっては、href属性なくてもリロードしてしまうケースがあったと思います！
これ系のボタンは基本的にbuttonタグ推奨です❗️
@@hirocode お忙しいところご返信ありがとうございます！リロードしてしまうので付与されないのですね…勉強になります。今後はButton要素にClass付与させたいと思います。ありがとうございました(^o^)
すげえ知らないCSSプロパティがいっぱい出てきてる😂
素のCSS触らない弊害が...笑
reactとかvueとか触るようになったらCSSまで追えなくなってしまったけどHIROさんはWEB制作メインでしょうか？
コメントありがとうございます😆❗️
僕もreactとか触ってた時ありましたが、どこ広げるべきか結構悩ましいですよね💦
おっしゃる通り僕はWeb制作メインで、業務管理システムとかが意外と多いです🤔あとはもっぱらデザインて感じです🙇❗️
@@hirocode
業務管理システムならreactやvueでフロントやりそうですけどそこでは触らないんですね！
デザイン僕もやってますが、そろそろデザインからは離れます😂笑
デザインが一番難しい..笑
これだとメニューが見えてないだけなのよね
メニューにイベントを設定して「この辺にメニューがありそう」ってところをクリックするとイベントが発動しちゃう。
メニューが非表示の時はheightを0にしてoverflow-y:hiddenにすることで不用意にクリックイベントが発動しなくなります。
コメントありがとうございます☺️♪
.menuに対してpointer-events: none;を指定しているので、非表示の時は触れない状態になってます！この指定だとクリックイベントも発火しなくなります😆❗️
便利な指定なのでぜひ使ってみてください✅
@@hirocode ほんとだ。こっちのほうが楽ですね。