ALICE+サポート タグ・デザイン掲示板 TOPページ タグ・デザイン掲示板 字下げをすると改行も一緒にしてしまう タグ・デザイン掲示板 『字下げをすると改行も一緒にしてしまう』へのコメント投稿 記事 3 へのレス:>>2 >>4の補足説明です。>>4からご確認ください。 とりあえず>>4は『やり方の説明』中心にまとめました。 以下は『なぜ余白行が生まれて、なぜこう書くと余白行が消えるのか』という話です。 一応ちらっと目を通していただければ……。 #🟥 自動改行機能 >自動改行“する”状態だと 【小説ページ編集】の〔本文〕入力欄などで↓のように書いた場合、 (⬇️=入力欄に入れた改行) ━━━━━━━━━━ * <h1>あいうえお</h1>⬇️ * <p>かきくけこ</p>⬇️ * さしすせそ ━━━━━━━━━━ ブラウザ上では⬇️が『改行タグ<br>』に変換されるため、 ━━━━━━━━━━ * <h1>あいうえお</h1><br> * <p>かきくけこ</p><br> * さしすせそ ━━━━━━━━━━ 上記のようになります。 これをサイト上やプレビューで見ると、 ━━━━━━━━━━ * あいうえお * * _かきくけこ * * さしすせそ ━━━━━━━━━━ と、『あいうえお』『かきくけこ』各行の下に不要な空白行が入ります。 このような『不要な空白行』と化すのは1行目と2行目、 * <h1>あいうえお</h1><br> * <p>かきくけこ</p><br> の「</h1><br>」と「</p><br>」の部分。正確には、 *「『閉じタグ(</h1>・</p>)』の直後にある『改行タグ(<br>)』」 が空白行と化します。 >>なので〔本文〕入力欄において、 >>「</○○>」の直後に改行⬇️を入力しなければ、 >>不要な空白行は入りません。 「</p>を入れない場合なら『かきくけこ』『さしすせそ』の間に空白行が入らない」のは、このためです。 この場合は『さしすせそ』行も<p>〜</p>要素の中に入っている状態なのです。 (閉じタグ</p>が無いので、 開始タグ<p>以降の文字『か〜そ』はすべて「<p>〜</p>要素の中に入っている」とブラウザに判断されている…と考えられる) 細かく言えば、「ブロックレベル要素の閉じタグ直後に改行⬇️を入れると、空白行ができてしまう」……とかいろいろあるのですが話が長くなるので、 とりあえずは # 自動改行“する”設定のときは『閉じタグ(</○○>)』の直後に改行⬇️を入れない で書けば、余計な空白行は避けられる……と考えてもらってOKです。 ▼参考 ブロックレベル要素とインライン要素|HTML5|HTML−havin' a coffee break|珈琲とウェブデザイン https://web.havincoffee.com/html/html5/com_b_block-inline.html ようは、 ●ブロックレベル要素(<p>とか<h1>とか<div>とか)の閉じタグ</○○>を入れる ↓ ●ブロックレベル要素の閉じタグ</○○>の直後には、そもそもHTMLの特性で「改行が入る」 ↓ ●なのに自動改行“する”状態で閉じタグ</○○>の直後に改行⬇️を入力してしまうと ↓ ●HTMLの特性で入った改行+自動改行機能で挿入された改行タグ<br> =2つ分の改行をしたのと同等の状態になる ……というような感じです。 なお>>3で紹介した(3)の書き方だと、 ━━━━━━━━━━ * (3)閉じタグ</p>を省略し、『<p>あいうえお…』の形で書いていく * <p>あいうえお⬇️ * <p>かきくけこ⬇️ * <p>さしすせそ ━━━━━━━━━━ ブラウザ上では以下のように閉じタグ</p>が補完されます。 ━━━━━━━━━━ * (3)閉じタグ</p>を省略し、『<p>あいうえお…』の形で書いていく * <p>あいうえお<br> * </p><p>かきくけこ<br> * </p><p>さしすせそ ━━━━━━━━━━ 「次のブロックレベル要素が開始する直前に閉じタグ</p>が入る」ので、 * <p>あいうえお<br></p><p>かきく… という感じに、 『自動改行で挿入された<br>』『閉じタグ</p>』の順番で並びます。 この場合なら閉じタグ直前の改行タグ<br>は余白行とはならないので、(3)のような書き方が可能となります。 ・ ・ ・ ついでにスタイルシート(p{……;}などの記述のことです)のほうですが、 前回紹介したmargin・paddingの指定は不要なので、>>0のときの状態 ━━━━━━━━━━ p{ text-indent: 1em; } ━━━━━━━━━━ に戻してもOKです。 テンプレのスタイルシートで既にmargin・paddingのゼロ指定がしてあったので。 ※下手に触りたくなければ>>1のmargin・padding指定は残したままでも問題ありません。 ▼お名前 ※最大20文字 ▼コメント ※最大10000文字 HTMLタグは使えません>>3 ▼画像添付(4個まで選択可) サクッとコメント スレッドへ 掲示板TOPへ ALICE+サポート