本文の開始

無料ホームページ作成 CSS（スタイルシート）入門 y-labo - CSSでリストを設定

無料ホームページCSS作成情報。無料でWeb/HP製作。ホームページ入門から、
HTML・CSS・SEO対策・フリーソフトから無料テンプレートまで。

格安ホームページ制作激安HPWeb製作のy-labo.net（わいらぼ、ワイラボ）

  • ホームページ制作費を安く・格安・激安！
  • ホームページ制作を早く！
  • でもかっこいいホームページにカスタマイズ
  • SEO対策でアクセスアップ
  • ホームページ制作後も安心サポート
  • 自分でもホームページを修正したい

3-12）CSS（スタイルシート）でリストを設定 CSS（スタイルシート）入門

無料ホームページ作成情報 トップ > CSS（スタイルシート）入門 > 3-12）CSS（スタイルシート）でリストを設定

 

ご自分でホームページを作成・修正される方のために、ホームページ作成のためのコンテンツをご用意しました。すべて無料のコンテンツですのでお役立てください。なお、こちらのコンテンツに関してはサポートを行っていません。ご質問のメールなどはご遠慮いただければと思います。

CSS（スタイルシート）でリストを設定について

CSS（スタイルシート）を利用して、リストの設定します。

このページで最終的に作成するページの見本は、こちらです。

リストのマーカーを変更 「list-style-type」 / 「list-style-position」 / 「list-style-image」 / 「list-style」プロパティ

リストの行頭に付く記号を変更します。

リストの種類を選択 「list-style-type」プロパティ

「list-style-type」プロパティでリストの種類を選択します。

「list-style-type」プロパティは以下のように設定します。

値 意味 例 IE FF NN NN
none なし
  • リスト
  • リスト
 ○ ○ ○ ○
disc 黒丸
  • リスト
  • リスト
 ○ ○ ○ ○
circle 白丸
  • リスト
  • リスト
 ○ ○ ○ ○
square 四角
  • リスト
  • リスト
 ○ ○ ○ ○
decimal 数字
  1. リスト
  2. リスト
 ○ ○ ○ ○
upper-alpha 大文字アルファベット
  1. リスト
  2. リスト
 ○ ○ ○ ○
lower-alpha 小文字アルファベット
  1. リスト
  2. リスト
 ○ ○ ○ ○
upper-roman 大文字ローマ数字
  1. リスト
  2. リスト
 ○ ○ ○ ○
lower-roman 小文字ローマ数字
  1. リスト
  2. リスト
 ○ ○ ○ ○
decimal-leading-zero 2桁の数字
  1. リスト
  2. リスト
 × ○ ○ ○
lower-greek 小文字ギリシャ文字
  1. リスト
  2. リスト
 × ○ ○ ○
upper-latin 大文字ラテン文字
  1. リスト
  2. リスト
 × ○ ○ ○
lower-latin 小文字ラテン文字
  1. リスト
  2. リスト
 × ○ ○ ○
hebrew ヘブライ数字
  1. リスト
  2. リスト
 × ○ ○ ×
armenian アルメニア数字
  1. リスト
  2. リスト
 × ○ ○ ○
georgian グルジア数字
  1. リスト
  2. リスト
 × ○ ○ ○
cjk-ideographic 漢数字
  1. リスト
  2. リスト
 × ○ ○ ×
hiragana ひらがな
  1. リスト
  2. リスト
 × ○ ○ ×
katakana カタカナ
  1. リスト
  2. リスト
 × ○ ○ ×
hiragana-iroha いろは
  1. リスト
  2. リスト
 × ○ ○ ×
katakana-iroha イロハ
  1. リスト
  2. リスト
 × ○ ○ ×
ブラウザ別対応表（list-style-type）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
△ △ △ △ ○ ○ △ △ △ ○ △

例）
ul {
list-style-type: square;
}
ol {
list-style-type: lower-roman;
}

<ul>
<li>江東区</li>
<li>墨田区</li>
<li>練馬区</li>
・・・
</ul>
<ol>
<li>旭区</li>
<li>阿倍野区</li>
<li>生野区</li>
・・・
</ol>

見本画像

見本画像

マーカーを画像で表示 「list-style-image」プロパティ

「list-style-image」プロパティでマーカーを画像で表示します。

「list-style-image」プロパティは以下のように設定します。

ブラウザ別対応表（list-style-image）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ ○ ○ ○ ○ ○ × ○ ○ ○ △

例）
.list-yokohama {
list-style-image: url(image/p_point01.gif);
}

