ga-04-10

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

10.箇条書き

目   次

1.HTMLタグul・ol・liを使った箇条書き
  A.ul、ol、liの意味
  B.黒ポチ(・)のついた箇条書き
  C.番号付きの箇条書き
  D.2階層の箇条書き

2.逆インデントを使った箇条書き
  A.数字付きの箇条書き
  B.記号付きの箇条書き

  1.HTMLタグul・ol・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;
                width: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コードはありません。


【サンプル画像】

画像

【サンプル コード】
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コードはありません。


【サンプル画像】

画像

【サンプル コード】
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;
                midth: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
}
        
  
  2.逆インデントを使った箇条書き

インデントは先頭の文字を字下げすることに用いますが、箇条書きではインデントにマイナス数字を指定して先頭の文字を字上げします。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
 逆インデントを使った数字付き箇条書き
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
<div style="max-width:450px;
            midth:100%;
            margin:20px auto;
            padding: 10px;
            border: solid 1px gray">
 <h3 style="text-align: center">
 <ホームページ作成講座 ガイダンス(抜粋)>
 </h3>
     
    <p class="d-kajyougaki-a">
    1.簡単なサンプル画像を基にしたHTML及び
    CSSのコードをコピー&ペーストで貼り付け、様々に
    加工することによって、HTML及びCSSを体感・
    体得します。理論・理屈は後から勉強します。
    </p>

      <p class="d-kajyougaki-a">
    2.HTML及びCSSをコーディングしていると思った
    通りにならないことが多々発生します。ミスを少なくする
    コーディングルールを作成し、トラブルが発生したときの対処
    について提案します。
    </p>

    <p class="d-kajyougaki-a">
    3.設計の方法論無く、HTML及びCSSを
    コーディングすると修正ができない、追加ができないなどの
    事態が発生します。このような事態を避けるために設計の
    方法を提案します。骨組みHTMLの作成とCSSの
    共通化です。
    </p>
</div>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
   逆インデントを使った箇条書き
--====================================*/
.d-kajyougaki-a{
   padding-left: 2em;
   text-indent: -2em;
}
        
【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
 逆インデントを使った記号付き箇条書き
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
<div style="max-width:450px;
                midth:100%;
                margin:20px auto;
                padding:10px;
                border: solid 1px gray">
    <h3 style="text-align: center">
          <ホームページ作成講座 ガイダンス(抜粋)></h3>

    <p class="m-kajyougaki-red">
        <span class="m-kajyougaki-red span">◆</span>
          簡単なサンプル画像を基にしたHTML及び
          CSSのコードをコピー&ペーストで貼り付け、
          様々に加工することによって、HTML及び
          CSSを体感・体得します。理論・理屈は
          後から勉強します。
    </p>

    <p class="m-kajyougaki-red">
          <span class="m-kajyougaki-red span">◆</span>
          HTML及びCSSをコーディングしていると
          思った通りにならないことが多々発生します。
          ミスを少なくするコーディングルールを作成し、
          トラブルが発生したときの対処について提案します。
    </p>
    

    <p class="m-kajyougaki-red">
        <span class="m-kajyougaki-red span">◆</span>
          設計の方法論無く、HTML及びCSSを
          コーディングすると修正ができない、追加が
          できないなどの事態が発生します。このような
          事態を避けるために設計の方法を提案します。
          骨組みHTMLの作成とCSSの共通化です。
    </p>
</div>
</body>
</html>
        
ワンポイント

記号は変更できる。
例えば、★、※、■、等々

ワンポイント

記号の色も変更できる。
CSSに登録が必要。

CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
 逆インデントを使った数字付き箇条書き(赤)
--====================================*/
.m-kajyougaki-red {
    padding-left: 2.0em;
    text-indent: -4.0em;
}
.m-kajyougaki-red  span {
    display: inline-block;
    width: 1.5em;
    text-indent: 0.5em;
    color:red;
    font-weight: bold;
    font-size: 1.1em;
}
/*--====================================
 逆インデントを使った数字付き箇条書き(青)
--====================================*/
.m-kajyougaki-blue {
    padding-left: 2.0em;
    text-indent: -4.0em;
}
.m-kajyougaki-blue  span {
    display: inline-block;
    width: 1.5em;
    text-indent: 0.5em;
    color:blue;
    font-weight: bold;
    font-size: 1.1em;
}
        
 back
pagetop
 next

リンク
(linkタグ、aタグ)

箇条書き

表作成(テーブル)

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