Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

デザインサンプルで学ぶCSSによるスタイリング~「リスト」編

CSSで作るWeb用パーツ(2)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/05/07 14:00

 本連載では、Webページをデザインする際、具体的にどのようにコーディングすれば良いのか分からない人のために、見出しやリスト、フォームなど、Webページを構成する部品のデザインサンプルを紹介し、CSSによるスタイリング方法を解説します。今回は、CSSでリストをスタイリングする方法を紹介します。リストマーカーのスタイリングをはじめ、リストを横並びに配置する方法など、実務でよく使われるテクニックを中心に紹介します。

目次

対象読者

  • (X)HTMLとCSSの基本を理解している方。
  • デザインのコツを学びたい方。

必要な環境

 本連載で動作確認を行ったブラウザは次のとおりです。

  • Internet Explorer 11(Windows 7)
  • Firefox 26(Windows 7)
  • Chrome 32(Windows 7)

リストのデフォルトスタイルをリセットする

 まずは、今回スタイリングの対象となるul要素のデフォルトスタイルを確認しておきましょう。ここではマージンの適用箇所が分かりやすいように、ul要素の背景色をred、li要素の背景色をyellowで指定しました。図01のように、一般的なブラウザでは、ul要素の上下にマージン、左にパディングが入り、li要素の先頭にはリストマーカーが表示されています。

図01:リストのデフォルトスタイル(default.html)
図01:リストのデフォルトスタイル(default.html)

 今回のサンプルでは、ul要素をスタイリングしていきますが、デフォルトスタイルが効いていると毎回同じような記述が増えてしまうため、最初にul要素とli要素のスタイルを統一します。ここでは、ul要素の余白をなくすため上下左右のマージンとパディングを0にし、li要素のリストマーカーを表示しないよう「list-style-type:none;」と指定しました。

[リスト01]リストのデフォルトスタイルをリセットする(reset-style.html)
ul {
  margin: 0; /* 上下左右のマージンを0 */
  padding: 0; /* 上下左右のパディングを0 */
}
li {
  list-style-type: none; /* リストマーカーを表示しない */
}
図02:リストのデフォルトスタイルをリセットする(reset-style.html)
図02:リストのデフォルトスタイルをリセットする(reset-style.html)

 さて、これで準備ができたので、これからリストをスタイリングしていきます。

リストマーカーのスタイリング

 まずは、箇条書きリストまたは番号付きリストのマーカーをスタイリングしてみましょう。

list-style-typeプロパティでマーカーの種類を設定する

 リストに図03のようなシンプルなマーカーを使用したい場合、list-style-typeプロパティでマーカーの種類を設定できます。li要素だけでなく、ul要素またはol要素に対して一括で指定することも可能です。

図03:list-style-typeプロパティでマーカーの種類を指定する(sample01.html)
図03:list-style-typeプロパティでマーカーの種類を指定する(sample01.html)

 list-style-typeプロパティの代表的な値には、表01のようなものがあります。

表01:list-style-typeプロパティの代表的な値
説明
disc 黒丸(デフォルト)
circle 白丸
square 四角
decimal 算用数字
decimal-leading-zero 頭に0をつけた算用
lower-roman ローマ数字の小文字
upper-roman ローマ数字の大文字
lower-alphaまたはlower-latin 英文字の小文字
upper-alphaまたはupper-latin 英文字の大文字

list-style-imageプロパティでマーカー画像を設定する

 サンプル02では、list-style-imageプロパティでマーカー画像を指定しています。このときに注意が必要なのは、ulまたはol要素に左パディングがないと、マーカー画像が表示されないことです。ここでは、左パディングに20pxを指定しました。マーカー画像の幅は9pxですが、9pxの左パディングではマーカー画像が半分程度しか表示されません。残念ながら細かい位置調整はできないので、ブラウザで確認しながら適当な値を入れましょう。

[リスト02]サンプル02/HTML(sample02.html)
<ul id="sample02">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li> 
</ul>
[リスト03]サンプル02/CSS(sample02.html)
ul#sample02 {
  padding-left: 20px; /* マーカー表示分の左パディング */
}
ul#sample02 li {
  list-style-image: url("check.png"); /* マーカー画像 */
}
図04:サンプル02(sample02.html)
図04:サンプル02(sample02.html)

backgrounrdプロパティでリストマーカーを表示する

 マーカー画像の表示位置をピクセル単位で細かく調整したい場合には、マーカー画像を背景画像として左側に一度だけ表示する方法がお勧めです。この方法であれば、マーカーの上下左右をpaddingプロパティで指定することで、細かい位置調整が可能になります。

 例として、先ほどのサンプルのマーカー画像とテキストの間隔を詰めてみましょう。マーカー画像のサイズは幅9pxなので、padding-leftを9pxで指定すると、マーカー画像とテキストの間隔がピッタリ0になるはずです。

[リスト04]サンプル03/HTML(sample03.html)
<ul id="sample03">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li> 
</ul>
[リスト05]サンプル03/CSS(sample03.html)
ul#sample03 li {
  background: url("check.png") left center no-repeat; /* マーカー画像を背景画像として左側に一度だけ配置 */ 
  padding-left: 9px; /* マーカー画像の幅を指定 */
}
図05:サンプル03(sample03.html)
図05:サンプル03(sample03.html)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:CSSで作るWeb用パーツ

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5