デイトラweb制作上級編パターン2　 DAY31~44⑫

<div class="p-staff__intro-items">
    <!-- アイテム1個目 -->
    <div class="p-staff__intro-item">
        <div class="p-staff__intro-image"><img src="./img/staff/staff1.png" alt=""></div>
        <div class="p-staff__intro-name">
            <p>歯科衛生士</p>
            <p>鈴木 太郎</p>
        </div>
        <table class="p-staff__intro-table">
            <tbody>
                <tr>
                    <th>出身地</th>
                    <td>北海道</td>
                </tr>
                <tr>
                    <th>趣味</th>
                    <td>スキー、料理</td>
                </tr>
                <tr>
                    <th>好きな食べ物</th>
                    <td>お寿司、うなぎ</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- アイテム2個目 -->
    ・
    ・
    ・
</div>

.p-staff__intro-items {
    display: flex;
    flex-wrap: wrap;
}

.p-staff__intro-item {
    width: calc(33.3% - 80px * 2 / 3);

    @include mq('pc') {

        &:not(:nth-child(3n + 1)) {
            margin-left: 80px;
        }

        &:nth-child(n + 4) {
            margin-top: 60px;
        }
    }

    @include mq('tab') {
        width: calc(33.3% - 20px * 2 / 3);

        &:not(:nth-child(3n + 1)) {
            margin-left: 20px;
        }

        &:nth-child(n + 4) {
            margin-top: 30px;
        }
    }

    @include mq('sp') {
        width: 100%;

        &:not(:nth-child(2n + 1)) {
            margin-left: 0;
        }

        &:not(:nth-child(3n + 1)) {
            margin-left: 0;
        }

        &:not(:first-child) {
            margin-top: 50px;
        }
    }
}

.p-staff__intro-image {
    margin-bottom: 14px;
    padding-top: 100%;
    border-radius: 20px;
    overflow: hidden;
    position: relative;

    img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        object-fit: cover;
        width: 100%;
    }
}

.p-staff__intro-name {
    margin-bottom: 14px;
    display: flex;
    justify-content: center;
    align-items: center;

    p {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 1.44px;

        &:first-child {
            margin-right: 12px;
            font-size: 12px;
            letter-spacing: 0.96px;
        }
    }
}

.p-staff__intro-table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;

    th,
    td {
        padding: 15px 20px;
        border: 1px solid #fff;
    }

    th {
        width: 50%;
        text-align-last: left;
        background: #DFF1FD;

        @include mq('sp') {
            width: 41.791%;
        }
    }

    td {
        width: 50%;

        @include mq('sp') {
            width: 100% - 41.791%;
        }
    }
}

<div class="p-staff__intro-items">
    <?php
    $args = array(
        'posts_per_page' => -1, //全記事を出力
        'post_type' => 'staffs', //カスタム投稿のslag
        'order' => 'ASC', //表示する順番
        'tax_query' => array(
            array(
                'taxonomy' => 'occupation', // タクソノミーの指定
                'field' => 'slug',
                'terms' => 'hygienist' // タームを指定
            )
        )

    );

    $the_query = new WP_Query($args);
    if ($the_query->have_posts()) :
    ?>

        <?php
        while ($the_query->have_posts()) : $the_query->the_post();
        ?>

            <div class="p-staff__intro-item">
                <div class="p-staff__intro-image"><?php the_post_thumbnail('large'); ?></div>
                <div class="p-staff__intro-name">
                    <p>歯科衛生士</p>
                    <p><?php the_title(); ?></p>
                </div>
                <table class="p-staff__intro-table">
                    <tbody>
                        <tr>
                            <th>出身地</th>
                            <td><?php the_field('birthplace') ?></td>
                        </tr>
                        <tr>
                            <th>趣味</th>
                            <td><?php the_field('hobby') ?></td>
                        </tr>
                        <tr>
                            <th>好きな食べ物</th>
                            <td><?php the_field('food') ?></td>
                        </tr>
                    </tbody>
                </table>
            </div>

        <?php
        endwhile; ?>

    <?php
        wp_reset_postdata();
    endif; ?>
</div>