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



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

HTMLで文字や単語を目立たせたいときに便利に使える太字斜体(ななめ)文字。これらは、タグで簡単に設定できます!今回は、太字や斜体文字、下線文字の設定方法を、入門者でもわかりやすいように詳しく解説していきます。

目次
  1. 太字や斜体にするメリット
  2. 太字にするタグ
  3. 斜体(ななめ)文字にするタグ
  4. 下線を付けるタグ
  5. 太字と斜体を合わせる方法
  6. CSS(スタイルシート)でもやってみよう
  7. まとめ

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

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

image

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

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

image

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

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

太字にするタグ

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

<b>文字</b>

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

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

表示結果

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

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

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

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

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

<i>文字</i>

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

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

表示結果

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

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

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

下線を付けるタグ

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

<u>文字</u>

サンプルコード

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

表示結果

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

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

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

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

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

<タグ1> <タグ2> 文字 </タグ2> </タグ1>

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

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

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

のりぴよ
この記事を書いた人
のりぴよ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp