HTML

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タグの特性は「あまり重要ではない事柄に使用する」というものであるため、機会があるときに試してみましょう。

[PR] Webデザインで副業する方法とは

実際に使ってみよう

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

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

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

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

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

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

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

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

HTML

実行結果

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

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

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

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

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

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

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

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

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

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

【現役エンジニアが書籍レビュー】HTML&CSSとWebデザインが 1冊できちんと身につく本

この記事では、「HTML&CSSとWebデザインが 1冊できちんと身につく本」の書籍を現役エンジニアがレビューしています。書籍の全体的な概要を説...

HTML

HTMLでボタンの余白を調整する方法を現役エンジニアが解説【初心者向け】

HTMLでボタンの余白を調整する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも...

HTML

HTMLのlink要素のtype属性とmedia属性の使い方を現役エンジニアが解説【初心者向け】

HTMLのlink要素のtype属性とmedia属性の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...

HTML

HTMLでnavタグを複数使用する時の注意点を現役エンジニアが解説【初心者向け】

HTMLでnavタグを複数使用する時の注意点について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLで略語を表現する方法 - abbr【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、HTMLの略語・名前の特記・住所表現について解説します...

HTML

HTML5でページ内リンクを設定する方法を現役エンジニアが解説【初心者向け】

HTML5でページ内リンクを設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そも...

HTML

あわせてよく読まれている記事

