※ これは 2020/04/10 時点の font awasome v5.13.0 の情報です
最新版では動作が異なる可能性がありますのでご注意ください
今回は CSS で下記のような囲み枠を描画してみます
ねこは飼い主が思っている以上に人が好き
スポンサードリンク
超基本的な構文ですが border
を下記のように使うだけでできました
<div class="box"> <p>ねこは飼い主が思っている以上に人が好き</p> </div>
CSS はこんな感じ
.box { padding: 0.25em 1.25em; margin: 2em 0; font-weight: bold; border: solid 3px #000000; }
下記のように内部を塗りつぶす場合
ねこは飼い主が思っている以上に人が好き
css を次のように書き換えればできました
.box { padding: 0.25em 1.25em; margin: 2em 0; font-weight: bold; background: #ffcccc; }
border
を background
に変えただけ
さらに角を丸くする場合
ねこは飼い主が思っている以上に人が好き
border-radius
を追記すればできました
.box { padding: 0.25em 1.25em; margin: 2em 0; font-weight: bold; border: solid 3px #000000; border-radius: 1em; }
画像を使わなければ通信量を削減できるので、可能な限り囲み枠は css で記述したいですね