箇条書きリストをHTMLとCSSで作る/色を変えて可愛くするカスタマイズ

アイキャッチ/箇条書きリストカスタマイズ

記事を書くときに使われる箇条書きのリスト。要点を見やすく、伝えやすくするためにどんなサイトでも使われていますよね。

今回はリストのデザインを少し変えてみるカスタマイズについて。

箇条書きリストBefore/After

デフォルトでは自動的に先頭に黒丸がつくごく普通の箇条書きになります。

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

シンプルで何も問題はありませんが、もう少し印象に残るように遊び心で可愛くしてみたいと思います!

最初の黒丸・の部分を少しだけ大きくして色をつけると…こんな感じに。

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

これだけで柔らかくて可愛い感じになりませんか♪ではコピペできるコードを公開します。

HTML/箇条書きの作り方

まずはHTMLでulタグなどを使って箇条書きリストを作成します。

カスタマイズを適用するには箇条書きリストの<ul>タグにクラス(class=”list-1″)を指定してください。

<ul class="list-1">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

箇条書きに使うタグについて

HTMLではulolliの3つのタグを使って箇条書き(リスト)を作ることができます。

  • ul:Unordered List(順序のない箇条書き)の略
  • ol:Oredered List(順序ありの箇条書き)の略

基本的にul&liのセット、またはol&liのセットで使います。

タグの書き方の例

箇条書きリスト

  • 前後を<ul></ul>ではさむ
  • ひとつひとつの箇条書きの項目は<li></li>ではさむ(liタグは何個でも使えます)
HTML(箇条書きリスト)
<ul>
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ul>
ブラウザではこのように表示されます
  • 1つめの項目
  • 2つめの項目
  • 3つめの項目

番号付きのリスト

またタグを<ol>にすると番号付きのリストになります。

HTML(番号付きリスト)
<ol>
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ol>
ブラウザではこのように表示されます
  1. 1つめの項目
  2. 2つめの項目
  3. 3つめの項目

リストを装飾するCSS

CSSはこちら。リストの点のサイズを変えて水色にします。

CSSを編集するときは子テーマを使用することをオススメします。
(ワードプレスの場合:ダッシュボードの外観 → テーマの編集 → style.css)

/* リストの点*/
.list-1 {
list-style: none;
padding:0;
margin:0;
}

.list-1 li{ 
position: relative;
padding-left:1em;
}

.list-1 li:before {
background-color: lightblue;/*色はここで変更*/
position: absolute;
content: '';
width: 6px;/*円の幅*/
height: 6px;/*円の高さ*/
top:.6em;/*高さの位置調整*/
left: 0em;/*左側位置調整*/
border-radius: 4px;
}

/**480px以下**/
@media screen and (max-width: 480px){
.list-1 li{ 
padding-left:0em;
}

.list-1 li:before {
left:-1em;
}
}

CSSの補足

色を変えると言っても、単純にcolorを変更すると文字色がすべて一緒に変わってしまうため、

  1. list-style: none;と記載して、箇条書きのリストマーク(・)を非表示にする
  2. CSSで円を作って位置を合わせる

  • ←つまりは新しく作成した丸ポチをこのようにしてリストマークっぽく見せています!

点の位置がずれてしまう場合は、top(高さ)またはleft(左からの位置)の値をパソコン表示、モバイル表示ともに調整してください。

点を四角にすることも

円の角丸を指定するborder-radiusを0にすることで、四角にすることもできます。

四角/色はグレーのリスト
  • リスト1
  • リスト2
  • リスト3
/* リストの点*/
.list-1 {
list-style: none;
padding:0;
margin:0;
}

.list-1 li{ 
position: relative;
padding-left:1em;
}

.list-1 li:before {
background-color: gray;/*色はここで変更*/
position: absolute;
content: '';
width: 6px;/*円の幅*/
height: 6px;/*円の高さ*/
top:.6em;/*高さの位置調整*/
left: 0em;/*左側位置調整*/
border-radius: 0;/*円を四角にする*/
}

/**480px以下**/
@media screen and (max-width: 480px){
.list-1 li{ 
padding-left:0em;
}

.list-1 li:before {
left:-1em;
}
}

サイト内すべての箇条書きに適用させたいとき

また、HTMLで1つずつクラスを指定しないでサイト全体の箇条書きを一斉適用させる場合はこちらを使います。

/* リストの点*/
ul {
list-style: none;
padding:0;
margin:0;
}

ul li{ 
position: relative;
padding-left:1em;
}

ul li:before {
background-color: lightblue;/*色はここで変更*/
position: absolute;
content: '';
width: 6px;/*円の幅*/
height: 6px;/*円の高さ*/
top:.6em;/*高さの位置調整*/
left: 0em;/*左側位置調整*/
border-radius: 4px;
}

/**480px以下**/
@media screen and (max-width: 480px){
ul li{ 
padding-left:0em;
}

ul li:before {
left:-1em;
}
}

意図しないサイト内すべてのリストにも適用されてしまいレイアウトが部分的に崩れることがあるので、個人的にはあまりオススメしません。

簡単なのでよかったら試してみてください。

カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、下記の点を確認してみてください。

  • コードは半角英数字になっているか(全角は使えません)
  • 前後や余白に余計なスペース等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSコードは{ }、メモ書きはきちんと/**/で囲んでいるか
  • 他に重複しているコードはないか(下に書いたコードが優先されます)

事前にバックアップをとり、カスタマイズは慎重に行いましょう。

カスタマイズ
\Follow/
Turicco

Comment

タイトルとURLをコピーしました