開発者にとってなくてはならないサービスとしてGitHubがあります。エンジニアにとっては当たり前のサービスですが、これからプログラミングの勉強を始める初心者にとってはよくわからないかもしれません。そこで今回は、GitHubの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもGitHubとは何なのか、どんな時に使うツールなのかを知っていきながら、実際の使い方を紹介しています。本格的に使おうと思ったらもっと多くのことを知る必要がありますが、業務で使うということでなければ十分でしょう。目次iタグとは使う場面実際に使ってみよう監修してくれたメンター Gitについてそもそもよく分からないという方は、GitHubとは何なのか解説した記事を読むとさらに理解が深まります。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。大石ゆかり田島メンター！！GitHubってなんですか〜？田島悠介 GitHubはね、Gitをオンライン上で管理するサービスだよ。大石ゆかりもう少し詳しく教えてもらえますか〜？ GitHubとは GitHubとは、ソフトウェア開発プロジェクトのためのソースコード管理サービスです。ソースコードを更新したバージョンの管理や閲覧、バグ追跡機能、SNSの機能を備えており、開発者にとってなくてはならないサービスです。また、GitHubを使ってソースコードの管理を行っている企業も多数あります。 GitHubが人気な理由と類似サービスとの違い GitHub は、Git を使用したソフトウェア開発とバージョン管理のための人気のあるプラットフォームおよびクラウドベースのサービスです。コードを効率的に保存、管理、共同作業するために必要なツールを開発者に提供します。ユーザーフレンドリーなインターフェースと豊富な機能を備えた GitHub は、世界中の開発者にとって不可欠なツールとなっています。 GitHub はテクノロジー業界では有名な名前かもしれませんが、ライブカジノへのユニークなアプローチを持つオンラインカジノ市場も多くの日本人プレイヤーに人気を集めています。その一例が、プレイヤーに没入型でインタラクティブなゲーム体験を提供する日本の市場志向のオンラインカジノ、ライブカジノハウスです。オンラインカジノブランドレビュー関連ページで調べる通り、ライブカジノハウスは、日本の文化と技術の要素を取り入れることで、ライブカジノの伝統的なコンセプトを次のレベルに引き上げます。伝統的な日本の衣装を着たライブディーラーから高度なバーチャルリアリティテクノロジーまで、ライブカジノハウスはプレイヤーにユニークなゲーム体験を提供します。イノベーションと顧客満足に重点を置いているライブカジノハウスは、日本市場で大きな支持を得ています。その成功は、日本のオンラインカジノ業界の可能性を浮き彫りにし、多様な興味や好みに応えるために継続的に進化している様子を示しています。より多くの日本のプレーヤーがエンターテインメントのニーズのためにオンラインカジノに目を向けるにつれて, ライブカジノハウスや他の日本の市場志向のオンラインカジノが、伝統的なカジノ体験の限界を押し広げ続ける様子を見るのはエキサイティングです。 GitHubと同じようなソースコード管理サービスとしては、BitbucketやGitLabなどがあります。それぞれのサービスとの違いをもとに、GitHubが人気な理由を見ていきましょう。理由1：無料のプライベートリポジトリソースコードを管理する単位をリポジトリと呼びます。リポジトリは格納場所という意味で、他の利用者にも公開されるパブリックリポジトリと、公開が関係者だけに限定できるプライベートリポジトリがあります。ソースコードを公開したくない場合は、プライベートリポジトリを選択する必要がありますが、以前はGitHubは有料、BitbucketやGitLabでは無料という状況でした。しかし2020年4月から、GitHubでも無料のプライベートリポジトリを無制限に作成可能になりました。これによりGitHubを使いたかったがソースコードは公開したくない個人や企業の利用が大幅に増え、さらにGitHubの人気が高まる状態となりました。理由2：オープンソースコミュニティに育まれたSNS機能オープンソースとはソースコードが公開されており、誰でも無料で利用できるソフトウェアのことを指します。また、オープンソースコミュニティとは、オープンソースの開発者同士の集まり、結びつきのことです。 GitHubでは以前から多くのオープンソースが管理されており、たくさんのオープンソースコミュニティが形成されています。このオープンソースコミュニティに育まれる形で、GitHubには以下のような機能が充実しており、コミュニティが開発を行いやすくなっています。コミュニティの中で誰がどのぐらい貢献しているかを可視化する機能（スター、貢献度）開発メンバーの知見を共有する機能（Wiki、GitHub Pages）ソースコードの更新などに関する議論をやりとりする機能（Issues、Codeとの連動）単にソースコード管理サービスとしての機能だけを捉えると、実はGitHub、Bitbucket、GitLabとも大きな違いはありません。しかしこのような開発しやすい環境を支援する機能という点では、GitHubが頭一つ抜けている印象を持ちます。理由3：先進的な機能の拡充 GitHubは2018年にMicrosoft社に買収され、傘下の一企業となりました。 Microsoft社は買収後もGitHubを独立企業として維持する意向を示しており、両社はオープンソースコミュニティにとっても良好な関係となっています。このような環境の中から、以下のような先進的な機能が次々と誕生しています。世界中のエンジニアに人気のあるMicrosoft社のフリーのソースコード編集ソフト「Visual Studio Code」をオンラインで利用できる「Codespaces」オープンソースコミュニティに開発者としてではなく、資金提供者として参加できる「Sponsors」機能ソフトウェアの開発から公開までの一連の流れをサポートする「GitHub Actions」これら先進的な機能は類似のソースコード管理サービスにはないものであり、開発者にとってGitHubを選ぶ理由の1つとなっています。 GitHubのアカウント登録それではさっそくGitHubに登録してみましょう。まずは、GitHubのトップページにアクセスします。ここでメールアドレスを入力し、緑色の「Sign up for GitHub」ボタンをクリックします。次の画面でUsername（ユーザー名）やPassword（パスワード）を入力します。下の方にある「Pick the spiral galaxy」は、不正なユーザー登録を防ぐための仕組みです。クイズになっており渦巻状の銀河の絵を数回選択します。なお、このクイズは定期的に変わるようです。決められた回数、クイズに正解すると「Create account」ボタンを押せるようになります。ボタンを押して次に進みましょう。このような画面になります。登録したメールアドレスに認証のメールが届きます。メールの内容に従いユーザー認証を行ってください。以上でGitHubのアカウント登録は完了です。大石ゆかり GitHubの登録はできました♪それで、どうやって使うんですか〜？田島悠介その前にいくつか知っておいたほうがいいことがあるから、教えておくね。大石ゆかりはい、お願いします♪ [PR] Webデザインで副業する方法とはGitHubを使う上で知っておきたい事前知識早速GitHubを使っていきたいところですが、使い始める前に知っておきたい事前知識を3つ紹介します。ここで紹介する言葉がまったくわからない場合は、理解しておきましょう。事前知識1：ローカルリポジトリとリモートリポジトリ事前知識2：コミットとプッシュとは事前知識3：ブランチ（branch）とは事前知識4：インデックス（index）とは事前知識1：ローカルリポジトリとリモートリポジトリリポジトリとは、ファイルやディレクトリの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2カ所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。事前知識2：コミットとプッシュとは最低限この2つは知っておきましょう。コミット(commit) ファイルの追加や変更の履歴をリポジトリに保存することプッシュ(push) ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作事前知識3：ブランチ（branch）とはソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ（branch）という機能があります。ブランチは履歴の流れを分岐して記録していくものです。分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。事前知識4：インデックス（index）とはリポジトリ管理下にあるディレクトリの中には、一時的に使うファイルなど、Git管理が不要なものもあります。そこでGitでは、バージョン管理する対象のファイルやフォルダを「インデックス」と呼ばれる台帳に登録することで、必要なもののみバージョン管理が行えるようになっています。逆に言えば、新たにフォルダやファイルを作成した場合、コミットする前にインデックスに登録する必要があります。忘れないようにしましょう。 GitHubの使い方それでは使い方を覚えていきましょう。基本的なGitの作業は下記のような流れとなるので、GitHubを使って順番に紹介します。なお、「1」の作成は初回のみ行い、「2」から「5」を繰り返します。基本的に小さい作業の単位でコミットを行い、ある程度作業がひと段落した時にプッシュをするのが一般的です。コミットの作業がわかりやすいように、コミットメッセージを残しておくと、ログを追っていく時に役立ちますので覚えておきましょう。 Githubでリポジトリを作成（git init）ファイルの作成、編集を行うファイルの作成/変更/削除をgitのインデックスに追加する（git add）変更結果をローカルリポジトリにコミットする（git commit）ローカルリポジトリをプッシュしてリモートリポジトリへ反映させる（git push） GitHubでリポジトリを作成（git init）まずはリポジトリを作成します。 GitHubにログインした状態で以下にアクセスします。 https://github.com/new 次に表示される画面では、「Repository name」の入力のあと、必要に応じて「Description」も入力します。また、リポジトリの種類を「Public」か「Private」を選択します。ソースコードを公開したくない場合は「Private」を選択すると良いでしょう。最後に、リポジトリの中にあらかじめREADMEファイルを作成しておく場合は「Initialize this repository with a README」にチェックを入れます。 .gitignoreやlicenseについては後で追加や変更ができるので、Noneを選択します。必要項目の入力が終わり「Create repository」ボタンをクリックするとリポジトリの作成は完了です。次の画面で、リモートリポジトリのアドレスが表示されますので、控えておいてください。ファイルの作成、編集を行うはじめに、ローカルのPC上にローカルリポジトリを作成します。今回は「awesome」というディレクトリを作成することにします。以下の操作はWindowsであればPowerShell、Macであればターミナルで行います。コマンドは1行ずつ、最後にEnterキーを押して入力しましょう。 mkdir awesome cd awesome git init 「mkdir」は新しくディレクトリを作成するコマンドで、「cd」はディレクトリを移動するコマンドです。 awesomeというディレクトリを作成し、そのディレクトリに移動してから作業が始まります。そして、この「git init」コマンドはGitリポジトリを新たに作成するコマンドです。バージョン管理を行っていない既存のプロジェクトをGitリポジトリに変換する場合や、空の新規リポジトリを作成して初期化する場合に使用します。 git initコマンドを実行するとカレントディレクトリをGitリポジトリに変換します。次に、テキストエディタなどで以下のHTMLファイルを作り、先ほどのawesomeフォルダに「hello.html」という名前で保存しましょう。現在の状態を確認しましょう。 git status 結果は以下のようになります。 hello.htmlが「Untracked files」、つまりインデックスに登録されていないファイルとして表示されています。 On branch master Untracked files: (use "git add <file>..." to include in what will be committed) hello.html ファイルの作成/変更/削除をgitのインデックスに追加する（git

