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

WEB制作/デザイン

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

初心者の方でもあまり難しく考えないで済む様にHTML内にスタイルを記述しているので全て丸々コピペでOKです。

使い方

WordPress:カスタムHTMLに丸々コピペ
静的サイト :bodyの中に丸々コピペ
サイト全体 :下記を読んで下さい

HTMLとCSSを別々にしてサイト全体に反映させたい場合は、classを外して反映させたい要素名に変更してから<style>〜</style>の中身を切り抜いてスタイルシートに記述して下さい。(ある程度マークアップ言語のリテラシーがある方じゃないと崩れちゃうかもしれないです。)

注意‼︎

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

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

基本的なリスト

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

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

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

下記のHTML(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

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

<style>

.listdesign1{
  list-style: none;
}

</style>

横並び

横並びになります。

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

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

<style>

.listdesign2 li{
  display: inline;
}

</style>

枠線あり

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

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

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

<style>

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

</style>

2重線

枠線を二重にできます。

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

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

<style>

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

</style>

点線枠

枠線を点線にできます。

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

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

<style>

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

</style>

背景色あり

背景に色をつけれます。

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

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

<style>

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

</style>

ボーダー線

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

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

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

<style>

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

</style>

簡単シンプルデザイン

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

影付きで立体的

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

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

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

<style>

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

</style>

リストメニュー風(縦)

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

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

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

<style>

.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;
}

</style>

リストメニュー風(横)

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

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

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

<style>

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

</style>

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

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

他のHTML/CSSデザイン集は以下から