<ul>
<li>青葉区</li>
<li>旭区</li>
<li>泉区</li>
・・・
</ul>

見本画像

マーカーの位置を設定 「list-style-position」プロパティ

「list-style-position」プロパティでマーカーの位置を設定します。

「list-style-position」プロパティは以下のように設定します。

値 意味 例
outside 外側に表示（標準）
  1. リスト
    リストの2行目
  2. リスト
    リストの2行目
inside 内側に表示
  1. リスト
    リストの2行目
  2. リスト
    リストの2行目
ブラウザ別対応表（list-style-type）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ ○ ○ △ ○ ○ × ○ ○ ○ ○

例）
ol {
list-style-type: lower-roman;
list-style-position: inside;
}

<ol>
<li>旭区</li>
<li>阿倍野区</li>
<li>生野区</li>
・・・
</ol>

見本画像

リストの設定を一括設定 「list-style」プロパティ

「list-style」プロパティでリストの設定を一括で設定します。

「list-style」プロパティは以下のように設定します。

各値は半角のスペースで区切って入力し、どの値も省略可能で、記述する順序も自由です。 また、マーカーの種類と画像が指定された場合は、画像が優先されます。

list-style: circle url(image/p_point01.gif) outside;

circle
白丸

url(image/p_point01.gif)
画像で表示

outside
外側に表示


ブラウザ別対応表（list-style）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
△ △ △ △ ○ ○ △ ○ △ ○ △

例）
.list-yokohama {
list-style: circle url(image/p_point01.gif) outside;
}

<ol>
<li>旭区</li>
<li>阿倍野区</li>
<li>生野区</li>
・・・
</ol>

見本画像

このページのTOPへ

リスト全体の余白を設定 「margin」 / 「padding」プロパティ

まず始めに、リスト全体を設定する<ul>タグに「．list-yokohama」というクラスを作成して、リスト全体の余白を設定します。

余白には、「margin」プロパティと「padding」プロパティの2種類あります。「margin」プロパティは外側の余白（下記の例でいうと水色の部分）、「padding」プロパティは内側の余白（下記の例で黄色い部分）になります。

（Internet Explorerの場合の例です。）

余白説明画像

例）
margin: 1px; - 上下左右「1px」
margin: 1px 2px; - 上下「1px」、左右「2px」
margin: 1px 2px 3px; - 上「1px」、左右「2px」、下「3px」
margin: 1px 2px 3px 4px; - 上「1px」、右「2px」、下「3px」、左「4px」

ブラウザ別対応表（margin）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ △ △ △ ○ ○ △ ○ ○ ○ ○
ブラウザ別対応表（padding）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

例）
.list-yokohama {
list-style: circle url(image/p_point01.gif) outside;
padding: 0em;
margin: 1em;
}

見本画像

上下左右の余白を個別に指定

「margin」と「padding」は、それぞれ「-top」「-right」「-bottom」「-left」で個別に指定することもできます。

ブラウザ別対応表（margin）
  Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
-top ○ ○ ○ ○ ○ ○ △ ○ ○ ○ ○
-right ○ △ △ △ ○ ○ △ ○ ○ ○ ○
-bottom ○ ○ ○ ○ ○ ○ △ ○ ○ ○ ○
-left ○ △ △ △ ○ ○ △ ○ ○ ○ ○
ブラウザ別対応表（padding）
  Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
-top ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
-right ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
-bottom ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
-left ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

例）
.list-yokohama {
list-style: circle url(image/p_point01.gif) outside;
padding: 0em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 2em;
}

見本画像

ブラウザによる違い

但し、こちらはブラウザによって表示が違ってきます。

なにも設定せずに各ブラウザで表示すると問題なく表示されますが、「margin」と「padding」の意味が違っています。

Internet Explorer

Firefox

Opera
余白見本画像 余白見本画像 余白見本画像

「margin」のみを0に設定すると・・・

Internet Explorer Firefox Opera
余白見本画像 余白見本画像 余白見本画像

「padding」のみを0に設定すると・・・

Internet Explorer Firefox Opera
余白見本画像 余白見本画像 余白見本画像

「margin」と「padding」を0に設定すると、ようやく同じように表示されるようになります。
しかし、肝心の行頭の記号が表示されません。

Internet Explorer Firefox Opera
余白見本画像 余白見本画像 余白見本画像

「margin」と「padding」を0に設定し、左の「margin」のみを1em（1文字）に設定すると記号が表示されます。

