TOPページ　＞　箇条書きにする
箇条書きにする

箇条書きにする

ホームページやブログなどのウェブサイトで一覧などを表示する際に、簡単なHTMLタグで 見やすく箇条書きにすることができます。

デフォルトでは適当に文字下げされ、上下に余白がとられ、先頭に『●』などの記号や数字が付加されて表示されます。

もちろん余白の量や見出しに付ける数字や記号はお好みで指定できます。

箇条書きにする 項目一覧

見出し（定義語）とその内容（説明）を、専用タグで見やすく箇条書きにすることができます。 <dl 圧縮形式> <dt>定義語（見出し） &...

ホームページやブログなどのウェブサイトでは、HTML言語の OL タグや LI タグを使って、文章を箇条書きにして表示することができますが、これらのタグを使うと...

<ol>タグで文章を箇条書きにする際に、開始番号を指定することができます。 olタグで指定する場合： <ol start="開始番号...

<ol>タグで文章を箇条書きにする際に、番号形式を指定することができます。 <タグ名 type="番号形式">～&l...

ホームページやブログなどのウェブサイトで、リストなどを表示する際に、簡単なHTMLタグで文章を箇条書きにすることができます。通し番号付きで箇条書きにする場合には...

ホームページやブログなどのウェブサイトで 一覧などを箇条書きにする際には ULやDIRおよびMENUタグといったHTMLタグを使用しますが、このとき style...

ホームページやブログなどのウェブサイトで、リストなどを表示する際に、簡単なHTMLタグで文章を箇条書きにすることができます。 <ul> <li...

2006年02月14日

見出し（定義語）とその内容（説明）を、専用タグで見やすく箇条書きにすることができます。

<dl 圧縮形式>
<dt>定義語（見出し）
<dd>箇条書き文章（内容や説明）･･･箇条書きの数だけ繰返し
</dl>

という記述になります。

お申し込みについて
当社指定のお申込書にご記入のうえ、お申込金としてご利用代金の20％を相当額を添えてお申し込みください。
お電話によるお申し込みも承りますが、別途お申込書とお申込金をご提出ください。

このソースは、次のようになります。

<dl>
<dt>お申し込みについて
<dd>当社指定のお申込書にご記入のうえ、お申込金としてご利用代金の20％を相当額を添えてお申し込みください。
<dd>お電話によるお申し込みも承りますが、別途お申込書とお申込金をご提出ください。
</dl>

定義語が短い場合は、compact をつけると見出し内容が同じ行に表示されます。

ご注意
上記の経費は、お客様のご都合により一部利用されなくても、払い戻しはいたしません。

このサンプルのソースは次のようになります。

<dl compact>
<dt>ご注意
<dd>上記の経費は、お客様のご都合により一部利用されなくても、払い戻しはいたしません。
</dl>

投稿者: Melody 日時: 12:14 | 　[ブログでもだいたい使えるHTMLタグ リファレンスTOPへ]

ホームページやブログなどのウェブサイトでは、HTML言語の OL タグや LI タグを使って、文章を箇条書きにして表示することができますが、これらのタグを使うと、通常自動で 文章の上下や左に余白がとられます。

スタイルを指定しない場合、デフォルトでの余白の量はブラウザの場合によってまちまちですが、必要に応じて、この余白を指定したほうがいいかも知れません。

このとき、各要素の領域の捉え方が異なるため、余白（マージンやパディング）を指定した際の挙動がブラウザにより大きく異なるので、注意が必要です。

テーブルを作成する
<ol style="background-color:yellow;">
<li style="background-color:orange;">縦にまたがるセルを作成する
<li style="background-color:orange;">横にまたがるセルを作成する
<li style="background-color:orange;">テーブルに枠線を付ける
<ul style="background-color:lime;">
<li style="background-color:cyan;">枠線の色を指定する
<li style="background-color:cyan;">枠線の太さを指定する
</ul>
<li style="background-color:orange;">テーブルに表題を付ける
<li style="background-color:orange;">セル内の余白を指定する
</ol>

このサンプルは、わかりやすいように各要素の背景色を指定しています。このソースを、InternetExplorer と Netscape の両ブラウザでそれぞれ表示させると、次のようになります。

  • InternetExplorerの場合
    InternetExplorerでのリスト表示
  • Netscapeの場合
    Netscapeでのリスト表示

デフォルトでは両方ともだいたい同じように見えますが、IEは マージンのみで、NNはパディングのみで数字や記号の表示領域（幅）を確保しています。

このため IEでデフォルトのマージンが多すぎるな、と思ってマージンを指定すると、 NNではマージンが0から増える格好になりますのでブロック全体がさらに右側に下がります。一方NNでパディングが多すぎるな、と思ってパディングを指定すると今度は IEで0だったパディングが増えますので右側に下がります。

両ブラウザの考慮して調節しましょう。上記のソースで、インデントを少し抑えたかたちにしてみます。

続きを読む "箇条書き文章の余白を指定する" »

投稿者: Melody 日時: 11:36 | 　[ブログでもだいたい使えるHTMLタグ リファレンスTOPへ]

2006年02月07日

<ol>タグで文章を箇条書きにする際に、開始番号を指定することができます。

olタグで指定する場合：
<ol start="開始番号">～</ol>
liタグで指定する場合：
<li value="開始番号">～

という記述になります。<ol>タグで指定すると全体を対象に、<li>タグで指定すると個別に開始番号を指定することができます。

