【コピペOK】リストのデザイン12選(箇条書き)

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;
   width: 50%;
}

.listdesign9 li{
    color: #2d8fdd;
    border-left: solid 6px #f4b364; /*左側の線の色を変えたい場合はここ*/
    background: #fdf2e3;/*背景色を変えたい場合はここ*/
    margin-bottom: 2px;
    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: 1em;
    list-style-type: none;
}

以上が『【コピペOK】リストのデザイン12選(箇条書き)』でした。

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

デザイン見本まとめ

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

2020年2月11日CodingCSS,HTML,Reference

Posted by KT