Git

fontタグの使い方！HTMLでフォントサイズを指定する方法【初心者向け】現役Webデザイナーが解説

HTMLでフォントサイズを指定する方法について解説しています。初心者でも簡単にフォントサイズや色を指定できるので、ぜひ書き方を覚えておくと良いでしょう。目次 fontタグとはフォントカラーの指定方法フォントサイズの指定方法フォントの指定方法実際に書いてみよう fontタグとは fontタグは、HTMLの要素で文字の色やサイズやフォント(書体)の種類を指定するタグです。文字の色は指定しない場合、黒(ブラック)になります。 fontタグでは、文字のサイズを1から7までの相対的な数値で変更できます。フォントの指定とは広く書体と同じ意味で用いられるもので、美的感覚に基づき、字体を統一的にデザインした文字のスタイルのことを指します。角ばったゴシック体のフォントや細長い明朝体などがあります。文字そのものの形のデザインといったところです。 ※HTML5でfontタグは廃止されたため、今後ブラウザの新しいバージョンになった場合、動作しなくなる可能性があります。 [PR] Webデザインで副業する方法とはフォントカラーの指定方法文字の色をfontタグで指定するには、fontタグにcolorの属性を追加して値を指定します。 font color="red" font color="#226666" 色の指定方法には、#(ハッシュ)から始まる6桁のカラーコードで書く方法と、redやblueやwhiteやorangeというふうに直接、カラーネームを書く方法があります。カラーコードは16進数で0から9、そしてaからfまでの数値を指定できます。これは2桁ずつRGB(レッド・グリーン・ブルー)という光の三原則の割合になっています。 #ff0000とした場合、赤色になります。 #00ff00は緑色です。 fontタグでの文字色指定の置き換え方は、HTMLタグで文字色を自由に指定する方法で紹介されていますので、ご参考にしてください。フォントサイズの指定方法文字のサイズをfontタグで指定するには、fontタグにsizeの属性を追加して1から7の値を指定します。 font size="7" 3が通常の文字の大きさになります。 fontタグでのフォントサイズの置き換え方は、HTMLのフォントサイズで最大値・最小値を指定する方法で紹介されていますので、ご参考にしてください。フォントの指定方法文字のスタイルをfontタグで指定するには、fontタグにfaceの属性を追加してフォントを指定します。フォントは複数指定することができて、先頭のフォントから優先され、カンマ区切りで記述していきます。 font face="候補1,候補2,候補3" フォントを指定しても、その人の端末にフォントがインストールされていなければ、フォントは表示されません。最後の方で共通の一般的なフォントを指定するようにします。 fontタグでのフォント指定の置き換え方は、CSSでfont-familyを使ってフォントを指定する方法で紹介されていますので、ご参考にしてください。実際に書いてみよう fontタグを実際に使用してみます。 sample.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> </head> <body> 色もサイズもフォントも指定していない通常の文字<br> <font size="5" color="#00ff00">大きさ5とカラーコードで緑色を指定した文字</font><br> <font color="green">カラーネームで緑色を指定した文字</font><br> <font size="5" face="impact">impactという英字専用フォントを指定した文字</font><br> <font face="ＭＳＰ明朝,ＭＳ明朝">明朝体を指定した文字</font><br> <font face="ＭＳＰゴシック,ＭＳゴシック">ゴシック体を指定した文字</font><br>

