備忘録(インデントについて)
全てのページにおいて有効となるよう、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 さしすせそ◆たちつてと
投稿者プロフィール
最新の投稿
備忘録2022年2月4日拡張子とは、何ですか?
備忘録2021年9月22日VBAで出席名簿を作ってみた
HP作成講座2021年9月6日WordPressローカル環境構築 その1
お知らせ2021年6月1日2021年後半のカレンダーをアップロードしました