初心者HTML講座:リストのulタグ
わかりやすく簡潔に記述するために必須なリストタグ! 番号なしのリストタグである『ulタグ』について学んでみましょう!? 初心者講座の管理人はよく使ってます!使い方は『olタグ』と同じです!
・番号以外で並べるリストタグ
<ul><li>テキストや画像</li></ul>
番号なしのリストは初期設定では以下のように表示されます。
- その1
- その2
- その3
<ul>
<li>その1</li>
<li>その2</li>
<li>その3</li>
</ul>
ソースタグは上のようになります。では詳しくどのようなリストを作れるのかolタグと同じように表にしましたので、見てみましょう。
タグ | プロパティ | 値 | 表示説明 |
---|---|---|---|
ul | type | disc | 黒丸●(初期設定) |
circle | 白丸○ | ||
square | 黒四角■ | ||
li | type | disc | 黒丸●(初期設定) |
circle | 白丸○ | ||
square | 黒四角■ |
olタグに比べると種類は少ないですね。ではどういう風に使うか見てみましょう。
- その1
- その2
- その3
<ul type="circle">
<li>その1</li>
<li>その2</li>
<li>その3</li>
</ul>
『type』の右にある『circle』を表にある別のものに置き換えると、リストマークも別のものになりますよ。『olタグ』に比べると途中から違う番号にするなどがないために解説がすこし楽ですね。ではリストの項目ごとに違うリストマークを使用するには…どうすればよいでしょうか?答えは下にあります!
- その1
- その2
- その3
<ul style="text-align:left;">
<li type="disc">その1</li>
<li type="circle">その2</li>
<li type="square">その3</li>
</ul>
『li』の部分に『type』を設定してあげると別々のリストマークが使えます。何かのグループ分けに使えそうですね。
『ulタグ』の解説は以上でおしまいです。ホームページで解説する際や例をいくつか挙げる場合にすごく役に立つと思いますので、上手く使いこなせるようにがんばりましょう!
HTMLタグのよくある間違い! |
HTMLタグは必ず半角英数字で入力してください。 HTMLタグはコピー・貼り付けでも大丈夫です。しかし、サイズ・カラーコード・アドレスなどの数字や文字を入力する場合に半角英数字以外の文字で入力すると正しく表示されないことやおかしな表示になることがあります(ほぼ表示されないと思います) HTMLタグを入力する際は半角英数字ですが大文字と小文字の区別は特に気にしなくてもいいようです。
HTMLタグには開始タグと終了タグがあります。 他にも、HTMLタグの『<>←カッコ』、『"←ダブル クォーテーション』やHTMLタグ内の記号・文字・数字などを消したり、スペースを空けたり・くっつけたり、改行したりするとブラウザがHTMLタグを正しく認識しないので注意して下さいね。
HTMLタグを複数使う場合。
<font color="#FF0000"><u>初心者講座</font></u>→初心者講座 終了タグが抜けてしまってるなどが原因で思うようにブラウザに表示されないということがよくあるので、もう一度よく見直しみましょう! HTMLタグは最初は見なれない文字や記号が多いので勉強し始めは意味が解らないと思います。でも、続けていくうちに読めるようになります。 あきらめずに少しずつ勉強していきましょうね! |