ドイツ生まれの地球に優しいバイオ・ハイテク洗剤

ulタグ

更新日
現在のページは約2分で読めます。

ulタグとは

ulタグはブロックレベル要素の内の1つであり、箇条書きの項目を作る際によく使われます。リストタグとも言います。

番号リストで表示する場合はolタグを使います。

サンプルコード

<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>

ul要素にliタグを入れます。

使用例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ulタグ</title>
</head>
<body>

<h1>ulタグの使い方</h1>

<h2>基本</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>

<h2>入れ子(階層化)</h2>
<ul>
<li>web制作
<ul>
<li>CSS</li>
<li>HTML</li>
</ul>
</li>
<li>wordpress
<ul>
<li>おすすめプラグイン</li>
<li>おすすめテーマ</li>
</ul>
</li>
<li>PHP
</ul>

</body>
</html>

ブラウザの見え方

入れ子にしリストを階層化させることも可能。

やり方としてはまず階層化させたい項目の</li>を消します。消したら、その項目の下に<ul><li>タグを記述し</ul></li>で完了です。

pタグとulタグの使い分け

基本的に見出し以外のテキストを記入する場合に用いられるブロックレベル要素はpタグやulタグが大半を占めてきます、

使い分けとしては、ulタグは箇条書きのタグなので、その名の通り単語などをリスト化で表示させたい場合に使います。

pタグは段落タグなので、単語ではなく文章で表現した場合はこちらを用いります。

まとめ

初めての人は階層化させるときが少しややこしいかもしれません。慣れてくれば理解してきますので問題はありません。

 

情報提供、雑談等