ga-05-f1

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

【 HTML/CSS逆引き辞典 】
ul・liを使った 黒ポチのついた箇条書き

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

B.黒ポチ(・)のついた箇条書き
ulとliをセットで使って黒ポチなどの記号付きの箇条書きを実現します。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
         箇条書
          ul、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>
        <ul>
            <li>HTMLの開始タグと閉じタグの整合性を
                チェック</li>
            <li>CSSの波括弧の整合性をチェック</li>
            <li>スタイル適用の終わりにつける
                「;(セミコロン)」を「:(コロン)」と
                間違えていないかチェック。
                又は「;(セミコロン)」
                が抜けていないかチェック</li>
            <li>id、classは半角英字から始まっているか
            チェック</li>
            <li>id、class名に英字の大文字を使っていないか
            チェック</li>
            <li>日本語入力以外で日本語のブランクが入って
                いないかチェック。Sublime Textでブランクを
                検索する
            </li>
        </ul>
    </div>
</body>
</html>
        
ワンポイント

マーカーは、list-style-typeで変更できる。
・ul {list-style-type: none;}  ・・・ 無し
・ul {list-style-type: circle;}  ・・・ 白丸
・ul {list-style-type: square;} ・・・ 四角

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

 back
pagetop
 next

文字に影を付ける

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

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

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