JavaScriptを使ってタブメニューを作っていきます。
- 全体像の確認
- ファイルの作成
全体像の確認
・まずタブメニューについてですがタブメニューとはタブ形状のメニューをホバーしたりクリックすることで中身のコンテンツが切り替わるUIのことです。
・料金メニューやヘッダーメニューをホバーやクリックすることでその下などに内容が出てくるメニューになります。大枠のメニューは見せておきたいけど省スペースで情報を制限したいときなどによく使われます。
・タブメニューはWEBページでよく見られる形で作り、内容もサイトの概要、サービス内容、お問い合わせをクリックするとそのコンテンツの中身が所定の場所で説明してくれるような形にします。説明内容は適当に書いていきます。
・今回もChromeとVS Codeを使ってコードを書いていきます。
・ChromeとVS Codeがわからないという方はこちらの記事もご確認ください。
ファイルの作成
・ChromeとVS Codeが準備できたら早速ファイルを作っていきます。
・いつもと同様にVS Codeでファイル作成をしていきます。VS Codeを開いたら新規フォルダを押してフォルダを作成します。名前はTabMenuとしておきましょう。
・開くと押すとプロジェクトフォルダが作成されるのでこの中にHTMLのファイルを作っていきます。
・ファイル作成のアイコンをクリックしてファイル名をindex.htmlと書いていきます。これは書式が決まっているので必ずindex.htmlと名前を付けるようにしてください。エンターを押すとファイルができるのでその中にHTMLを書いていきましょう。
・HTMLの中身はまず文書宣言をしてその後html要素を配置していきます。html要素の中にhead要素、続いてbody要素を書いていきます。
・head要素の中にはmeteタグで文字コードを設定したり、タイトルを書いたりしてファイルの情報部分を書いていきましょう。
・こんな感じになります。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>TabMenu</title>
</head>
<body>
</body>
</html>
・body要素の中身は長くなりそうなのでまた今度書いていきますね。
