ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >リスト

リストマークの位置を指定する

ul{list-style-position:inside;} でリストマークの表示位置を内側に指定できます。
1行のリスト項目を途中で改行すると リスト内容がマークに回り込んで 表示されます。

この指定はolタグやliタグにも有効です。

【ブラウザ表示】

  • HTML
    CSS
  • HTML
    CSS

ソース

<ul class="basho1">
<li>HTML<br>CSS</li>
<li>HTML<br>CSS</li>
</ul>

外部ファイル

ul.basho1{list-style-position:inside;}


<body>〜</body>に直接記入する場合

<ul style="list-style-position:inside;">
<li>HTML<br>CSS</li>
<li>HTML<br>CSS</li>
</ul>

■ リストマークの表示位置を外側に指定する

ul{list-style-position:outside;} でリストマークの表示位置を外側に
指定できます。(デフォルト)
マークを外側に表示する場合は1行のリスト項目を途中で改行しても リスト項目は左揃えで表示されます。

この指定もolタグやliタグにも有効です。

【ブラウザ表示】

  • HTML
    CSS
  • HTML
    CSS

ソース

<ul class="basho2">
<li>HTML<br>CSS</li>
<li>HTML<br>CSS</li>
</ul>

外部ファイル

ul.basho2{list-style-position:outside;}


<body>〜</body>に直接記入する場合

<ul style="list-style-position:outside;">
<li>HTML<br>CSS</li>
<li>HTML<br>CSS</li>
</ul>

■ その他の項目

リストマークの種類を変える
リストマークを画像にする
リストマークを背景画像にする
リストマークを一括指定
余白、間隔を調整する
リストを並べる

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.