タブ（横）

デモ

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;
}