【コピペ可】おしゃれなリスト(箇条書き)デザイン15選

Coding

この記事は、HTMLとCSSだけで箇条書きリスト（ul、ol、li）の色々な用途で使用可能なおしゃれなコーティングデザインをいくつか紹介いたします。ブログやHPで要点などをまとめる時にでも使って下さい。

HTMLとCSSをコピペするだけで反映されます。コピペした後に自分なりに編集してオリジナルのデザインにしてみて下さい。

使い方

  1. HTMLをbodyの好きな箇所にコピペ
  2. CSSをスタイルシートにコピペ
注意点

一つ一つに個別でclassを付けてHTMLに記述しています。基本的に被らなそうなクラス名にしていますが、classが重複してしまうとスタイルが崩れる場合があるのでご注意下さい。その場合はclass="この部分“を任意のものにすれば解決します。

WordPressでリストを作る方法（HTML記述コピペあり）については以下の記事から

基本的なリスト

まずは基本的な箇条書きリストの書き方とデザインです。

下記が実際の見え方です。以下省略。

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

下記のHTMLをbody内に、CSSをスタイルシートにコピペして下さい。以下省略

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>

数字

リストマーカー（・）が数字に置き換わります。

  1. リスト1
  2. リスト2
  3. リスト3
  4. リスト4
  5. リスト5

<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ol>

リストマーカー（・）無し

リストマーカー（・）が無くなります。

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

HTML

<ul class="listdesign1">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>

CSS

.listdesign1{
  list-style: none;
}

横並び

横並びになります。

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

HTML

<ul class="listdesign2">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>

CSS

.listdesign2 li{
  display: inline;
}

枠線あり

シンプルに黒い枠線をつけただけ。

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

HTML

<ul class="listdesign3">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>

CSS

.listdesign3 {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: solid 5px #000; /*枠の色と線のタイプを変えたい場合はここ*/
}

2重線

枠線を二重にできます。

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

HTML

<ul class="listdesign4">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>

CSS

.listdesign4 {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 3px #ff0000;　/*枠の色と線のタイプを変えたい場合はここ*/
}

点線枠

枠線を点線にできます。

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

HTML

<ul class="listdesign5">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>

CSS

.listdesign5 {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: dashed 3px #006400;　/*枠の色と線のタイプを変えたい場合はここ*/
}

背景色あり

背景に色をつけれます。

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

HTML

<ul class="listdesign6">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>

CSS

.listdesign6 {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #fff3b8; /*背景の色を変えたい場合はここ*/
    border: double 3px #ea5550;　/*枠の色と線のタイプを変えたい場合はここ*/
}

ボーダー線

上下にボーダーラインができます。

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

HTML

<ul class="listdesign7">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>

CSS

.listdesign7 {
    border-top: solid #000 1px;/*上のボーダー*/
    border-bottom: solid #000 1px;/*下のボーダー*/
    padding: 0.5em 0 0.5em 1.5em;
}

リストマーカーをチェックに変更（アイコン使用）

FontAwesomeのチェックアイコンを使ってリストマーカーを変更。

  • リスト1
  • リスト2
  • リスト3
  • リスト4

HTML

<ul class="fa-ul">
  <li><i class="fa fa-check fa-li"></I>リスト1</li>
  <li><i class="fa fa-check fa-li"></I>リスト2</li>
  <li><i class="fa fa-check fa-li"></I>リスト3</li>
  <li><i class="fa fa-check fa-li"></I>リスト4</li>
</ul>

CSS

/*無し*/

簡単シンプルデザイン

次にシンプルで簡単かつおしゃれなデザインの箇条書きリストです。

影付きで立体的

影付きで立体的なリストボックスです。

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

HTML

<ul class="listdesign8">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>

CSS

.listdesign8 {
    background: #dcdcdc;
    border-radius :8px;
    box-shadow :0px 0px 6px #000000;
}

リストメニュー風（縦）

縦並びに小さい見出しっぽいメニュー風のデザインです。

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

HTML

<ul class="listdesign9">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>

CSS

.listdesign9 {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   margin: 0 auto;
   padding: 0 0 0 0!important;
}

