基本的なHTMLタグ~その2 フォント、レイアウト(罫線、中央揃え、行揃え)

フォントの色やサイズを変えるためのHTMLタグを解説しています。しかし、基本的にはこれらのタグは、今はHTMLではなくCSS(スタイルシート)によって変更することが推奨されています。CSSが難しくてなかなか理解できない方はこちらのタグを使えれば色やサイズを変更することができるでしょう。

目次

文字色を指定(<font color=”カラー”>~</font>)

文字の色を決めるタグですが、現在ではあまり推奨されていません(XHTMLでは非推奨となっています)

基本的に文字の色はスタイルシートで調整するようにしてください。

※例(イメージです)

今日ドライブで見かけた<font color=” #CC3100″>スポーツカー</font>は速かった。
↓↓↓
今日ドライブで見かけたスポーツカーは速かった。

また一部分ではなく全体の文字色を変更する場合はbodyタグの間に次のようなタグを入れます。

<body text=”カラー”>~</body>

フォントサイズを変更する(<font size=”サイズ”>~</font>)

文字の大きさを変えることができますが、こちらも非推奨タグです。

スタイルシートが使えない方のみ使用してください

サイズは1が最小で7が最大です。

一般的な文字のサイズは3が標準となっております。

※例(イメージです)

フォントサイズ1

フォントサイズ4

フォントサイズ7

フォントスタイルを変更する(<b>~</b> <u>~</u>など)

テキストのスタイルを変更する場合に使います。

太字にしたい場合は<b>タグ、斜体にしたい場合は<i>タグ、下線をつけたい場合は<u>タグを使います。

ただ、<u>タグは現在非推奨となっていますので、できるだけスタイルシートで変更するようにしてください。

<b>タグや<i>タグは強調タグと間違えられやすいですが、こちらは単に文字のスタイルを変更したいときに使用します。

※例(イメージです)

太字には<b>タグを使います。
↓↓↓
太字には<b>タグを使います。

斜体には<i>タグを使います。
↓↓↓
斜体には<i>タグを使います。

下線をつけたい場合は<u>タグを使います。
↓↓↓
下線をつけたい場合は<u>タグを使います。

改行(<br>)

段落に関係なく改行をすることができるタグです。

ブラウザの表示上改行したい場合はこちらのタグを使います。またこの<br>タグは閉じタグが必要ありません。

また、XHTMLでは<br />と記述する必要があります。

※例(イメージです)

ここで改行すれば<br>ブラウザでは一段下がって見えます。
↓↓↓
ここで改行すれば
ブラウザでは一段下がって見えます。

横罫線を入れる(<hr>)

文字通り横罫線を入れるためのタグです。

横罫線を使うとサイトをスッキリわかりやすくできます。

<hr>タグも閉じタグが無いのでそのまま使えます

※例(イメージです)

それでは今日はここまで!
↓↓↓
それでは今日はここまで!


行揃えを指定する(<p align=”位置”>~</p>など)

文字の行揃えを変更するために使用するタグです。

行揃えは<h1>などの見出しタグ、<p>タグ、<div>タグなどで指定することができます。

ちなみに<div>タグはよくスタイルシートの範囲などを指定する場合に用いられるタグです。特定の範囲を表すタグですね。

ただ、こちらのalign=は現在、非推奨タグになっていますので、できるだけスタイルシートで変更するようにしたいですね。

行揃えで指定できる位置はcenter(中央)、right(右)、left(左)です。

※例(イメージです)

<p align=”right”>今日のサッカーは1対oで日本が勝った</p>
↓↓↓

今日のサッカーは1対oで日本が勝った

全て中央に揃える(<center>~</center>)

サイト全体を中央揃えで表示させるのに使用しますが、このタグも現在非推奨タグに含まれています。

スタイルシートで調整できますので、そちらを利用してください。

※例(イメージです)

<center>サイト全体を中央揃えにします。

見出しやテーブル、画像も一緒にセンタリングすることができます。</center>

↓↓↓

サイト全体を中央揃えにします。

見出しやテーブル、画像も一緒にセンタリングすることができます。

よかったらシェアしてね!
目次