【HTML入門】フォント(font)タグを使って文字の種類を指定する方法

2024年3月29日

シホ

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

HTMLで文字のフォントの種類を変えたいとき、どのタグを使えばいいか悩むことはありませんか？

今回は、HTMLでのタグを使ったフォントの指定方法に加え、CSSでのフォントの変え方も解説したいと思います！

ぜひ参考にしてみてください！

タグでできること

HTMLで文字の種類や大きさや色を変える場合は、タグにそれぞれの属性を使って指定します。

文字の大きさを変える

タグの基本
 ~

文字の大きさを変えたい場合は、タグにsize属性で大きさを指定します。

size属性には大きさを指定しますが、1~7までの数字を入れる絶対的な方法と、+1や-2などを入れて相対的なやり方があります。

文字の大きさを指定する方法はこちらで学べます↓

【HTML入門】フォントのサイズをfont sizeを使って指定する方法

更新日：2024年3月29日

文字の色を変える

タグの基本
 ~

文字の色を変えたい場合は、タグにcolor属性で色を指定します。

color属性には、英語表記またはカラーコードで色を指定するという２つの方法があります。

文字の色を指定する方法はこちらで学べます↓

【HTML入門】文字の色を変えるfontタグの使い方と色の指定方法

更新日：2024年3月29日

文字のフォントを変える

タグの基本
 ~

文字のフォントの種類を変えたい場合は、タグにface属性でフォント名を指定します。

文字の種類をフォントを変える方法については、下で詳しく説明していきます。

HTMLでフォントを変える

font faceの使い方

HTMLでは、文字の種類を変える時はfont要素にface属性でフォントの種類を指定して使用します。

フォントの種類というのは、例えば明朝体・ゴシック体などです。

これらのフォントをフォント名としてそのままタグの中にかきこむことができます。

~

See the Pen ZorgoO by Shiho Sakai (@shiho-sakai) on CodePen.0

もしフォントの種類がうまく変わらない場合は、使っているパソコンのOSが指定したフォントに対応していない可能性があるので注意しましょう。

色とサイズを同時に指定

ちなみに、タグには文字の種類だけでなく、色とサイズも同時に指定することができます。

See the Pen LmdPdq by Shiho Sakai (@shiho-sakai) on CodePen.0

注意点

このようにタグを使って文字の種類・色・大きさを変えることができますが、HTMLは基本的にページの構造や内容を示すものです。

また、HTML5ではタグは廃止されています。

この2点を踏まえて、文字の装飾を行うときはできるだけCSSを使うようにしましょう！

CSSでフォントを変える

CSSで文字のフォントの種類を変えたいときは、「font-family」プロパティに「フォント名」を指定します。

font-famillyプロパティに指定できるフォント名は覚える必要はありません。
都度調べてコピペしましょう！ → おすすめフォント名一覧

See the Pen QrmLPM by Shiho Sakai (@shiho-sakai) on CodePen.0

HTML/CSSだけで好条件の案件獲得はできるの？

ウェブサイト制作にはHTMLとCSSの習得は必須ですが、その2つの技術だけでは単価の高い案件獲得は難しく、ページ数多く作業する仕事が多くなってしまいます。

今後ウェブサイト制作を個人で請け負い、時間や場所に縛られずに自由に働けるようになりたいなら、JavaScriptやWordPressなどのプログラミングスキルも同時に身につけることで、案件数も格段に跳ね上がりますし、単価も上がるため、幅広いスキルを学習していきましょう。

ウェブサイト制作に必要なスキルはプログラミング学習診断アプリで解説しているので、みてみてください。

実際にクラウドワークスでも以下のように、お客様のご要望に応えるためにも複数の技術の習得をすすめています。

HTML・CSSコーディングは短納期で大量のページを作成する案件も多く見受けられます。クライアントの要求に応えるため、コスト（1ページあたり単価）・スピード・クオリティの優先度を見極めながら進めるバランス感覚も求められる仕事です。複雑な案件ではHTML/CSSだけに留まらず、JavaScript（AJAX）を使った機能実装、WordPressをはじめとするCMSテンプレートの開発を手がけるケースもあります。このような場合にはプログラミング言語の知識も必要となるでしょう。
引用：CrowdWorks

じゃあ、そんな多くの技術をどうやって学べばいいの？
仕事獲得までの道のりが遠く感じる…

そんなあなたはプログラミングスクールでの学習がおすすめです。経験者から教わることのできるため、着実にスキルアップが見込めます。

侍エンジニアでは、あなたの理想の生活を叶えるキャリアから逆算してあなた専用のカリキュラムをマンツーマン学習ですすめていくため、今学習していることが確実に未来に繋がっている実感を持ちながら、学習を続けていくことができます。

無料カウンセリングでは、効率的な学習方法やキャリアプランのご提案などをさせていただきますので、理想はあるけどどうやったらいいかわからないという方は是非お気軽にお申し込みください。オンラインでも受講可能です。

無料カウンセリングへ申し込む