コピペで使えるCSSデザインレシピ集 Vol.2｜リスト編

ページ内には広告が含まれます広告ポリシー

CSSデザインレシピ集 Vol.2では、HTMLとCSSをコピーして使えるリストデザインを紹介しています。通常のHTMLサイトとWordPressのどちらでも使える、シンプルで取り入れやすい、おしゃれなデザインを集めました。

コピペで使えるCSSリストデザイン

CSSデザインレシピ集では、CodePenからHTMLとCSSをコピーして使えるデザインを集めました。

リストのデザインは、サンプルのHTMLを参考に、項目の文字を入れ替えてCSSを加えるだけで変更できます。通常のHTMLサイトとWordPressのどちらでも使えるので、サイトの内容に合わせて取り入れてください。

リストデザインの使い方

使いたいデザインが見つかったら、見本のHTMLからリスト部分を、CSSからリストに使われている部分をコピーします。HTMLへ付いているクラス名と、CSSのクラス名が同じになるように使います。

各デザインはCodePenで表示しています。HTMLとCSSをクリックすると、コードが表示されます。

CodePenでSCSSやLessを通常のCSSへ変換して表示する手順 — SCSS・Lessを通常のCSSへ変換する手順

サイトにもともとCSSや余白が設定されている場合は、見本と少し違う表示になることがあります。CSSを追加したあとは、実際のページで前後の文章との間隔も確認しておくと安心です。

CSSリストデザイン

チェックマークを付けたリスト

標準の黒丸をチェックマークへ変更した、シンプルなリストです。CSSが短いため、マークや色を少し変えるだけで使えます。

See the Pen Simple custom marker by @simevidas on CodePen.

liのlist-style-type: "✓"を任意の記号や文字コードに変えるとリストのマークが、::markerのcolor: crimsonを変えると、マークの色が変わります。

星を付けたリスト

各項目の先頭へ、黄色い星を表示したリストです。おすすめの特徴や、特に見てほしいポイントを並べる場所に合います。

See the Pen Simple unordered list with custom HTML list style by @fredthewebguy on CodePen.

li:beforeのcontent: '\2605'を任意の記号や文字コードに変えると先頭の記号が、同じli:beforeにあるcolor: #ffd900を変えると、星の色が変わります。

丸で囲んだチェックリスト

チェックマークを丸い枠で囲んだリストです。通常のチェックマークよりも目に入りやすく、サービスの特徴や確認項目にも使えます。

See the Pen Circled Check Mark List Item Bullet by @sitekickr on CodePen.

li:beforeのcontent: '\2713'を任意の記号や文字コードに変えると円の中の記号が、color: #000を変えると記号の色が、border: 2px solid #000を変えると、円の色や太さが変わります。

交互に背景色を付けたリスト

奇数番目の項目だけに背景色を付け、隣り合う項目を見分けやすくしたリストです。項目数が多い場合でも、横へずれずに読み進められます。

See the Pen Striped List by @markheath on CodePen.

ul.striped-list > li:nth-of-type(odd)のbackground-color: #e9e9f9を変えると奇数行の背景色が、ul.striped-list > liのborder-bottom: 1px solid rgb(221,221,221)を変えると、各リスト項目を区切る線の色と太さが変わります。

番号を丸で囲んだリスト

各項目へ自動で番号を付け、その番号を丸で囲んだリストです。順番に確認してほしい項目や、短い手順を並べる場合に使えます。

See the Pen HTML & CSS: numbered list with numbers inside of circles! by @Cr0up13r on CodePen.

ul.numbered-list内のli:beforeにあるborder: 1px solid blueを変えると円の色と太さが、color: redを変えると番号の色が変わります。円の大きさは、同じli:beforeにあるheight: 20pxとwidth: 20pxで変更できます。

番号と背景を組み合わせたリスト

番号部分と文章部分で背景色を分けたリストです。入れ子にした項目には「3.1」のような番号が自動で付きます。

See the Pen Custom Bullet List Style by @jsadmin on CodePen.

li spanのbackground-color: #f1f1f1を変えると文章部分の背景色が、li span::beforeのbackground: #8c7ae6を変えると番号部分の背景色が、同じli span::beforeにあるcolor: whiteを変えると、番号の文字色が変わります。

光る丸を付けたリスト

項目へカーソルを重ねると、先頭の丸が明るく光るリストです。JavaScriptは使わず、CSSの:hoverから変化させています。

See the Pen Custom List style pure CSS by @KhaledAhmedYounes on CodePen.

.glowing-circleのbackground-color: #005a00を変えると通常時の丸の色が、li:hover > .glowing-circleのbackground-color: #00ba00を変えるとカーソルを重ねたときの色が変わります。光の色と広がりは、同じli:hover > .glowing-circleにあるbox-shadowで変更できます。

横へ動くホバーリスト

項目へカーソルを重ねると、文字が右へ移動して色が変わるリストです。上下の線で項目を区切りながら、シンプルな動きを加えられます。

See the Pen Simple List Hover Effect by @DevonAero on CodePen.

ul li:hoverのmargin-left: 20pxを変えるとカーソルを重ねたときの移動距離が、同じul li:hoverにあるcolor: #add8e6を変えると重ねたときの文字色が変わります。項目下の線はul liのborder-bottom: 1px solid #add8e6、最初の項目上の赤い線はul li:first-childのborder-top: 1px solid redから変更できます。

選択した項目が大きくなるリスト

項目へカーソルを重ねると、その項目だけが大きくなり、ほかの項目が薄く表示されます。複数の項目から、現在見ている場所を目立たせたい場合に合います。

See the Pen CSS List Item Hover Effect by @Aricati on CodePen.

.box ul li:hoverのtransform: scale(1.1)を変えると選択した項目の拡大率が、background: #25bcffを変えると背景色が変わります。ほかの項目の薄さは.box ul:hover liのopacity: 0.2、番号部分の色は.box ul li spanのbackground: #25bcffで変更できます。

日付を付けたタイムライン

縦線に沿って日付と内容を並べたタイムラインです。更新履歴、イベントの予定、制作工程などを時系列で見せられます。

See the Pen Pure CSS Timeline Design With Cool Hover Effects by @alvarotrigo on CodePen.

.timeline ulのborder-left: 2px solid #094a68を変えると縦線の色と太さが、.timeline ul li spanのbackground-color: #1685b8を変えると日付の背景色が変わります。縦線上の丸は.timeline ul li:beforeのbackground-color: #34ace0、カーソルを重ねたときの丸と光の色は.timeline ul li:hover:beforeのbackground-colorとbox-shadowで変更できます。