HTML内のiタグの使い方を現役エンジニアが解説【初心者向け】

初心者向けにHTML内のiタグの使い方と注意点について解説しています。iタグは指定した部分を文章内の他の部分と区別するときに使われるタグです。iタグの特徴と使う場面、基本の書き方についてサンプルを見ながら学びましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

HTML内のiタグの使い方について解説します。

 

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

今日はiタグの使い方と注意点について詳しく説明していくね!

大石ゆかり

お願いします!

 

iタグとは

iタグは文字をイタリック体にするタグです。

例えば、

<i>プログラム<i>

などとした場合、プログラムの文字がイタリック体になります。

iタグは、囲んだ文字を他の文書や名称などと区別したい時に記述するタグのことです。かつては、コードとしてあまり見かけるタグではなく、頻繁に使用されていませんでした。

 

使う場面

iタグは目的のある文章で、文脈とは関係のない事柄を強調するために扱います。また、重要度が低い内容で使用されることが多いものです。これらの理由から、Webサイトではアイコンを表示するために活用される代表的なタグになりました。

後述する「font-awesome」では、標準的にiタグを使用しなければならないため、急速にiタグが広まりました。

「実際に使ってみよう」の項目では、使用例を提示します。しかし、iタグの特性は「あまり重要ではない事柄に使用する」というものであるため、機会があるときに試してみましょう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に使ってみよう

iタグを使用する例文を用意しましたので、記述の例として参考にしてください。

例文は以下のものを使用します。

−ところで、あのウィリアムシェイクスピアは、「たとえ、小さな斧でも数百度これを打てば、堅い樫の木も切り倒せる」と格言を残しているらしいです。−

HTMLで記述すると下記のようになります。

<p>ところで、あの<i>ウィリアムシェイクスピア</i>は、<blockquote>「たとえ、小さな斧でも数百度これを打てば、堅い樫の木も切り倒せる」</blockquote>と格言を残しているらしいです。</p>

上記の例文では、文章に対してiタグをわかりやすく記述しました。前述したように、最もiタグを使用することになるのは「font-awesome」と呼ばれるアイコンのフレームワークを参照し、アイコンを表示する場合です。

font-awesomeは、webアイコンフォントを表示させるサービスです。

以下が「font-awesome」に使用するiタグのコードになります。

HTML

<head> <link rel=”stylesheethref=”https://use.fontawesome.com/releases/v5.1.0/css/all.css“> </head> <body> <i class=”fab fa-fort-awesome-alt”></i> </body>

実行結果

使用方法の経緯と確立から、iタグはWebサイトのユーザビリティの向上に一役を担っています。

その他の例では、下記のようなものがあります。

近年のWebサイトにて、よく見かけるデザインは、iタグとフレームワークの「font-awesome」によって実現されています。

 

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

iタグの使い方や注意点がよくわかりました!

田島悠介

ゆかりちゃん、また何か分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。