ga-05-f3

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

【 HTML/CSS逆引き辞典 】
ol・ul・liを使った 2階層の箇条書き

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

B.ol・ul・liを使った2階層の箇条書き
olとulとliをセットで使って2階層の箇条書きを実現します

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
           2階層の箇条書き
=====================================-->
<html>
<head>
     <meta charset="UTF-8">
     <title></title>
     <link rel="stylesheet" href="style-1.css">
</head>
<body>
<div style="max-width:450px;
                width:100%;
                margin:20px auto;
                border: solid 1px gray">
    <h3 style="text-align: center">
    <逆引き辞典 目次></h3>
       <ol>
          <li>要素の配置</li>
              <ul>
                <li>要素(テキスト)を中央に配置する</li>
                <li>要素(ブロック)を中央に配置する</li>
                <li>要素を横に並べる
                (TABLE CELLの利用)</li>
                <br>
              </ul> 
          <li>コメントボックスなどの配置</li>
              <ul>
                <li>コメントボックスを自在に配置する</li>
                <li>吹き出しを自在に配置する</li>
                <li>ボタンを自在に配置する</li>
                <br>
              </ul>
          <li>画面の幅に応じた文章の折返しと画像の縮小</li>
              <ul>
                <li>画面の幅に応じて文章を折り返す</li>
                <li>画面の幅に応じて文節で折り返す</li>
                <li>文字の折り返しを制御する</li>
                <br>
              </ul> 
      </ol>
</div>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
      2階層の箇条書き
--====================================*/
ul {list-style-type: square;
    margin-left:-20px;
}
ol li{font-weight: bold;
}
ul li{font-weight: normal
}
        
 back
pagetop
 next

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

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

逆インデントを使った
数字付きの箇条書き

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