Internet Explorer Firefox Opera
余白見本画像 余白見本画像 余白見本画像

このように、「padding」を0に設定し、上下と左の「margin」で調整すると作成者の意図通りの表示が可能になります。

以下の例では、「padding」を0、上下の「margin」を1em、左のの「margin」を2emに設定した例です。

Internet Explorer Firefox Opera
余白見本画像 余白見本画像 余白見本画像

このページのTOPへ

リストの各項目の余白を設定 「margin」 / 「padding」プロパティ

次に、リストの各項目を設定する<li>タグに「．list-yokohama2」というクラスを作成して、リストの各項目の余白を設定します。

余白には、「margin」プロパティと「padding」プロパティの2種類あります。「margin」プロパティは外側の余白（下記の例でいうと水色の部分）、「padding」プロパティは内側の余白（下記の例で黄色い部分）になります。

余白説明画像

項目と項目の間隔を設定

リストの各項目の間隔を設定する<li>タグに「．list-yokohama2」というクラスを作成して、リストの項目と項目の間隔を設定します。

各項目の間隔は、「margin-bottom」プロパティと「margin-top」プロパティで設定します。

例）
.list-yokohama2 {
margin-bottom: 5px;
margin-top: 5px;
}

見本画像

記号と項目の間隔を設定

リストの記号と項目の間隔を設定する<li>タグに「．list-yokohama2」というクラスを作成して、リストの記号と項目の間隔を設定します。
記号と項目の間隔は、「padding-left」プロパティで設定します。

例）
.list-yokohama2 {
margin-bottom: 5px;
margin-top: 5px;
padding-left: 10px;
}

見本画像

一部の項目のみのインデントを変更

一部の項目のみのインデントを変更を設定する<li>タグに「．list-yokohama3」というクラスを作成して、一部の項目のみのインデントを変更します。

一部の項目のみのインデントを変更は、「margin-left」プロパティで設定します。

例）
.list-yokohama3 {
margin-bottom: 5px;
margin-top: 5px;
padding-left: 10px;
margin-left: 20px;
}

見本画像

このページのTOPへ

横並びのリストを作成 「float」プロパティ

ナビゲーションなどに使用するような横並びのリストを作成します。

横並びのリストは、「float」プロパティで設定します。 また、リストの後に入力する場合は「clear」プロパティを使用します。

例）
.list-navi {
list-style-type: none;
}
.list-navi2 {
background-color: #FFFFCC;
border: 1px solid #FFCC00;
float: left;
margin: 10px;
padding: 5px;
width: 100px;
text-align: center;
}
.float-clear {
clear: left;
}

<ul class="list-navi">
<li class="list-navi2">リンク1</li>
<li class="list-navi2">リンク2</li>
<li class="list-navi2">リンク3</li>
<li class="list-navi2">リンク4</li>
<li class="list-navi2">リンク5</li>
</ul>
<p class="float-clear">コピーライト表示</p>

見本画像

このページのTOPへ

CSS（スタイルシート）入門メニュー

このページのTOPへ

格安です！ホームページ制作をご依頼ください！！

ホームページ制作は専門用語も多く、わかりにくいことも多いかと思います。ホームページの制作方法や制作費用、アクセス数アップ（SEO対策）などわかりにくいことがあればお気軽にお問い合わせください。

このページのTOPへ

CSS（スタイルシート）入門

格安ホームページ制作依頼

メールでご相談

メールでのお問い合わせは365日24時間受付中です。

お電話でのご相談

090-3401-6229（直通）

【対応時間】

平日のみ（土日祝日はお休み）
午前11時〜午後7時頃

※留守番電話にメッセージを残して頂ければ、対応時間内にこちらより折り返します。

無料ホームページ作成

Copyright (C) y-labo.net, All rights reserved.

http://www.hp-workshop.com/

無料ホームページ作成情報のy-labo


当サイトでも利用しているホームページテンプレート・素材です。
ご自分でホームページを作成できる方にオススメ。
品質にこだわったホームページ・映像・サウンド素材
ホームページ素材の他、Flashやロゴもあり。
デザイナーが外国人のため、日本人には好みが分かれます。
ホームページテンプレートならテンプレートモンスタージャパン


ビジネス向けレンタルサーバー（請求書払い）
専用お申込フォームはこちら（3000円割引）

個人＆ビジネス向け。必要な標準機能搭載のサーバー。

□オンラインショップを
格安で開店

□独自ドメイン取得
請求書払いも可。

□ホームページアドレスや
メールアドレスに独自ドメイン。
ページの終了