初心者でもわかるHTML単語解説 Ⅲ

フラッターブログを見ていただきありがとうございます！！ masakiです！！！

人気シリーズのHTML単語解説をやっていきたいと思います。

今回はリストタグについてです！

下記にて過去の解説シリーズURL載せておきます！！

フラッターブログ

初心者でも分かるHTML単語解説！！ ~ フラッターブログ HTML言語をを初心者向けで解説している記事になっております！

フラッターブログ

初心者でも分かるHTML単語解説Ⅱ ~ フラッターブログ HTML言語を初心者向け解説している記事になります！

リストタグとは?!

みなさまはサイトを見る時、下記のようなリストなどを見ませんか？

1. フラッター1
2. フラッター2
3. フラッター3

• ブログ1
• ブログ2
• ブログ3

今回はリストタグについての解説になります！！

リストを作成するタグです！

<ol></ol>

<ul></ul>

<li></li>

olタグ

リストの表記は以下のように記載するとできます！

<ol type=”●●”>
　<li>フラッターブログ</li>
　<li>フラッターブログ</li>
　<li>フラッターブログ</li>
</ol>

●●のところを変えるだけで表記が変わります！！！
ぜひコピペでやってみてください！

上記のような感じで色々できます！！

できると便利なので覚えておいて損はないと思います！！！

ブログをやっている方だと使う場面は結構あるかもしれませんね！

ulタグ

• フラッター1
• ブログ2
• フラッターブログ3

続いては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>

上記の●●の部分を変えることにより表示が変わります！！

ぜひコピペで使ってみてください！

上記のように順番を駆使しながらURLなども表示できます！
（実際の記事ですので気になったら読んで欲しいです！）

少し覚えてきたりするとランキング風にしたりなどできることは広がります！

ブログをやっている方は試しに少しづつ取り入れていくと良いかもしれませんね！

最初は簡単なのでも凄いことなのでぜひコピペでも使ってみてください！！

もし困ったらTwitterやってるのでお問い合わせください！！

読んでる方の世界が広がると嬉しいです！！！！

それでは次回の解説で！👍👍👍👍👍👍👍

作成masaki　監修Takaになります！！！

フラッターブログ

初心者向け！CSS単語解説 CSSとは？ ~ フラッターブログ HTMLやCSSの単語を解説しています！！！ css 初心者向きな講座です

にほんブログ村 クリックだけでもお願いいたします。

個人的オススメ記事です！！

フラッターブログ

オススメ！疲労回復食材！！ ~ フラッターブログ 一分間でわかる当ブログ記事概要について　・疲労回復につながるおすすめ食材　　肉類　大豆　果物　野菜の紹介！　　 フラッターブログ住人のkoukiです！！ 10月に入って...

フラッターブログ

俺がこんな趣味にハマるはずがない ~競馬ルート~ ~ フラッターブログ フラッターブログの住人Hikkeyです。 今回は自分の趣味についてをテーマに書いていきます！ フラッターブログのプロフィールにも記載してますが以下の３つが自分の趣味にな...