【初心者向け】HTMLで文字を太字や斜めにする簡単な方法

太字や斜体にするメリット

文字数の多いブログや記事では、全体を流して読まれてしまいがち。記事内のキーワードなど大事な単語に太字や斜体を使うと、その箇所を目に止めて読んでもらいやすくなります。

文章出典：寺田寅彦 「瀬戸内海の潮と潮流」青空文庫

こちらの画像を見てください。どちらが伝わりやすいでしょう？

文章出典：寺田寅彦 「瀬戸内海の潮と潮流」青空文庫

太字や斜体文字は、赤文字や文字サイズの拡大よりも、主張しすぎず単語を目立たせることができます。

太字にするタグ

それでは太字にするHTMLタグを紹介します。

さきほど出てきたサンプルのHTMLコードを見てみましょう。

　<b>瀬戸内海</b>はその景色の美しいために旅行者の目を喜ばせ、詩人や画家の好い題目になるばかりではありません。また色々な方面の学者の眼から見ても面白い研究の種になるような事柄が沢山あります。一体、<b>あのような込み入った面白い地形がどうして出来たか</b>という事は地質学者の議論の種になっているのです。

表示結果

文章出典：寺田寅彦 「瀬戸内海の潮と潮流」青空文庫

このように、文字や単語をbタグで囲むと、太字になります。

斜体(ななめ)文字にするタグ

続いては、文字をななめにするタグです。

続いてHTMLのサンプルコードを見てみましょう。

これらはこの地方が<i>北と南に山と陸地を控えているために起る事</i>で、気象学者の研究問題になります。

表示結果

文章出典：寺田寅彦 「瀬戸内海の潮と潮流」青空文庫

このように、iタグで囲んだ部分が斜体(ななめ文字)になります。

下線を付けるタグ

あわせて、文字に下線をつける方法を見てみましょう。

サンプルコード

これらはこの地方が<u>北と南に山と陸地を控えているために起る事</u>で、気象学者の研究問題になります。

表示結果

文章出典：寺田寅彦 「瀬戸内海の潮と潮流」青空文庫

このように、uタグで囲むと、文字の下に線が引かれます。

太字と斜体を合わせる方法

複数のタグを組み合わせる場合の書き方です。

このように、入れ子にして内側のタグから閉じるように書きます。

わかりやすいように、HTMLを改行してみましょう。 内側のタグから順に、閉じるタグを書きます。マトリョーシカをイメージしていただけると良いかもしれません。

HTMLで実際にbタグとuタグ、iタグを併用してみましょう。

サンプルコード

<b><i>太字と斜体</i></b>
<br>
<b><u>太字と下線</u></b>
<br>
<i><u>斜体と下線</u></i>
<br>
<b><i><u>太字と斜体と下線</u></i></b>

表示結果

上記のようになります。

CSS(スタイルシート)でもやってみよう

実は最新のHTML5では、b,u,iの各タグは非推奨となっています。デザインにかかわる部分はHTMLではなくCSS(スタイルシート)にまとめて記載する方針になっているためです。大規模なWebサイトなどでは、今後のHTML規格に備えるためであったり、デザインの変更や修正にかかる時間を減らすためなどでCSSに記載する方式が積極的に採用されています。

HTMLの学習を始めたばかりの方も、CSSでどのように太字、斜体、下線を表現するのか、今後に備えて確認しておきましょう。

CSSを使用する場合のHTMLサンプルコード

また瀬戸内海の沿岸では一体に雨が少なかったり、また夏になると夕方風がすっかり凪いでしまって大変に蒸暑いいわゆる<span class="daiji">夕凪が名物</span>になっております。これらはこの地方が<span class="setumei">北と南に山と陸地を控えているために起る事</span>で、気象学者の研究問題になります。

CSS

span.daiji {
     font-weight: bold; 
}
span.setumei {
     font-style: italic; 
     text-decoration:underline;
}

表示結果

文章出典：寺田寅彦 「瀬戸内海の潮と潮流」青空文庫

同じスタイルを利用するページを複数作成する場合などには、ぜひCSSの利用を検討してください。

斜体(ななめ)文字にするタグ

HTMLでは、なんらかの効果を与えたい箇所には基本的にタグで囲むだけということがわかってきましたね！太字、斜体、下線をマスターしたら、どんどん他のタグも覚えていってくださいね。

まとめ