こんにちは！侍エンジニアブログ編集部のシホです！
HTMLで文字を斜体にする場合、
- <i>タグ
- <em>タグ
を使いますが、うまく使い分けられていますか？
この２つは結果的に同じ見た目にはなりますが、それぞれに意味があって用途が異なってきます。
今回は、この<i>タグと<em>タグの違いを説明したうえで、CSSを利用して文字を斜体にする方法も解説します！
ぜひ参考にしてみてください！
HTMLで文字を斜体にする方法
HTMLではi要素とem要素を使って、 斜体 のように文字を斜体にすることができます。
どういう時に使うかというと、文章中の引用文や強調部分で使います。
では、実際にタグの使い方と違いを見てみましょう。
i要素em要素の使い方
iとは「Italic（斜体文字）」の略で、emは「EMphasis（強調）」の略です。
<i> 〜 </i>または<em> 〜 <em>で斜体にしたい部分を囲みます。
See the Pen vjWyag by Shiho Sakai (@shiho-sakai) on CodePen.
i要素とem要素の違い
上のサンプルコードのように、i要素を使って斜体にするのと、em要素を使って斜体にするのではどちらも同じ見た目になりますが、意味が違ってきます。
上のサンプルコードで、あえて「斜体」と「強調」と書きましたが、
i要素は「見た目を装飾する」
em要素は「意味を強調する」
という意味を持っています。
基本的にHTMLは構造や内容そのものを表すので、意味を強調したい場合はem要素を使い、ただ装飾したい場合はなるべくi要素は使わず、CSS（スタイルシート）で記述するようにしましょう。
CSSで文字を斜体にする方法
次のサンプルコードのように、「font-style」プロパティに「italic」を指定して文字を斜体にします。
See the Pen ZoaBdd by Shiho Sakai (@shiho-sakai) on CodePen.
フロントエンジニアとして自由に働きたいと考えている人は
この記事をご覧になっている方は、HTMLやCSSを習得した先にフリーランスフロントエンジニアとして自由に働きたいと考えている人もいるのではないでしょうか？また、すでにフリーランスとして働いている人は、より高単価の仕事を獲得したいと考えているかもしれませんね。
ご存知の方が多いと思いますが、HTMLやCSSはマークアップ言語と言って、プログラミング言語ではありません。そして、フロントエンジニアとして好条件な仕事を獲得していくなら、PHPやJavaScriptなどのいわゆる「プログラミング言語」を学ぶ必要があります。
しかしHTMLやCSSと比べて、プログラミング言語の習得は難易度が一気に上がるので、挫折してしまう人も少なくはありません。独学の挫折率は8割ほどとも言われているのです。
そこで、挫折せずにプログラミング言語を習得し、フリーランスのフロントエンジニアとして働いていきたいと考えている人は、プログラミングスクールの利用を検討してみてはいかがでしょうか。
弊社「侍エンジニア」では、あなただけのオーダーメイドカリキュラムを作成し、現役エンジニアがマンツーマンでレッスンしています。なので、挫折する事なく最短で理想のスキルを身に付ける事ができます。
興味がある人はまず無料カウンセリングを利用してみてください。入会する、しないに関わらず、弊社随一のコンサルタントがあなたの理想をヒアリングした上でぴったりの学習プランを提供させて頂きます。
下記のボタンから1分ほどで予約が完了致します。オンラインでの利用もできますので、ぜひお気軽にご利用ください。
まとめ
いかがでしたでしょうか。
・強調する意味をもたせるために斜体にする場合はHTMLのem要素を使う
・文字を太字に装飾したいときはCSSを使う
の二点をぜひ覚えておいてください！
