フラッターブログを見ていただきありがとうございます!! masakiです!!!
人気シリーズのHTML単語解説をやっていきたいと思います。
今回はリストタグについてです!
下記にて過去の解説シリーズURL載せておきます!!
リストタグとは?!

みなさまはサイトを見る時、下記のようなリストなどを見ませんか?
- フラッター1
- フラッター2
- フラッター3
- ブログ1
- ブログ2
- ブログ3
今回はリストタグについての解説になります!!
リストを作成するタグです!
<ol></ol>
<ul></ul>
<li></li>
olタグ

リストの表記は以下のように記載するとできます!
<ol type=”●●”>
<li>フラッターブログ</li>
<li>フラッターブログ</li>
<li>フラッターブログ</li>
</ol>
●●のところを変えるだけで表記が変わります!!!
ぜひコピペでやってみてください!
- フラッターブログは面白い
- フラッターブログはずっと見れる
- フラッターブログをみんなにシェアする
●●の部分を数字の1にした場合
- フラッターブログは面白い
- フラッターブログはずっと見れる
- フラッターブログをみんなにシェアする
●●の部分をアルファベットのiにした場合
- フラッターブログ1ページ
- フラッターブログ2ページ
- フラッターブログ3ページ
●●の部分をアルファベットのAにした場合
- フラッターブログ1
- フラッターブログ2
- フラッターブログ3
●●の部分をアルファベットのaにした場合
- フラッターブログは面白い
- フラッターブログはずっと見れる
- フラッターブログをみんなにシェアする
●●の部分をアルファベットのIにした場合
上記のような感じで色々できます!!
できると便利なので覚えておいて損はないと思います!!!
ブログをやっている方だと使う場面は結構あるかもしれませんね!
ulタグ

- フラッター1
- ブログ2
- フラッターブログ3
続いてはulタグに関してになります。
上記のように黒点みたいになります。
ulの表記は以下のように記載するとできます!
<ul type=”●●”>
<li></li>
<li></li>
<li></li>
</ul>
●●のところを変えるだけで表記が変わります!!!
ぜひコピペでやってみてください!
ulタグの●●の部分を変えると 黒丸(disc)白丸(circle)黒い四角(square)を指定することができます。
- フラッターブログとは?
- フラッターブログじゃ面白い
- フラッターブログは今来てる?!
- プロフィール
- 募集
- お問い合わせ
liタグ

続いてはliタグになります!
liタグはリストの項目を記述する際に使用します。
リスト表示したい項目に<lI>タグをつけて <ul></ul>または<ol></ol>の間に記述します。
<ol type=”1″>
<li>フラッターブログ</li>
<li>flutterblog</li>
<li>フラッター!!</li>
</ol>
上記のようにliタグはメインよりもサポートのような役割で使われます!
応用編!
リストの応用ができると少し違うことができます!
応用編として紹介していきます!
- ゴリラ
- ロケット
- 菜の花
- ジュゴン
- 鯨
- 蜂
上記に関してですが、
数字を好きな所から開始するように指定することができるので0や1からではなく10などの数字でも可能です。
(10からの数字などの必要場面があるかはわかりませんが笑)
<ol reversed=”●●” start=”●●”>
<li>フラッターブログ</li>
<li>フラッターブログ</li>
<li>フラッターブログ</li>
</ol>
上記の●●の部分を変えることにより表示が変わります!!
ぜひコピペで使ってみてください!
どんな意味なのか?!
reversed属性
リストの並び順を降順(大きい順)にする
start属性
リストの開始番号を整数で指定
上記のように順番を駆使しながらURLなども表示できます!
(実際の記事ですので気になったら読んで欲しいです!)
- flutter home
- flutter recommendation
- flutter profile
- フラッターブログオススメランキング!!
- フラッターブログhome
少し覚えてきたりするとランキング風にしたりなどできることは広がります!
ブログをやっている方は試しに少しづつ取り入れていくと良いかもしれませんね!
最初は簡単なのでも凄いことなのでぜひコピペでも使ってみてください!!
もし困ったらTwitterやってるのでお問い合わせください!!
読んでる方の世界が広がると嬉しいです!!!!
それでは次回の解説で!👍👍👍👍👍👍👍
作成masaki 監修Takaになります!!!
ブログ日記始めました!

完全感覚programmerという日記を始めたのでよかったら読んで欲しいです!
なるべく多く更新できるようにブログより更新していきます!
それでは次回の記事で!
個人的にオススメ記事になります!!
にほんブログ村 クリックだけでもお願いいたします。
個人的オススメ記事です!!

コメント