HTML

HTML+CSSのfontプロパティで文字の太さを指定する方法を現役デザイナーが解説【初心者向け】

HTML+CSSで文字の太さを指定する方法について解説します。これができるようになると、サイト制作でメリハリのあるページをつくることができるようになります。ぜひ参考にしてみてください。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。田島悠介今回は、CSSに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介文字の太さを指定する方法について詳しく説明していくね！大石ゆかりお願いします！ CSSで太さを変更する方法と注意点 CSSで文字の太さを指定するには font-weight プロパティまたは font プロパティを指定します。font プロパティは、 font-styleｍ font-variant font-weight font-size line-height font-family を一括指定できます。 font-weight プロパティの指定方法は以下のとおりです。 font-weight: キーワード font-weight: 数値キーワードには以下を指定できます。 normal ：通常の太さです。数値指定の400と同じです bold ：太字です。数値指定の700と同じです lighter ：親要素よりも1段階細くします bolder ：親要素よりも1段階太くします数値には100～900の値を指定可能です(新しい規格では1～1000までの任意の値に対応)。ただしほとんどのフォントは通常と太字の2種類の太さしか持っていないため、細かな太さの指定には対応していない点に注意が必要です。 font や font-weight プロパティについて、詳しくは以下も参考にしてください。 MDN font MDN font-weight CSSで太さを細かく指定する方法 font や font-weight プロパティで指定する方法の他に、text-shadow プロパティを使って擬似的にフォントを太く表現することができます。text-shadow プロパティは文字の影(シャドー)を指定します。 text-shadow: 水平方向垂直方向影の大きさ色 text-shadow プロパティについて、詳しくは以下も参考にしてください。 MDN text-shadow 関連記事：文字に影をつけたい！CSSのtext-shadowの使い方【初心者向け】 [PR] Webデザインで副業する方法とは実際に太さを変えてブラウザで見てみよう今回のサンプルプログラムでは、font-weight 及び text-shadow プロパティを使って文字の太さを変更しています。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>sample</title> <style> .font_normal { font-weight: normal; } .font_bold