開始番号を指定してみます。

テーブルを作成する
<ol>
<li value="5">縦にまたがるセルを作成する
<li>横にまたがるセルを作成する
<li>テーブルに枠線を付ける
<ol start="20">
<li>枠線の色を指定する
<li>枠線の太さを指定する
</ol>
<li value="10">テーブルに表題を付ける
<li>セル内の余白を指定する
</ol>

これを表示させると、次のようになります。

テーブルを作成する
  1. 縦にまたがるセルを作成する
  2. 横にまたがるセルを作成する
  3. テーブルに枠線を付ける
    1. 枠線の色を指定する
    2. 枠線の太さを指定する
  4. テーブルに表題を付ける
  5. セル内の余白を指定する

投稿者: Melody 日時: 16:10 | 　[ブログでもだいたい使えるHTMLタグ リファレンスTOPへ]

<ol>タグで文章を箇条書きにする際に、番号形式を指定することができます。

<タグ名 type="番号形式">～</タグ名>
  • タグ名：<ol>タグで指定すると全体を対象に、<li>タグで指定すると個別に番号形式を指定することができます。終了タグは、＆lt;li>の場合省略できます。
  • 番号形式：下表のなかから選べます。『1』、『a』などのキーワードで指定します。
    キーワード番号形式
    1 （数字のイチ）算用数字（1、2、3、4、･･･）
    a英小文字（a、b、c、d、･･･）
    A英大文字（A、B、C、D、･･･）
    i （英小文字のアイ）ローマ数字（小文字　ⅰ、ⅱ、ⅲ、ⅳ、･･･）
    I （英大文字のアイ）ローマ数字（大文字　Ⅰ、Ⅱ、Ⅲ、Ⅳ、･･･）

番号形式を指定してみます。

テーブルを作成する
  1. 縦にまたがるセルを作成する
  2. 横にまたがるセルを作成する
  3. テーブルに枠線を付ける
    1. 枠線の色を指定する
    2. 枠線の太さを指定する
  4. テーブルに表題を付ける
  5. セル内の余白を指定する

このソースは、次のようになります。赤字部分で各項目の番号形式を、青字部分で入れ子になっている箇条書き文章全体の番号形式を指定しています。

<ol>
<li type="1">縦にまたがるセルを作成する
<li type="a">横にまたがるセルを作成する
<li type="A">テーブルに枠線を付ける
<ol type="i">
<li>枠線の色を指定する
<li>枠線の太さを指定する
</ol>
<li type="I">テーブルに表題を付ける
<li type="I">セル内の余白を指定する
</ol>

続きを読む "箇条書きの番号形式を指定する" »

投稿者: Melody 日時: 15:05 | 　[ブログでもだいたい使えるHTMLタグ リファレンスTOPへ]

2006年02月06日

ホームページやブログなどのウェブサイトで、リストなどを表示する際に、簡単なHTMLタグで文章を箇条書きにすることができます。通し番号付きで箇条書きにする場合には ol タグを使います。

デフォルトでは適当に文字下げされ、上下に余白が取られ、先頭に 1、2、3...というふうに通し番号が付加されて表示されます。

<ol>
<li>箇条書きにする項目（項目の数だけ繰返し）
</ol>

という記述になります。
サンプルソースです

続きを読む "箇条書きにする（通し番号あり）" »

投稿者: Melody 日時: 01:07 | 　[ブログでもだいたい使えるHTMLタグ リファレンスTOPへ]

ホームページやブログなどのウェブサイトで 一覧などを箇条書きにする際には ULやDIRおよびMENUタグといったHTMLタグを使用しますが、このとき style指定で箇条書きの項目文章の頭に付加する記号を指定することができます。

<タグ名 style="list-style-type:記号の種類">
  • タグ名：ul や menuおよびdir といったブロックタグで指定するとそのブロック文章全体を対象に、li タグで指定すると個別に設定できます。
  • 記号の種類：下記から選べます。
    disc
    • （小さい黒丸）
    circle
  • （小さい白丸）
    • square
  • （小さい四角）
    • none
  • なし
    • decimal
  • 算用数字
    • lower-roman
  • 英小文字
    • upper-roman
  • 英大文字
    • lower-alpha
  • ローマ数字（小文字）
    • upper-alpha
  • ローマ数字（大文字）

ただし、Mac + Netscape 4 では、このスタイル指定は反映されず、『？』が表示されます。
Win + Netscape 4 では、none は反映さえますが、それ以外は白丸になります。
Internet Explorer 4 では、マークの形状に　decimal を指定すると、数値が表示されてしまいます。

サンプルソースです。

続きを読む "箇条書きの頭の記号を指定する" »

投稿者: Melody 日時: 00:08 | 　[ブログでもだいたい使えるHTMLタグ リファレンスTOPへ]

2006年02月05日

ホームページやブログなどのウェブサイトで、リストなどを表示する際に、簡単なHTMLタグで文章を箇条書きにすることができます。

<ul>
<li>箇条書きにする項目（項目の数だけ繰返し）
</ul>

という記述になります。<ul>の代わりに、。<menu>や。<dir>でもＯＫです。また、箇条書きの中に箇条書きを入れ子にすることもできます。

サンプルソースです。

続きを読む "箇条書きにする（通し番号なし）" »

投稿者: Melody 日時: 23:41 | 　[ブログでもだいたい使えるHTMLタグ リファレンスTOPへ]

IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス