CSS 記法まとめ

役に立つ記法をここに書き溜めていく。

囲みデザインサンプル

[HTML]

<div class="box">
    <p>TEST</p>
</div>

[CSS]

.box {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #ffffff; /*文字色*/
    background: #007bff; /* 背景色 */
    border: solid 3px #007bff; /* 枠線 */
    border-radius: 5px; /* 角の丸み */
    display: inline-block; /* 枠を文字の長さに調整する */
}
.box p {
    margin: 0px; 
    padding: 5px;
}

ちなみにhtml上で上書きしたい場合はstyleを使って下記のように書くコトもできる。

<p style="color:#ffffff;background:#007bff;padding:7px;border:solid 3px #007bff;border-radius:5px;display:inline-block">TEST</p>

下記のサイトを参考にした
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
【CSS】borderの長さを調整する方法3つ：文字に応じて可変など