.listdesign9 li{
    color: #2d8fdd;
    border-left: solid 6px #f4b364; /*左側の線の色を変えたい場合はここ*/
    background: #fdf2e3;/*背景色を変えたい場合はここ*/
    margin-bottom: 5px;
    line-height: 1.5;
    padding: 0.5em;
    border-bottom: solid 2px #dadada;
    list-style-type: none;
}

リストメニュー風（横）

横並びにしてボタン風に。ページ内アンカーメニューなどに適してるかも。

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

HTML

<ul class="listdesign10">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>

CSS

.listdesign10 {
   display: flex;
   justify-content: space-around;
   width: 100%;
   padding: 0 0 0 0!important;
   margin: 0 auto;
}

.listdesign10 li{
    border-radius :7px;
    color: #2d8fdd;
    background: #fdf2e3;/*背景色を変えたい場合はここ*/
    margin-bottom: 5px;
    line-height: 0,5;
    padding: 5px;
    list-style-type: none;
}

おしゃれなリスト

次は少しデザインも含んだおしゃれなリストを紹介します。

タグ風

穴あけパンチで先端に穴を開けたタグのようなデザイン。

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

HTML

<ul class="listdesign11" style="padding: 0px;">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>

CSS

.listdesign11 li {
  position: relative;
  list-style-type: none!important;/*ポチ消す*/
  padding: 0.5em 0.5em 0.5em 0.5em;
  margin-bottom: 5px;
  line-height: 1.5;
  background: #dbebf8;
  vertical-align: middle;
  color: #505050;
  border-radius: 15px 0px 0px 15px;/*左側の角丸く*/
}

.listdesign11 li:before{ 
  display:inline-block; 
  vertical-align: middle;
  content:'';
  width:1em;
  height: 1em;
  background: #fff;
  border-radius: 50%;
  margin-right: 8px;
}

ドロップダウンメニュー用

グローバルナビゲーションなどのメニューなどでドロップダウンする仕様のデザインによくある形です。
*下記のメニューはドロップダウンの動きはありません。自身でJSを追加して下さい。

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

HTML

<ul class="listdesign12" style="padding: 0px;">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>

CSS

.listdesign12 {
  position: relative;
}
.listdesign12 li {
  line-height: 1.5;
  padding: 0.5em 0.5em 0.5em 1.7em;
  list-style-type: none!important;
  background: -webkit-linear-gradient(top, skyblue 0%, #5aade6 100%);/*グラデーション*/
  background: linear-gradient(to bottom, skyblue 0%, #5aade6 100%);/*グラデーション*/
  color: #fff;
}

.listdesign12 li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  position: absolute;
  left : 0.5em;
  color: white;
}

スタイリッシュな見た目

立体的な四角形の番号付きリストマーカーを付けたスタイリッシュなリストデザインです。

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

HTML

<ul class="listdesign13">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>

CSS

.listdesign13{
    counter-reset: list-counter;
    list-style: none;
    float:left;
}
.listdesign13 li{
    margin: 1.5em 0;    
}
.listdesign13 li:before{
    content: counter(list-counter);
    counter-increment: list-counter;
    transform: rotate(45deg);
    text-transform: rotate(90deg);
    width: 1em;
    height: 1em;
    padding: .5em;
    margin-right: 1em;
    border: .25em solid #ccc;
    background: #000;
    color: #fff;
    font-family: arial;
    font-weight: bold;
    text-align: center;
    display: inline-block;
}

以上が『【コピペ可】おしゃれなリスト(箇条書き)デザイン15選』でした。

今後気が向けばどんどんいろんなデザインを追加していきます。コーティング作業やブログ運営、HP制作などに適当に使って下さい。（全部丸々コピペでいけます。）

Udemyなら一早く一流のエンジニアになれます。
約10万の中から選べる完全買い切り型のオンライン教材だから無駄なく学べて、尚且つ非常に分かりやすく効率的です。
普段のネットショッピングの様にカートに入れてレジに進む。たったこれだけで一流への一歩を歩めます。

▶︎　世界最大級のオンライン学習サイトUdemy

デザイン見本まとめ

他のデザイン見本もいくつか用意しています。合わせてどうぞ。

今すぐ使えるCSSレシピブック
created by Rinker

2020年2月11日CodingCSS,HTML,Reference

Posted by KT