ga-05-g1

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="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;
}
        

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

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

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

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