こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。
この記事では、 HTMLで順不同の箇条書きのリストを表すul要素について
- ul要素とは
- ul要素を使ったサンプルプログラム
と、丁寧に解説していきます。
前提条件：実行環境について
実行環境は以下の通りです。
| OS | Windows10 |
|---|
ul要素とは
ul要素とは、順不同の箇条書きのリストを表す要素です。
「ul」とは「unordered list」の略で、和訳すると「順序不同リスト」という意味です。
ul要素を使うと
というように表すことができます。
書き方は
|
1 2 3 4 5 |
<ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> |
とul要素の中にli要素を使って箇条書きのリストを表します。
li要素は、リストの項目を表す要素です。
詳しくはこちらの記事をご参考ください。
ul要素には非推奨となっている属性が2つあります。
| 非推奨属性名 | 説明 | 書き方例 | ||
|---|---|---|---|---|
| compact | リストをコンパクトに表示するかを指定 |
|
||
| type | リストの項目先頭にある記号を指定
を指定できた |
|
これら2属性は使わないようにご注意ください。
では、次の章で実際に使ってみます。
ul要素を解説するプログラムの概要
ul要素を解説するプログラムでは、HTMLファイル内で5つの項目を持つリストを作って表示させます。
サンプルプログラム
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ul要素サンプル</title> </head> <body> <ul> <li>リンゴ</li> <li>ブドウ</li> <li>メロン</li> <li>バナナ</li> <li>キウイ</li> </ul> </body> </html> |
実行結果
作成したHTMLをブラウザで開きます。
ul要素に指定した内容でリストが表示されることが確認できました。
まとめ：ul要素を使ってみよう！
以上がHTMLのul要素についての解説でした！
あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ
コメント