コピペで一撃！箇条書きリストのデザイン

2022年7月27日

記事の執筆をしていると、箇条書きをすることがあると思います。
多数の品目や数字などを箇条書きに書き出すことをリストといいます。

ただシンプルに箇条書きするだけでなく、見やすくて素敵なデザインにしてみませんか。
この記事ではリストのデザインを整えるリストにCSSをご紹介します。

グレーボックスデザイン

以下のようなグレーのボックスデザインのリストを作ります。

「style.css」に以下を記述してください。

リストを表示したい場所に以下のhtmlを記述します。

<li>内容</li>を増やしたり減らしたりして調節してください。また、”内容”を任意の内容に変更してください。
「AddQuicktag」に上記htmlを登録しておけば簡単に挿入できるようになります。

以下のようなピンクのボックスデザインのリストを作ります。

「style.css」に以下を記述してください。

リストを表示したい場所に以下のhtmlを記述します。

以下のようなブルーのボックスデザインのリストを作ります。

まず、以下の画像を保存しimagesフォルダにアップロードしてください。

シェブロンマーク

「style.css」に以下を記述してください。

リストを表示したい場所に以下のhtmlを記述します。

完成です！