JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLでフォントサイズを変更する方法｜style属性とCSSのfont-sizeプロパティの使い方

HTMLでフォントサイズを変更するには、style属性を使用します。style属性は、要素に対してインラインスタイル（その場限りのスタイル）を直接指定できる属性です。HTMLの<p>タグなどの要素に、CSSのfont-sizeプロパティを組み合わせて使うことで、文字の大きさを自由にコントロールできます。

なお、HTML5では以前使われていた<font>タグが廃止されたため、現在はフォントサイズの指定にはCSSスタイルを使うのが標準的な方法となっています。

style属性を使う際の注意点

style属性によるインラインスタイルは、優先度が最も高いという特徴があります。つまり、<head>内の<style>タグや外部スタイルシートで設定したグローバルなスタイルよりも、style属性で指定した内容が優先されます。この点は便利である反面、意図せず他のスタイルを上書きしてしまう原因にもなるため、注意して使いましょう。

フォントサイズ指定の基本構文

<p style="font-size:18px;">テキスト</p>

font-sizeプロパティには「px（ピクセル）」のほか、「em」「rem」「%」などさまざまな単位を指定できます。

サンプルコード

以下のコードを実行すると、HTMLページ内でフォントサイズを変更する様子を確認できます。見出し（h1）と段落（p）それぞれに、色とフォントサイズを同時に指定しています。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML フォントサイズ</title>
  </head>
  <body>
    <h1 style="color:red;font-size:40px;">見出し</h1>
    <p style="color:blue;font-size:18px;">これはサンプルテキストです</p>
  </body>
</html>

この例では、h1要素が40pxの赤い文字で表示され、p要素が18pxの青い文字で表示されます。ブラウザで開いて実際の表示を確認してみてください。

まとめ

  • HTMLでフォントサイズを変更するには、style属性とCSSのfont-sizeプロパティを使う
  • HTML5では<font>タグは非対応のため、CSSでの指定が推奨される
  • style属性の指定は、外部スタイルシートや<style>タグの設定より優先される
  1. Windows 10で文字サイズを変更する方法を徹底解説！状況別の設定手順まとめ

    ディスプレイの解像度やモニターのサイズによっては、Windows 10の文字が小さすぎたり大きすぎたりして、読みにくく感じることがあります。 この記事では、Windows 10の文字サイズを簡単に変更するさまざまな方法を、目的別にわかりやすくご紹介します。 なお、本記事の内容はYouTube動画でも解説していますので、あわせてご覧ください。 Windows 10で文字サイズを変更する基本手順 Windows 10のタイトルバー、メニュー、アイコンなどの文字サイズをまとめて変更するには、以下の手順を実行します。 デスクトップ上の任意の場所を右クリックし、「ディスプレイ設定」を左クリックします

  2. WhatsAppでフォントスタイルを変更する方法【太字・斜体・取り消し線・青文字も解説】

    WhatsAppには、テキストメッセージを自由に装飾できる便利な書式設定機能が数多く用意されています。太字・斜体・取り消し線・等幅フォントといったスタイルは、他のメッセージアプリでは使えないことも多く、WhatsAppならではの魅力のひとつです。フォントの変更方法は大きく分けて2つあります。WhatsAppに標準搭載された記号ショートカットを使う方法と、サードパーティ製アプリを利用する方法です。この記事を読み終える頃には、WhatsAppでフォントスタイルを変更する方法をマスターできているはずです。 WhatsAppでフォントスタイルを変更する方法（ガイド） 方法1：標準機能を使ってフォント