2021．9.27 中村
箇条書きなどの文章を書く場合に、文章の先頭に「◆」、「□」、「※」、「１）」「（２）」などの記号や数字の段落記号を文の冒頭に記述することがあります。なにもしなければ、2行目以降がその記号の下に回り込んでしまうことが気になります。特にスマホのように、画面の横幅サイズが小さい場合にはよく見られます。手作業で地道に空白を入れたり、改行を入れたり、記号を画像で背景設定したりすれば、回避は出来ますが、自動的に「やっぱりテキストで綺麗に表示させたい！」というときに、以下の方法で簡単に出来ます。
《1文字下げる場合》
◆ここに左カラムに表示させたい任意のテキストや画像タグを入力します。
👇
◆ここに左カラムに表示させたい任意のテキストや画像タグを入力します。
・HTMLの記述
<p class="ind-1">◆ここに左カラムに表示させたい・・・・
・追加するCSS
/*インデント1em 調整*/
.post_content p.ind-1
{text-indent:-1em;margin-left:1em;}
《2文字下げる場合》
１）ここに中央カラムに表示させたい任意のテキストや画像タグを入力します。
👇
１）ここに中央カラムに表示させたい任意のテキストや画像タグを入力します。
・HTMLの記述
<p class="ind-2">１）ここに中央カラムに表示・・・・
・追加するCSS
/*インデント2em 調整*/
.post_content p.ind-2
{text-indent:-2em;margin-left:2em;}
《3文字下げる場合》
（２）ここに右カラムに表示させたい任意のテキストや画像タグを入力します。
👇
（２）ここに右カラムに表示させたい任意のテキストや画像タグを入力します。
・HTMLの記述
<p class="ind-3">（２）ここに右カラムに表示・・・・
・追加するCSS
/*インデント3em 調整*/
.post_content p.ind-3
{text-indent:-3em;margin-left:3em;}
◇ 2文字の字下げの例：「コロナに負けない」2021.9.4ぶん
記事がよければ「いいね！マーク」のクリックをお願いします
この記事へのコメントはありません。