概要の説明とHTMLファイルの作成をしていきます。
- 概要の説明
- index.htmlの作成
- viewportの設定
概要の説明
・今回はハンバーガーメニューの作り方について勉強していきましょう。
・いろいろな作り方がありますが今回は今まで学んできたHTMLとCSS、JavaScriptでハンバーガーメニューを作っていきます。
・まずハンバーガーメニューとはアイコンをクリックするとメニューが現れる仕組みです。
・つまり携帯などの画面が狭いデバイスでトップのメニューが画面を占拠してしまわないように通常は右上もしくは左上にアイコンとしてまとめておいてメニューを開きたいときにクリックすることでメニューが一覧で出てくるようにするためのUIです。
・これを使うことで狭い画面でも広く使うことができなおかつアニメーションがあることによりおしゃれで使い勝手のいいWEBページを作ることができます。
・詳しい動きは上記のGIF画像をクリックしてみてください。
・では今回もいつもと同じようにブラウザはChrome, エディターはVS Codeで作っていきましょう。
index.htmlの作成
・まずVS Codeでopen Folderから新しいフォルダーを作っていきましょう。フォルダー名は適当にHamburgerMenuにしておきましょう。これで作業用フォルダーが設定されますのでここにファイルを作っていきましょう。
・HTMLファイルを作っていきたいのでindex.htmlとファイル名を書いてその中にHTML5で内容を書いていきましょう。
・index.htmlファイルの作り方についてはこちらの記事で詳しく説明しています。
・index.htmlの中身を書いていきます。
・まず文書宣言をしてhtml要素を配置します。その中にheadタグとbodyタグを入れてあげます。
・headタグの中身は文字コードやタイトル、CSSへのリンクなど。そして今回は小さい画面のスマートフォンのときにハンバーガーメニューを出すように設定したいのでviewportを設定しておきましょう。
viewportの設定
・viewportはmetaタグで書いていきます。
・name属性をviewportにしてあげてcontent属性をデバイスの幅に合わせるように設定してあげます。
・こんな感じで書いておきましょう。
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
・あとは入力していくコードを画面を確認するためにVS Codeのindex.htmlのタブをブラウザのタブバーにドラッグ＆ドロップをしてあげると現在書いているコードをブラウザで確認することができます。
・以降はブラウザの更新をしてあげると都度最新の内容に刷新されます。
