初心者向けHTML入門の決定版:タグHTML

li要素・liタグとは

Facebook にシェア
このエントリーをはてなブックマークに追加
Tweet

リストの項目を表す li要素

自分はブロック要素かインライン要素か ブロック要素
含むことができる要素型 ブロック要素とインライン要素
名称の由来 li は list item(リスト項目) を省略したもの

リスト項目として利用されるli要素は、ol要素またはul要素と共に利用される(ol要素、ul要素の内部で1つ以上のli要素を含ませるルールである)。

ul要素、ol要素は1つ以上のli要素を含む必要がある。
※間違えやすいのだが、ul要素、ol要素の直下にli要素以外を配置するのは文法的に正しくない。
※定義リストを示すdl要素の項目はdt要素とdd要素を使のでli要素は使われない。

<ul>
    <li>小麦粉200g</li>
    <li>砂糖10g</li>
    <li>牛乳1カップ</li>
    <li>卵3個</li>
    <li>塩コショウ</li>
</ul>

含むことができる要素について

li要素は内部にブロック要素、インライン要素のどちらも含むことができる。ほとんどのHTML要素を含むことができるため、自由度が高いのが特徴である。

最近のWEBサイトではli要素とcssのfloatプロパティを組み合わせることで項目が横並びのナビゲーションを表現する等、li要素の汎用性の高さが目立つ。

リストマーカーについて

ブラウザにおいて、ul要素に内包されるli要素には黒丸が、ol要素に内包されるli要素には1からの10進数などのリストマーカーがデフォルトで表示される。このリストマーカの種類はスタイルシートを利用する事で変更が可能である。

具体的にはcssの「list-style-type」や「list-style-image」を利用する事でリストマーカーの表示種別を変更する。

以下、スタイルシートでリストマーカーを変更した実例を示す。

  • 黒丸 list-style-type:disc;
  • 白丸 list-style-type:circle;
  • 表示しない list-style-type:none;
  • 四角 list-style-type:square;
  • 自分で用意した画像(横向き三角の画像) list-style-image: url(xxxx);

また、cssの「list-style-position」を利用する事で、リストマーカーを基本となるブロックボックスの外側に配置するか(outside)、内側に配置するか(inside)を指定することができる。

これはp要素内に記述された文章です。左端が基本ブロックボックスの基準位置になります。

  • これはlist-style-positionプロパティの値にoutsideを設定した例になります。基本ブロックボックスの外側にリストマーカーが配置されます。
  • これはlist-style-positionプロパティの値にinsideを設定した例になります。基本ブロックボックスの内側にリストマーカーが配置されます。
この記事を見た人はこんな記事も見ています
  • br要素・brタグについて
  • li要素・liタグとは
  • ol要素・olタグとは
  • img要素・imgタグとは
  • tr要素・trタグとは

HTML要素(タグ)一覧

a  abbr  acronym  address  applet  area  b  base  basefont  bdo  big  blockquote  body  br  button  caption  center  cite  code  col  colgroup  dd  del  dfn  dir  div  dl  dt  em  fieldset  font  form  frame  frameset  h1 - h6  head  hr  html  i  iframe  img  input  ins  isindex  kbd  label  legend  li  link  map  menu  meta  noframes  noscript  object  ol  optgroup  option  p  param  pre  q  s  samp  script  select  small  span  strike  strong  style  sub  sup  table  tbody  td  textarea  tfoot  th  thead  title  tr  tt  u  ul  var  <!-- --> 

ブロックレベル要素一覧

p  h1-h6  ul  ol  dir  menu  pre  dl  div  center  noscript  noframes  blockquote  form  isindex  hr  table  fieldset  address 

インライン(テキストレベル)要素一覧

フォントスタイルに関するもの
tt  i  b  big  small
フレーズ・句に関するもの
em  strong  dfn  code  samp  kbd  var  cite  abbr  acronym
特別なもの
a  img  object  br  script  map  q  sub  sup  span  bdo
フォームに関するもの
input  select  textarea  label  button 

  • sitemap
  • 運営者情報
  • 免責事項
designed by ホームページ制作のササエル
Copyright © tagHTML All Rights Reserved.