ga-05-f2

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

【 HTML/CSS逆引き辞典 】
ol・liを使った 番号付きの箇条書き

A.ul、ol、li
ulは、Unordered List(順序のない箇条書き)の略
olは、Ordered List(順序ありの箇条書き)の略
liは、List Item(リスト項目)の略

B.ol・liを使った番号付きの箇条書き
olとliをセットで使って数字などの番号付きの箇条書きを実現します

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
         箇条書き
          ol、liを使ったサンプル
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <div style="max-width:600px;
                midth:100%;
                margin:20px auto;
                border: solid 1px gray">
        <h3 style="text-align: center"><文法チェック></h3>
        <ol>
            <li>HTMLの開始タグと閉じタグの整合性を
                チェック</li>
            <li>CSSの波括弧の整合性をチェック</li>
            <li>スタイル適用の終わりにつける
                「;(セミコロン)」を「:(コロン)」と
                間違えていないかチェック。
                又は「;(セミコロン)」
                が抜けていないかチェック</li>
            <li>id、classは半角英字から始まっているか
            チェック</li>
            <li>id、class名に英字の大文字を使っていないか
            チェック</li>
            <li>日本語入力以外で日本語のブランクが入って
                いないかチェック。Sublime Textでブランクを
                検索する
            </li>
        </ol>
    </div>
</body>
</html>

        
ワンポイント

マーカーは、list-style-typeで変更できる。
・ol {list-style-type: none;}  ・・・ 無し
・ol {list-style-type: lower-latin;} 
      ・・・ 小文字のアルファベット
・ol {list-style-type: upper-latin;} 
      ・・・ 大文字のアルファベット

  ※このサンプルにはCSSコードはありません。

 back
pagetop
 next

ul・liを使った
黒ポチのついた
箇条書き

ol・liを使った
番号付きの箇条書き

ol・ul・liを使った
2階層の箇条書き

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken