MENU
CLOSE
システム Edit : 2021.02.08 Update : 2024.11.07

cssでタブ型をつくってみる

Contents
  1. HTML
  2. css
  3. js
先日、ノートの付箋?のようなタブの形をcssで作る機会があったので、作り方をまとめます📝 切り替え方法はjsガチガチで書いてますが、その時々に合わせて色々やり方があると思うので、もっとスマートに作るのがいいかと思います。 作ろうとしているタブは、👇のようなデザインで、タブを切り替えると内容が変わるようなものです。

 

MENU01

MENU02

  • 白飯
  • あさりの味噌汁
  • 鮭フレーク
  • きんぴらごぼう
  • 食パン
  • コーンスープ
  • イチゴジャム
  • 目玉焼き
 
Contents
  1. HTML
  2. css
  3. js

HTML


MENU01

MENU02

  • 白飯
  • あさりの味噌汁
  • 鮭フレーク
  • きんぴらごぼう
  • 食パン
  • コーンスープ
  • イチゴジャム
  • 目玉焼き
 

css

 

js

  以上です!

Miki Kohinata

大学時代、将来独立することを決めエンジニアの道へ。就職したIT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。