タブメニューを学ぼう

タブメニューとは、ボタンとコンテンツ部分が対応しており、ボタンを押すとコンテンツが切り替わるようなメニューのことです。

タブメニューとgoogleで検索してみると、さまざまな実装方法やデザインが出てきて目移りすると思います。
ただ、少なくとも実装方法にいくつもバリエーションを持つ必要はないと思っています。CSSの部分だけバリエーションを持ち、その他の部分はなるべくシンプルな状態で頭に入れておきましょう。 

豆知識

チェックボックス(input type=”checkbox”)を用いて実装する例も見受けられますが、inputタグはあくまでformタグの一部品です。タブメニューのために使うのはやや不適切だと考えています。

そんなタブメニューを学べる記事をまとめました。

セカヤサブログ

URL:https://itokoba.com/archives/1761

基本の作り方はこれを読んで覚えましょう。

記事内で書かれている、「htmlはデータの構造」「cssはその見せ方を作るもの」「jsはクラスの付け替えによってその2つを操作するもの」と言う切り分け方は非常に重要です。

難易度:★★☆

kodocode

URL:https://kodocode.net/design-css-tab/

こちらは実装方法というより、いろいろなパターンのタブメニューを知ってバリエーションを持つために読んでおきましょう。実装は前者の記事の応用でできるはずです。

難易度:★★☆

Leave a Reply

Your email address will not be published.