HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

「激安ガーデン通販」では、只今期間限定セール開催中! [PR]

● リストの記述

箇条書きを表記するためのHTMLです。 リストには、順不同リスト (UL)、序列リスト (OL)、及びそれらのリスト項目(LI)と、定義リスト(DL)、及び用語(DT)、記述(DD)があります。それぞれ以下のようなリストのことです。

<UL>順不同
  <LI> …1行</LI>
  <LI> …2行</LI>
</UL>
<OL>順に・・・
  <LI> …1行</LI>
  <LI> …2行</LI>
</OL>
<DL>ココの無駄な改行について・・・
 <DT>第一項</DT>
  <DD>改行されるからといって文字を記入していいのか?</DD>
 <DT>第二項</DT>
  <DD>次の項目</DD>
</DL>

    順に・・・   
  1. …1行
  2.   
  3. …2行
ココの無駄な改行について・・・  
第一項
  
改行されるからといって文字を記入していいのか?
 
第二項
  
改行されないブラウザでどう表示されるかが心配だ。

○リストマーカーのスタイルを設定する

このリストの記述に対しlist-style-typeを設定する事で、下の記号をリストのマークとして使用できます。

disc ●(黒丸)
circle ○(白丸)
square ■(四角)
decimal 1,2,3・・・(数字)
lower-roman i,ii,iii・・・(小文字のローマ数字)
upper-roman I,II,III・・・(大文字のローマ数字)
lower-alpha a,b,c・・・(小文字のアルファベット)
upper-alpha A,B,C・・・(大文字のアルファベット)
none  なし(記号を表示しない)
↓↓<UL style="list-style-type:circle">
↓↓<OL style="list-style-type:lower-alpha">
      
  1. …1行   
  2. …2行

○リストマーカーにイメージを利用する

規定の用意されたマークではなく画像を使用したい場合はlist-style-imageを設定します。
URLを指定すると指定画像を表示できます。ここではマーク代わりに指の画像を使用してみました。
↓↓<UL style="list-style-image:url(mark.gif)">

○リストマーカーの位置を設定する

リスト項目で改行が行われた場合、改行後の行頭一をlist-style-positionで設定します。
inside』(マーク下に行頭)と『outside』(マーク下をあけて行頭) のどちらかを設定します。初期値はoutsideです。
↓↓<UL style="list-style-position:outside">

↓↓<UL style="list-style-position:inside">

○リストスタイルの一括設定

なお、list-styleを使用すれば上記の 『list-style-type』/『list-style-image』と、 『list-style-position』のプロパティを一括で設定できます。
↓↓<UL style="list-style:lower-roman inside">

<<前へ  |上へ|  次へ>>
1234567891011121314151617

パソコンのウイルス対策大丈夫ですか?どれかひとつは入れておきたい対策ソフト
マカフィー・ストア シマンテックストア ウイルスバスター公式トレンドマイクロ・オンラインショップ

TOP] [HOME

更新日時:2014/08/09