<pre> 行間を狭めて入力したまま表示される<br>タグを使わないいい方法 HTML,CSS復習17

この記事でわかること

 

行間を狭めて入力したまま表示される方法がわかる

こんにちは、今日はHTML,CSS復習の16回目となりました。
みなさんブログを書いていると勝手にpタグやdivタグが量産されて、行間が空きまくるってことないですか？
今回はそのお悩み一気に解決できるpreタグについて紹介していきます。

<pre>タグの便利な使い方

<pre>タグを使うと入力したままそのまま表示されるのですごい便利なんです。

改行や空白もそのまま表示できて<br>タグを使わないでいいです。

またそれにより行間を狭めることができます。

ただしそのままpreタグを使うと背景が黒くなって枠も勝手についてしまうのでスタイルシートを用意して

・背景を白

・フォントサイズを14

・文字色を黒

・枠線なし

にしていきます。

まず背景を白にするにはbackgroud:none;を使います。

background:none;

フォントサイズを15pxにします。

font-size:15px;

文字色を黒にします

color:black;
font:bold;   /*文字を太くする場合*/

枠線をなしにします

border:none;

するとスタイルシートは次のようになります。

pre.normal{
background:none;
color:black;
font:bold;
font-size:15px;
border:none;
}

記事中には次のように記述します。

<pre class="normal">
入力したまま
　　そのまま表示されます
</pre>

すると次のようになります。

入力したまま
　　　そのまま表示されます

またfont-family:明朝体;などでfontの種類を変えることもできますし
letter-spacing:1px;などで文字同士の間隔を変えることもできます。