ga-05-g2

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

【 HTML/CSS逆引き辞典 】
逆インデントを使った 記号付きの箇条書き

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

【サンプル画像】

画像

【サンプル コード】
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

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

逆インデントを使った
記号付きの箇条書き

画像の貼り付け
縮小・拡大

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