CSS

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。異なる単位で複雑な計算も簡単に指定できます。レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。目次iタグとは使う場面実際に使ってみよう監修してくれたメンターそもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？田島悠介いろいろ方法があるけどcalcファンクションを使えば簡単だよ。大石ゆかり calc？CSSで計算ができるんですか？田島悠介その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。大石ゆかりへぇー。わかりやすいですね。田島悠介そうなんだ。まずはどういった記述の仕方をするか見てみよう。大石ゆかりはい！ calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。 calcファンクションを使うメリット異なる単位で計算することができる計算が明白になる calc()は結果の値ではない異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。 [PR] Webデザインで副業する方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。構文プロパティ（widthなど）: calc(式) 四則演算が使用できる指定する式では四則演算の演算子（+、-、*、/）が使えます。前後に空白が必要加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。入れ子が可能 calcファンクションは入れ子にできます。入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。 calcファンクションの実装例実際にcalcファンクションを使った実装例を見てみましょう。ルートに基づいたサイズ指定要素を3等分の幅にする左右のセンタリング上下の中央配置ヒーローヘッダーの高さ調整ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。ソースコード「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">

CSS

誰でも簡単にできる！HTMLで文字の色を指定する方法【初心者向け】

文字や背景の色を指定するにはCSSを使用するのが一般的です。しかし、簡単な色設定だと、HTMLのみでも可能です。そこで今回はHTMLで色の指定をする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。目次iタグとは使う場面実際に使ってみよう監修してくれたメンターそもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。 HTMLだけで文字の色を変える文字の色を変える方法は複数あります。今回は2通りの方法をご紹介します。 fontタグを使う方法 1つは、fontタグを使用する方法です。色を変えたい文字をfontタグで囲ってから、タグ内にcolor=”xxx”と記述します。 h1タグを使って、大きな文字で色の変更もできます。色はred, blue, green, brown など、好きな色を指定しましょう。 HTML <h1><font color="red">こんにちは！</font></h1> style指定をする方法もう1つは、style指定をする方法です。 CSSの記法で、HTMLタグに直接スタイルを適用できます。色を変えたい文字を囲っているタグに、style=”color : xxx”と記述します。囲うタグが特にない場合は、spanタグで囲いましょう。 HTML <h2 style="color:blue">こんにちは！</h2> <span style="color:brown">こんにちは！</span> <font>タグ利用方式とstyle属性指定方式の違いとメリットおすすめは、style属性を指定する方式です。それぞれの方式の違いを詳しくご説明します。 <font>タグを使う方式の特徴覚えやすくて簡単な方式です。文字フォント専用に、タグを用意する点が特徴です。しかし、これはCSSの利用が一般的になる前の方式で、現在は非推奨となっています。使う場合は、趣味のページや非公開ページに限定したほうが良いでしょう。 style属性を使う方式の特徴 CSSファイルを用意せずにHTMLだけでスタイルを変更する場合に、最良の方法です。 HTML構造に影響を与えずに、既存のタグの中に「style=”xxx”」と追記するだけで良いのも特徴です。また、HTMLを扱う場合はCSSを別途用意するのが本来のあり方なので、style属性を使いながらCSSに慣れることができるのも長所と言えるでしょう。実際に書いてみようそれでは実際にHTMLで色を変更してみましょう。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HelloTechAcademy</title> </head> <body> <p>Hello TechAcademy !</p> <h1><font color="red">こんにちは！</font></h1> <h2 style="color:blue">こんにちは！</h2> <p style="color:green">こんばんは！</p> <span style="color:brown">HTMLファイルだけで、</span>

