2021年 4月 の投稿一覧

改行や段落、字下げをhtml/cssタグで編集すれば見栄えを改善させることが出来ます。

今日の記事ではhtmlタグを用いた段落や字下げ、cssでのインデント設定を使いこなして、ブログの自由度をアップデートさせる方法について詳しく解説していきます。

☑htmlタグにおけるテキストの改行

htmlタグでの改行は上下文字列にスペースなし

htmlでの改行タグを用いると、上下文字列にスペースなく改行をすることができます。

下記で違いを見てみましょう。上記は改行タグでの改行。下記は段落タグで用いた文字列になります。

————改行タグの例—————
これは改行です。
改行には上下文字列にスペースがありません。
改行タグにはこのような特徴があります。
——————————————-

————段落タグの例—————
これは段落です。

段落には上下文字列にスペースがあります。

段落タグにはこのような特徴があります。
——————————————-

改行タグと段落タグはこのような特徴があります。

htmlでの改行はbrタグを末尾につける

htmlでの改行は簡単。文字列の末尾に<br />タグをつけるだけです。

前述のbrタグでの改行例を用いて、テキストエディタで編集すると以下のようになります。

————改行タグの例—————
これは改行です。<br />
改行には上下文字列にスペースがありません。<br />
改行タグにはこのような特徴があります。
——————————————-

ご自身でもタグを使ってみて、プレビューを確認してみましょう。

箇条書きで便利な改行タグbr

改行タグbrの有効利用はたくさんありますが、自身は箇条書きを記載するときによく使います。

段落で箇条書をすると文字列の上下にスペースが空きます。

段落箇条書き

①段落１

②段落２

③段落３

一方、改行タグでの箇条書きは上下文字列の感覚なく、ひとまとまりで提示できます。

改行箇条書き
①改行１
②改行２
③改行３

好みによるところもありますが、brタグを上手に使いましょう。

☑htmlタグにおける文字列の段落

html段落タグは文章をブロック単位で分ける

前述したようにhtml段落タグは改行タグと違って、文章をブロック単位で分けてくれます。

改行タグだけ用いた文章では、どこか平易な感じとなることがあり、文章毎に区切りをつけようとすると段落タグが力を発揮してくれます。

また読みやすさという点では、段落タグを用いることは大切です。

htmlで段落を作るpタグの使い方とは

htmlで段落を作るタグはpタグになります。

具体的な使い方は、<p>文章</p>といった形でpタグで囲うことで、文章を段落でのブロック単位で分けることができます。

なお<p style〜>文章</p>となることもありますが、これでも改行タグとしては機能するので問題はありません。

段落と改行をhtmlタグで使い分け

大切なのは段落と改行をそれぞれhtmlタグで使い分けをすることです。

ひとかたまりの文章で提示したいときは改行タグでまとめる。文章毎に区切りをつけて見やすくしたいときには段落タグを用いるなど、用途に応じて区別しましょう。

特にwordpressブログでは文章の見栄えが命です。htmlタグをうまく使って、センスを磨いていきましょう。

☑html/cssでインデントを使う

html/cssでの字下げコード

最後に紹介するのはhtml/cssを用いた字下げコードです。以下にコードを例示します。

<p style=”padding-left: 40px;”>文章</p>

このコードを簡単に説明すると、padding-leftで左側にスペースを空けてインデントの機能を果たしてくれます。上記の例では40px分だけインデントしているという設定になります。

文章の部分に入った文字列がインデント対象になります。

html/cssなら一文字下げるのも行頭を揃えるのも自由

前述のようにインデントでは字下げの間隔を制御することができます。

たとえば一文字分だけ下げたい場合には、px単位でプレビューを確認しながら制御することも可能です。

また字下げのpxを揃えることで、行頭を揃えることも可能です。

段落や改行、そして字下げも上手く使って見やすい文章を作成しましょう。