備忘録(インデントについて)

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

以前、印刷業に籍を置いていてこういう時に役に立ったと今更ながら思うのである。
まず、脚注の囲みを描くため、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;
}

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

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

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

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

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

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

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

脚注

※1 あいうお◆かきくけこ
※2 さしすせそ◆たちつてと

Follow me!

投稿者プロフィール

近江公人
近江公人asamai-cts Owner
あさまいCTSの代表オヤジです(59歳)
横手市中央町で「ラーメン与市」を2012年まで約15年間を経営。
その後、「横手市雇用創出協議会 実践支援員」を経て、一時会社勤めをするが体調を崩し、再度、自営業の世界に戻る。
現在の「あさまいCTS」は2019年1月に起業。業務内容は主に、パソコンの修理、出張スマホ・パソコン教室、ホームページ作成 その他何でも屋みたいなものです・・・