広める価値のあるコンテンツと思ったら、シェアお願いします!☺️

【CSS】本を紹介するときに使いたい!きれいなデザイン!(表付)

book-introduction-css

左に写真、右に説明文を載せて本を紹介したい!

という方に向けて、自作したHTML & CSSを載せておきます♪

positionで位置を調整するのではなく、flexを使い調整してみました。

「タイトル名がダサいな」なんて決して思わないように!

本を紹介するときに使いたいデザイン

こちらはレスポンシブ対応です。

1.本の詳細デザイン

アマゾンの本を引っ張ってくる場合は、上記HTML欄にある<img>を削除して、紹介したい本のURLを<section class=”book-image”></section>の間に貼り付けます!

「タイトル上の青色ボーダーがダサいな」

と思う方がいらっしゃれば、CSS側にある「th.t_top」のボーダー色を変更してください!

逆に「ライフカクメイ上にあるボーダがダサいな」

と思うなら、「td.t_top」のボーダー色を変更してください!

表だけを使いたい方は、HTML内にある

<table class=”book-explanation-table”></table>

とCSS内にある

.book-explanation-table{}

だけをコピーしてお使いください。

Tableの下にボタンを設置すれば、さらに良いデザインになるかと思います!

2.価格推しのデザイン!

こちらは情報量が少ないです。

ボタン色には、オレンジのグラデーションが使われています。

HTML内にあるFontAwsomeのリンクは、必要であればコピペしてください♪

「購入する」の左側にあるアイコンも変えてみると良いかもしれません!

3.1と2の組み合わせ!

ただ、ボタンを付け加えただけです。

コードが冗長になってしまいました。

全体にボーダーを付け加えて、情報を一括りにするのも良いかもしれません♪

まとめ

以上、本を紹介したいときに使うCSSをご紹介させていただきました。

プロのコーダーではないので、コードが汚いかもしれません。

今回ご紹介したコードでわからないことがあれば、お気軽にコメントください♪

できる範囲でお答えいたします!

こちらの記事もオススメです!

最強すぎる商用無料の写真サイト11選!

最強すぎる商用無料のイラストサイト11選!

広める価値のあるコンテンツと思ったら、シェアお願いします!☺️