フリーボックス(背景色・角丸なし)

概要

ワンポイントで使いたいときに、文章やリストなどに囲み枠 (背景色) をつけることができます。

デモ

見出し

Q. 質問などを記入

A. 回答を記入回答を記入回答を記入

長文、一文などの文章に活用

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

テキストが入ります。テキストが入ります。テキストが入ります。

リストなどに活用

• リンク名：https://xxx.com/
• リンク名：https://xxx.com/

番号付きリストなどに活用

1. リンク名：https://xxx.com/
2. リンク名：https://xxx.com/

html/css

See the Pen フリーボックス(背景色・角丸なし) by kzwmk (@kzwmk) on CodePen.

カスタマイズ

見出しの色を変更する

見出し

.freebox-wrapper .heading-type-belt {
    background: #任意の色を入れる;
}

背景色を変更する

　

.freebox-wrapper.style-bg {
    background: #任意の色を入れる;
}