HTML 5リスト
HTMLリスト
- シーケンステーブルあり
- リスト項目
---------------------- リスト
- リスト項目
- 説明
1.無秩序リスト
ラベルの使用:
属性:disc、circle、square<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>（ --disc） </title> </head> <body> <ul type="disc"> <li>ios</li> <li>android</li> <li>html5</li> <li>swift</li> </ul> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>（circle） </title> </head> <body> <ul type="circle"> <li>ios</li> <li>android</li> <li>html5</li> <li>swift</li> </ul> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>（square） </title> </head> <body> <ul type="square"> <li>ios</li> <li>android</li> <li>html5</li> <li>swift</li> </ul> </body> </html>
2.順序付きリスト
ラベルの使用:
属性:A、a、I、i、start<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>（A） ABC……</title> </head> <body> <ol type="A"> <li>ios</li> <li>android</li> <li>html5</li> <li>swift</li> </ol> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>（a） abc……</title> </head> <body> <ol type="a"> <li>ios</li> <li>android</li> <li>html5</li> <li>swift</li> </ol> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>（I）I II III……</title> </head> <body> <ol type="I"> <li>ios</li> <li>android</li> <li>html5</li> <li>swift</li> </ol> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>（i）i ii iii……</title> </head> <body> <ol type="i"> <li>ios</li> <li>android</li> <li>html5</li> <li>swift</li> </ol> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>（ start， 10 ）10 11 12……</title> </head> <body> <ol start="10"> <li>ios</li> <li>android</li> <li>html5</li> <li>swift</li> </ol> </body> </html>
3.ネストされたリスト
ラベルの使用:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> </head> <body> <ul> <li> </li> <ul> <li> </li> <li> </li> </ul> <li> </li> <ul> <li> </li> <li> </li> </ul> <li> </li> <ul> <li> </li> <li> </li> </ul> </ul> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> </head> <body> <ol> <li> </li> <ol> <li> </li> <li> </li> </ol> <li> </li> <ol> <li> </li> <li> </li> </ol> <li> </li> <ol> <li> </li> <li> </li> </ol> </ol> </body> </html>
4.カスタムリスト
ラベルの使用:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> </head> <body> <dl> <dt>HelloWorld</dt> <dd>aaa</dd> <dt>HelloWorld</dt> <dd>aaa</dd> <dt>HelloWorld</dt> <dd>aaa</dd> </dl> </body> </html>
- リスト項目
- 無秩序リスト