デモ
See the Pen tab2 by logsuke (@design-list) on CodePen.
コード
<!-- Boxicons headタグ内へ -->
<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
<main>
<section id="section1" class="section">
<div id="tabMenu">
<input type="radio" name="tabMenu" id="tab1" checked>
<input type="radio" name="tabMenu" id="tab2">
<input type="radio" name="tabMenu" id="tab3">
<input type="radio" name="tabMenu" id="tab4">
<div class="tabs">
<label for="tab1" class="tab1"><i class='bx bx-happy-alt'></i>tab 1</label>
<label for="tab2" class="tab2"><i class='bx bx-dizzy'></i>tab 2</label>
<label for="tab3" class="tab3"><i class='bx bx-angry'></i>tab 3</label>
<label for="tab4" class="tab4"><i class='bx bx-cool'></i>tab 4</label>
</div>
<div class="content">
<p class="tab1">content1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam aperiam
veniam illo repellat ipsum molestiae!</p>
<p class="tab2"> content2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam aperiam
veniam illo repellat ipsum molestiae! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas, eveniet?</p>
<p class="tab3">content3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam aperiam
veniam illo repellat ipsum molestiae!</p>
<p class="tab4">content4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam aperiam
veniam illo repellat ipsum molestiae! Lorem ipsum dolor sit amet.</p>
</div>
</div>
</section>
</main>
/*=== Base ===*/
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
:root {
--nav-height: 8rem;
--max-width: 1024px;
--container-padding: 0 4rem;
--gap: 2rem;
--bg-color: rgb(240, 240, 240);
--first-color: rgb(172, 245, 255);
}
/*=== Font ratio ===*/
html {
scroll-behavior: smooth;
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.section {
width: var(--max-width);
margin: 0 auto;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #ccc;
}
/* tabs */
#tabMenu {
background: #fff;
width: 500px;
border-radius: 1rem;
padding: 2rem;
display: flex;
}
#tabMenu .tabs {
display: flex;
flex-direction: column;
margin: 0 1rem;
gap: 2rem;
flex-basis: 100px;
flex-shrink: 0;
}
#tabMenu .tabs label {
display: flex;
gap: 1rem;
align-items: center;
padding: .5rem 1rem;
border-radius: .5rem;
cursor: pointer;
border: 1px solid rgb(126, 126, 126);
}
#tabMenu #tab1:checked ~ .tabs label.tab1,
#tabMenu #tab2:checked ~ .tabs label.tab2,
#tabMenu #tab3:checked ~ .tabs label.tab3,
#tabMenu #tab4:checked ~ .tabs label.tab4 {
background: #ccc;
}
#tabMenu input[name="tabMenu"] {
display: none;
}
#tabMenu .content {
padding: 0 1rem;
}
#tabMenu .content p {
display: none;
}
#tabMenu #tab1:checked ~ .content p.tab1,
#tabMenu #tab2:checked ~ .content p.tab2,
#tabMenu #tab3:checked ~ .content p.tab3,
#tabMenu #tab4:checked ~ .content p.tab4 {
display: block;
}