HTML

CSSでフォントサイズを自由に指定する方法を現役エンジニアが解説【初心者向け】

CSSでフォントサイズを自由に指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。田島悠介今回は、CSSに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介フォントサイズを自由に指定する方法について詳しく説明していくね！大石ゆかりお願いします！目次 font-sizeの使い方様々な単位の解説と注意点フォントサイズを指定してみようまとめ font-sizeの使い方 HTML要素に内包されるテキストの大きさを指定するのがfont-sizeプロパティです。font-sizeプロパティは以下のように指定します。 CSSセレクタ{ font-size: 値; } 例えば、idがdiv1という要素に内包されるテキストの大きさを24pxに指定するには以下のように記述します。 #div1 { font-size: 24px; } pxは画素数を基準とした値の単位です。font-sizeプロパティについて、詳しくは以下の記事も参考にしてください。 MDN – font-size [PR] Webデザインで副業する方法とは様々な単位の解説と注意点前述したpx以外にも、font-sizeは様々な単位で指定することができます。 px 画素数を基準とした単位。1画素（ピクセル）が「1px」となります。画面サイズによらず、要素の大きさを一定にしたい場合に用いられます。 % 親要素に対する比率。100%が親要素と等しくなります。 em こちらも親要素に対する比率です。1emが親要素と等しくなります。 rem Webページの元となるドキュメント(body)に対する比率です。1remがドキュメントと等しくなります。なお、ほとんどのブラウザでドキュメントの既定のフォントサイズは16pxとなっています。 vw 画面の幅に対する比率。100vwは1文字の大きさが画面の幅と等しいことを示します。画面の大きさを変えると、それに追随して文字の大きさも変わります。 vh 画面の高さに対する比率。100vhは1文字の大きさが画面の高さと等しいことを示します。こちらも画面の大きさを変えると、それに追随して文字の大きさも変わります。フォントサイズを指定してみよう今回のサンプルプログラムではfont-sizeを様々な単位で指定してみます。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample</title> <style> body { font-size: 16px; } #div1 { font-size: 20px; } #div2 { font-size: 150%;

CSS

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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

iタグとは

使う場面

実際に使ってみよう

監修してくれたメンター

関連するキーワード

あわせてよく読まれている記事

今さら聞けない！GitHubの使い方【超初心者向け】

fontタグの使い方！HTMLでフォントサイズを指定する方法【初心者向け】現役Webデザイナーが解説

HTML+CSSのfontプロパティで文字の太さを指定する方法を現役デザイナーが解説【初心者向け】

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

誰でも簡単にできる！HTMLで文字の色を指定する方法【初心者向け】

CSSでフォントサイズを自由に指定する方法を現役エンジニアが解説【初心者向け】

TechAcademyから
現役エンジニアの方へ
お知らせ

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

iタグとは

使う場面

実際に使ってみよう

監修してくれたメンター

記事を検索

関連するキーワード

関連する記事

あわせてよく読まれている記事

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