プログラミング学習ログ

WEBアプリケーション個人開発を目指す32歳公務員

#24 Web版読書ログサービスの作成 ~ 読書ログの一覧表示(デザイン化)~

f:id:kshinya-tech:20220307061956p:plain

前回作成した読書ログ一覧ページにBootstrapでデザインをあてました。


↓デザインをあてた後のページ f:id:kshinya-tech:20220307062059p:plain

参照したサイト一覧

Cards

getbootstrap.jp

文字の装飾

v4.bootstrap-guide.com

関連の過去記事

shinya-tech.com

書いたコード

<a href="new.php" class="btn btn-primary mb-4">読書ログを登録する</a>
<main>
    <?php if (count($reviews) > 0) : ?>
        <?php foreach ($reviews as $review) : ?>
            <section class="card shadow-sm mb-3">
                <div class="card-body">
                    <h2 class="title h4">
                        <?php echo escape($review['title']); ?>
                    </h2>
                    <div class="small mb-3">
                        <?php echo escape($review['author']); ?>&nbsp;/&nbsp;
                        <?php echo escape($review['status']); ?>&nbsp;/&nbsp;
                        <?php echo escape($review['score']); ?></div>
                    <p>
                        <?php echo nl2br(escape($review['summary'])); ?>
                    </p>
                </div>
            </section>
        <?php endforeach; ?>
    <?php else : ?>
        <p>読書情報が登録されていません。</p>
    <?php endif; ?>
</main>