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

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

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

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

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

あわせて読みたい
429 Too Many Requests
フラッターブログ
初心者でも分かるHTML単語解説Ⅱ ~ フラッターブログ HTML言語を初心者向け解説している記事になります!
にほんブログ村 にほんブログ村へ
クリックいただけると嬉しいです!
PVアクセスランキング にほんブログ村
クリックいただけると嬉しいです
目次

リストタグとは?!

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

  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>

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


  1. フラッターブログは面白い
  2. フラッターブログはずっと見れる
  3. フラッターブログをみんなにシェアする

●●の部分を数字の1にした場合


  1. フラッターブログは面白い
  2. フラッターブログはずっと見れる
  3. フラッターブログをみんなにシェアする

●●の部分をアルファベットのiにした場合


  1. フラッターブログ1ページ
  2. フラッターブログ2ページ
  3. フラッターブログ3ページ

●●の部分をアルファベットのAにした場合


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

●●の部分をアルファベットのaにした場合


  1. フラッターブログは面白い
  2. フラッターブログはずっと見れる
  3. フラッターブログをみんなにシェアする

●●の部分をアルファベットの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タグはメインよりもサポートのような役割で使われます!

応用編!

リストの応用ができると少し違うことができます!

応用編として紹介していきます!

  1. ゴリラ
  2. ロケット
  3. 菜の花
  1. ジュゴン

上記に関してですが、
数字を好きな所から開始するように指定することができるので0や1からではなく10などの数字でも可能です。
(10からの数字などの必要場面があるかはわかりませんが笑)

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

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

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

どんな意味なのか?!

reversed属性
リストの並び順を降順(大きい順)にする

start属性
リストの開始番号を整数で指定

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

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

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

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

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

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

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

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

ブログ日記始めました!

masakiの日記

完全感覚programmerという日記を始めたのでよかったら読んで欲しいです!

なるべく多く更新できるようにブログより更新していきます!

それでは次回の記事で!

にほんブログ村 にほんブログ村へ
クリックいただけると嬉しいです!

個人的にオススメ記事になります!!

フラッターブログ
初心者向け!CSS単語解説 CSSとは? ~ フラッターブログ HTMLやCSSの単語を解説しています!!! css 初心者向きな講座です
にほんブログ村 にほんブログ村へ
にほんブログ村 クリックだけでもお願いいたします。

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

あわせて読みたい
429 Too Many Requests
フラッターブログ
俺がこんな趣味にハマるはずがない ~競馬ルート~ ~ フラッターブログ フラッターブログの住人Hikkeyです。 今回は自分の趣味についてをテーマに書いていきます! フラッターブログのプロフィールにも記載してますが以下の3つが自分の趣味にな...

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる