https://hmaster.net/


HTMLタグと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>

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

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

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