備忘録（インデントについて）

全てのページにおいて有効となるよう、CSSには<p>タグには１行目のインデントが効くよう記述しているため、脚注として使用する場合には印刷業者の組版的な目から見るとレイアウト的におかしくなるので、新たなクラスを作成し希望通りに表示させるようにしてみた。

以前、印刷業に籍を置いていてこういう時に役に立ったと今更ながら思うのである。
まず、脚注の囲みを描くため、CSSを下記に自分自身のために備忘録として記述した。

/* 脚注をコラムで囲む処理 */
.footnote-01 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 1.5px #62c1ce;	/水色/
    background: #62c1ce40;
}

.footnote-01 .box-title-01 {
    position: absolute;
    display: inline-block;
    top: -25px;
    left: -1px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    background: #62c1ce; 	/水色/
    color: #ffffff;		/文字白色＝脚中/
    border-radius: 5px 5px 0 0;
}

.footnote-01 p {
    margin: 0; 
    padding: 0;
    font-size: 12px;
}

また、１行目だけのインデントをコントロールするCSSは下記のとおり。

/* 本文１行目0字下げ */
.textindent0em{
    text-indent: 0em;
}

/* 本文１行目1字下げ */
p { text-indent: 1em;}

脚注とインデントのクラスを組み合わせてみたものが下記のhtmlコード。

/*見出し付き罫囲みの１行目インデントなし*/

<div class="footnote-01"><span class="box-title-01">脚注</span>
<p class="textindent0em">※１　あいうお◆かきくけこ<br>※２　さしすせそ◆たちつてと</p>
</div>

実際のHTMLで表示されるのは以下の通り。