【HTML入門】斜体にする前に知っておきたい!iとemの違いとは?

こんにちは!侍エンジニア塾ブログ編集部のシホです!

HTMLで文字を斜体にする場合、

  • <i>タグ
  • <em>タグ

を使いますが、うまく使い分けられていますか?

この2つは結果的に同じ見た目にはなりますが、それぞれに意味があって用途が異なってきます。

今回は、この<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.0

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.0

フロントエンジニアとして自由に働きたいと考えている人は

この記事をご覧になっている方は、HTMLやCSSを習得した先にフリーランスフロントエンジニアとして自由に働きたいと考えている人もいるのではないでしょうか?また、すでにフリーランスとして働いている人は、より高単価の仕事を獲得したいと考えているかもしれませんね。

ご存知の方が多いと思いますが、HTMLやCSSはマークアップ言語と言って、プログラミング言語ではありません。そして、フロントエンジニアとして好条件な仕事を獲得していくなら、PHPやJavaScriptなどのいわゆる「プログラミング言語」を学ぶ必要があります。

しかしHTMLやCSSと比べて、プログラミング言語の習得は難易度が一気に上がるので、挫折してしまう人も少なくはありません。独学の挫折率は8割ほどとも言われているのです。

そこで、挫折せずにプログラミング言語を習得し、フリーランスのフロントエンジニアとして働いていきたいと考えている人は、プログラミングスクールの利用を検討してみてはいかがでしょうか。

弊社「侍エンジニア塾」では、あなただけのオーダーメイドカリキュラムを作成し、現役エンジニアがマンツーマンでレッスンしています。なので、挫折する事なく最短で理想のスキルを身に付ける事ができます。

興味がある人はまず無料体験レッスンを利用してみてください。入会する、しないに関わらず、弊社随一のコンサルタントがあなたの理想をヒアリングした上でぴったりの学習プランを提供させて頂きます。

下記のボタンから1分ほどで予約が完了致します。オンラインでの利用もできますので、ぜひお気軽にご利用ください。

無料体験レッスンの
予約はこちら

まとめ

いかがでしたでしょうか。

・強調する意味をもたせるために斜体にする場合はHTMLのem要素を使う
・文字を太字に装飾したいときはCSSを使う

の二点をぜひ覚えておいてください!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

シホ

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー