CSS で囲み枠を描く

※ これは 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 で記述したいですね