七鍵＠楽天

コメント新着

うしまる＠ @ Re:タグを覚えよう【第１５回目】　-　中央寄せ表示の際の小技(08/21) タグの検索でぐぐってたらコチラに辿り着…

k.kyouka @ すきやき占い『しいたけ』の重要度27% 『しいたけ』…

なな@ Re:迷っています(11/01) レオ　がいいですよ☆★

マロン@ かわいいキュート

ｆｏｏｌｉｓｈ☆ｆｏｏ @ Re[1]:お久しぶりです。(07/15) ＞実演を踏まえてテストをしておりました…

バックナンバー

Nov , 2024
Oct , 2024

Sep , 2024

フリーページ

HTMLタグに挑戦

< 新しい記事

新着記事一覧(全310件)

過去の記事 >

Sep 8, 2004

タグを覚えよう【第３１回目】　-　リストを作ろう（３回目）

テーマ：タグに挑戦！(102)

カテゴリ：タグ教室

今日は予告どおりリストのマークをいろいろと変えてみましょう(〃⌒▽⌒)
とは言いましても、今日変えるのは「順番の無いリスト」（UL）のマークです。
「順番があるリスト」（OL）のマークはまた明日紹介します（笑

ではまず基本形から・・・

例）
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>

表示結果）

test1

test2

test3

何も指定しなければ黒丸でマークが表示されるのでしたよね(￣▽￣人)
ではこれをいろいろ変えてみましょう。

例）
<ul style="list-style:none;">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>

表示結果）

test1

test2

test3

例）

<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>

表示結果）

test1

test2

test3

<ul style="list-style:circle;">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>

表示結果）

test1

test2

test3

例）
<ul style="list-style:square;">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>

表示結果）

test1

test2

test3

いかがですか？
「list-style」（そのままでしょ？）に「disk」を指定するとデフォルトのままですよね。
「none」を指定しますとマーク自体が消えてしまいます。
「circle」を指定しますと白丸になりますよね。
「square」を指定しますと黒四角になります(〃⌒▽⌒)

今のところ用意されているマークはこれだけですがいかがでしょう？
いろいろと応用できそうですよね(￣▽￣人)
きっちり覚えておいていざというときに思い出せるようにしておいて下さい(〃⌒▽⌒)

ではまた明日ー(ﾟ▽^*)ﾉ⌒☆

お気に入りの記事を「いいね！」で応援しよう