HTML内のiタグの使い方を現役エンジニアが解説【初心者向け】
初心者向けにHTML内のiタグの使い方と注意点について解説しています。iタグは指定した部分を文章内の他の部分と区別するときに使われるタグです。iタグの特徴と使う場面、基本の書き方についてサンプルを見ながら学びましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTML内のiタグの使い方について解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まるでしょう。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
今日はiタグの使い方と注意点について詳しく説明していくね！
お願いします！
iタグとは
iタグは文字をイタリック体にするタグです。
例えば、
<i>プログラム<i>
などとした場合、プログラムの文字がイタリック体になります。
iタグは、囲んだ文字を他の文書や名称などと区別したい時に記述するタグのことです。かつては、コードとしてあまり見かけるタグではなく、頻繁に使用されていませんでした。
使う場面
iタグは目的のある文章で、文脈とは関係のない事柄を強調するために扱います。また、重要度が低い内容で使用されることが多いものです。これらの理由から、Webサイトではアイコンを表示するために活用される代表的なタグになりました。
後述する「font-awesome」では、標準的にiタグを使用しなければならないため、急速にiタグが広まりました。
「実際に使ってみよう」の項目では、使用例を提示します。しかし、iタグの特性は「あまり重要ではない事柄に使用する」というものであるため、機会があるときに試してみましょう。
実際に使ってみよう
iタグを使用する例文を用意しましたので、記述の例として参考にしてください。
例文は以下のものを使用します。
−ところで、あのウィリアムシェイクスピアは、「たとえ、小さな斧でも数百度これを打てば、堅い樫の木も切り倒せる」と格言を残しているらしいです。−
HTMLで記述すると下記のようになります。
<p>ところで、あの<i>ウィリアムシェイクスピア</i>は、<blockquote>「たとえ、小さな斧でも数百度これを打てば、堅い樫の木も切り倒せる」</blockquote>と格言を残しているらしいです。</p>
上記の例文では、文章に対してiタグをわかりやすく記述しました。前述したように、最もiタグを使用することになるのは「font-awesome」と呼ばれるアイコンのフレームワークを参照し、アイコンを表示する場合です。
font-awesomeは、webアイコンフォントを表示させるサービスです。
以下が「font-awesome」に使用するiタグのコードになります。
HTML
<head> <link rel=”stylesheet” href=”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では初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
