フリーボックス(ドット線・角丸)

概要

枠のスタイルのみ用意しているので、中身は自由です。

デモ

見出し

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-line-dot {
    border: dotted 3px #任意の色を入れる;
}