1. 現在位置:
  2. トップページ
  3. HP作成tips
  4. stylesheet
  5. リスト
background |  回り込みを指定 |  リストマーク |  margin・padding | 
リスト
background 背景(画像を指定)
li 要素にこのプロパティを設定すると、リストマーク(マーカー)を背景画像で指定
ul {
list-style-type: none; /*標準のマークを消す*/
}
li {
background: url(01.gif) no-repeat;
padding-left: 20px; /*マークの表示領域を作るためパディングを設定*/
}
  • あいうえお
  • かきくけこ
  • さしすせそ
float 回り込みを指定
li 要素にこのプロパティを設定すると、リスト項目を横並びにできる
li {
float: left;
}
left (後に続くリスト項目を右側に回り込ませます)
  • あいうえお
  • かきくけこ
  • さしすせそ
  • あいうえお
  • かきくけこ
  • さしすせそ
clear 回り込みを解除
.kaijyo {
clear: both;
}
left (ボックスの右側にある回り込みを解除)
right (ボックスの左側にある回り込みを解除)
both (どちらの回り込みも解除)
none (解除しない)デフォルト
list-style リストマーク(マーカー)の種類、位置、画像を一度に指定
ul {
list-style: square inside url(image/mark.gif);
}
list-style-type リストマーク(マーカー)の種類を指定
ul {
list-style-type: square;
}
ol {
list-style-type: upper-alpha;
}
none
  • マークなし
  • テキスト
disc
  • テキスト
  • テキスト
circle
  • テキスト
  • テキスト
square
  • テキスト
  • テキスト
decimal
  1. テキスト
  2. テキスト
upper-alpha
  1. テキスト
  2. テキスト
lower-alpha
  1. テキスト
  2. テキスト
upper-roman
  1. テキスト
  2. テキスト
lower-roman
  1. テキスト
  2. テキスト
list-style-position リストマーク(マーカー)の位置(外側、内側)を指定
ul {
list-style-position: outside;
}
ol {
list-style-position: inside;
}
outside (リスト領域の外側に表示)デフォルト
  • テキスト
    テキスト
  • テキスト
    テキスト
inside (リスト領域の内側に表示)
  • テキスト
    テキスト
  • テキスト
    テキスト
list-style-image リストマーク(マーカー)に画像を指定
ul {
list-style-image: url(image/mark.gif);
}
margin マージン(外側の余白)を、padding パディング(内側の余白)を指定
ul {
margin: 0 0 0 20px;
padding: 0;
}
マージンを個別に指定
li {
margin-bottom: 5px; /*top、right、bottom、left*/
}