CSS｜ font（family・size・size-adjust・stretch・style・variant・weight）

font: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「font」（font-family、font-size、font-size-adjust、font-stretch、font-style、font-variant、font-weight）についてのご説明です。

ホームページ制作・作成において、font（フォント）は、ホームページ（ウェブサイト）で使用するフォント（文字）の指定をまとめて行う際に使用します。

font ホームページのフォント指定をまとめて行う

fontは、ホームページで使用するフォントに関する指定（font-style、 font-variant、 font-weight、 font-size、 line-height、 font-family）をまとめて指定します。なお、font-size、font-familyは省略することはできません。

fontを使用するとフォント関連のスタイルがリセットされ、 ここで指定した値が適用されます。この時、省略した値は、親要素に指定されている値を継承せずに初期値に戻ります。

font:値の指定順序

1. font-style、font-variant、font-weight（順不同）
2. font-size
3. line-height
4. font-family
5. line-height（値を記述する前にスラッシュ（ / ）で区切る）

ショートハンドプロパティ導入時の記述リスクと回避策

複数のフォント設定を一行で記述できるfontプロパティは、コードの記述量を減らし、ファイルサイズを軽量化する上で非常に効率的です。しかし、より専門的には、一括指定（ショートハンドプロパティ）ならではの挙動を正しく理解しておかなければ、意図しない表示崩れを引き起こす原因になることがあります。

初期値へのリセット現象と意図しないスタイルの上書き

一括指定プロパティを使用する際に最も注意すべき点は、記述を省略した項目が「親要素のスタイルを引き継がず、初期値へと自動的にリセットされる」という挙動です。例えば、親要素に設定された文字の傾き（font-style）や太さ（font-weight）をそのまま引き継がせたい場合でも、子要素でfontプロパティを使ってサイズとフォント名だけを一括指定すると、省略された傾きや太さは標準の状態に戻ってしまいます。

この現象を把握していないと、ホームページ（ウェブサイト）全体のデザインにばらつきが生じるだけでなく、細かなデザイン修正に余計な時間がかかってしまうことがあります。事業のブランディングに関わる大切なホームページを美しく保つためにも、要素ごとに個別の値を細かく調整したい箇所では、あえて「font-size」や「font-family」を個別に指定するアプローチを選ぶなど、状況に応じた使い分けが重要です。

コードの可読性向上と将来的な保守運用のメリット

一方で、ホームページ（ウェブサイト）全体の基本スタイルを定義するような場面では、fontプロパティによる一括指定が非常に大きなメリットをもたらします。共通の文字サイズや行間（line-height）を一行で綺麗に整理しておくことで、コード全体の可読性が高まり、将来的な修正作業の負担を大幅に軽減できます。

無駄のない洗練されたスタイルシートは、ページの表示速度を最適化する上でもプラスに働きます。このように、一括指定によるリセット効果を逆手に取り、全体の土台をすっきりと構築した上で、必要に応じて個別プロパティで補正していくという設計手法が、集客力と管理のしやすさを両立した強いホームページへとつながっていきます。

ホームページ制作・Webデザインの1ポイント

ホームページで表示するフォントに関する指定がまとめてできるように、CSSのには簡易指定として一括で設定できるプロパティがあります。しかしながら、それぞれ必須指定項目がありますので、一括設定の際は注意が必要です。

font系プロパティ

• font-family　フォント種類
• font-size　フォントサイズ
• font-size-adjust　フォントサイズを調整
• font-stretch　フォントを縦長・横長にする
• font-style　フォントをイタリック体・斜体
• font-variant　フォントをスモールキャップ
• font-weight　フォントの太さ

font-family

font-family: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「font-family」についてのご説明です。

ホームページ制作・作成において、font-family（フォントファミリー）は、ホームページ（ウェブサイト）で使用するフォントの種類を指定します。

font-family フォント種類を指定

font-familyは、ホームページで使用するフォントの種類を指定します。フォントの種類は　,　 で区切り、複数の候補を指定することができます。

指定したフォントがインストールされていない場合には、閲覧者のブラウザで設定されたデフォルトのフォントで表示されます。

font-family: フォント名

フォント名で指定。

フォント名にスペースが含まれている場合には、 ” 　または  ‘  で囲む。

font-family: キーワード

フォントの種類を表すキーワードで指定。

sans-serif

ゴシック系のフォント

serif

明朝系のフォント

cursive

筆記体・草書体のフォント

fantasy

装飾的なフォント

monospace

等幅フォント

ご指定の条件に従い、既存記事の最下部に追記しやすい形式で、専門的な知見（SEOやパフォーマンスの観点）を追加した文章を作成しました。

SEOとユーザー体験を両立する高度なフォント指定

ホームページ（ウェブサイト）の文字表現を豊かにするフォントファミリーの指定は、デザイン面だけでなく、SEOやユーザー体験にも直結する重要な要素です。ここでは、より専門的な視点から、現代のホームページ制作において配慮すべきフォント指定の実践的な手法を解説していきます。

Webフォントの効果的な活用とパフォーマンスチューニング

近年では、閲覧者の端末環境に依存せず意図したデザインを表現できるWebフォントの導入が主流となっています。しかし、Webフォントの読み込みはホームページの表示速度に影響を与える可能性があります。検索エンジンはページの読み込み速度を評価基準の一つとして扱っているため、安易な導入は避け、軽量化や非同期読み込みなどの最適化が必要です。

具体的には、CSSで「font-display: swap;」を指定する手法が効果を発揮します。この設定により、指定したWebフォントが読み込まれるまでの間は、端末の内蔵フォントが一時的に表示され、ユーザーの閲覧を妨げません。テキストが読めない空白の時間をなくすことで訪問者の早期離脱を防ぎ、事業の成果に結びつきやすい快適なホームページ環境を提供できます。

代替フォントの選定とレイアウトシフトの防止

フォントファミリーを指定する際は、カンマ区切りで複数の候補を記述する順序が重要です。特にWebフォントを使用する場合、読み込みの前後で文字の幅や高さが変わり、画面のレイアウトが意図せず大きくずれてしまう現象が起きることがあります。このような画面のズレはユーザーの誤操作を招きやすく、SEOの評価を下げる要因にもなります。

これを防ぐためには、メインのフォントと文字の骨格や幅が近いものを代替フォントとして優先的に指定するアプローチが求められます。WindowsやMac、スマートフォンなど、各デバイスに標準搭載されているフォントの寸法を把握し、細部まで計算された代替指定を行うことで、検索エンジンにも訪問者にも高く評価される、安定した集客力を持つホームページを構築できます。

font-family: ;

ホームページ制作・Webデザインの1ポイント

フォント名の指定によって、ホームページで表示するテキスト部分のフォント種類を指定することができます。ただしウェブフォントの利用以外では、PCなどのホームページ閲覧デバイスにインストールされているフォントしか表示されません。もしフォントが存在しない場合には代替フォントで表示されます。

このことから、思わずテキストの段落が段落ちしたり、見出しが複数行になったりと、想定しているレイアウトが崩れることもありますので、閲覧環境によってフォント種類が違う場合に配慮して、ある程度の余白をもってホームページを制作する必要があります。

font-size

font-size: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「font-size」についてのご説明です。

ホームページ制作・作成において、font-size（フォントサイズ）は、ホームページ（ウェブサイト）で使用するフォント（文字）のサイズを指定します。

font-size フォントサイズを指定

font-sizeは、ホームページに記述するテキストデータのフォントサイズを指定します。ホームページ全体の基本となるフォントサイズの指定や、各要素ごとのフォントサイズの指定も可能です。

各要素ごとのフォントサイズを指定する場合はIDやclassを付けて指定します。

font-size : 数値

単位はpx・em・exなど。

font-size : 数値　でフォントサイズを指定します。

数値には負の値は指定できません。

font-size : %

%値で指定。

font-size : %　でフォントサイズを指定します。基本となるフォントサイズとの相対値での指定となります。

font-size : キーワード

font-size : キーワード　でフォントサイズを指定します。

以下の7段階。mediumが標準サイズ。1段階上がると1.2倍のサイズになります。

smaller、largerで大きさが1段階上下

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

CSSのfont-size設定 レスポンシブデザインに対応するフォントサイズ指定

ホームページ（ウェブサイト）の制作において、適切なフォントサイズを設定することは、ユーザーの読みやすさや使い勝手に直結するため非常に重要です。ここでは、より専門的な視点から、現代のホームページ制作でよく用いられる高度なフォントサイズの指定方法について解説していきます。

スマートフォンやタブレットなど、多様な画面サイズに対応するレスポンシブデザインでは、固定値での指定よりも柔軟なアプローチが求められます。各端末の画面幅に合わせて、最適な文字の大きさを提供するための手法を見ていきます。

remやvwを活用した柔軟な設計

近年主流となっているのが、「rem」や「vw」といった単位を用いた指定方法です。remは、ホームページ（ウェブサイト）のルート要素のフォントサイズを基準とする相対単位です。親要素のサイズに影響されず、常に基準値からの相対的な大きさで表示できるため、全体のバランスを保ちながら管理しやすくなります。

一方のvwは、ブラウザの表示領域の幅に対する割合を示す単位です。画面幅が広くなれば文字も大きくなり、狭くなれば小さくなるため、画面サイズに連動した流動的なデザインを実現できます。ただし、極端に画面が狭い場合や広い場合に文字が読みにくくなる可能性もあるため、他の単位と組み合わせて細かく調整することが推奨されます。

clamp()関数による流体タイポグラフィの設定

より専門的には、CSSの「clamp()」関数を用いたフォントサイズの指定も効果的です。clamp()関数を使用すると、文字の最小サイズ、推奨される変動サイズ、最大サイズの3つの値を一度に設定できます。これにより、画面幅に応じて文字サイズを変化させつつ、一定のサイズより小さくも大きくもならないようにするという細やかな制御が可能になります。

この手法を取り入れることで、複雑な記述をする手間を減らしながら、あらゆる端末で読みやすい文字サイズを維持できます。検索エンジンに評価される良質なホームページ（ウェブサイト）を構築する上でも、ユーザー体験を高める細部の調整は大きな意味を持っています。日々の事業展開において、集客力の高いホームページを育てるための参考にしてみてください。

font-size: ;　読み方　フォントサイズ

ホームページ制作・Webデザインの1ポイント

ホームページ制作におけるフォントサイズの指定も、相対値でパーセントで指定することができます。基本となるフォントサイズを指定して、特定要素は基準サイズの125%といったような指定の仕方も可能です（相対値でのフォントサイズ指定）。

font-size-adjust

font-size-adjust: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「font-size-adjust」についてのご説明です。

ホームページ制作・作成において、font-size-adjust（フォントサイズアジャスト）は、表示フォントのフォントサイズの調整をするためのプロパティです。

font-size-adjust フォントサイズを調整

font-size-adjustは、ホームページで使用するフォントの種類の違いによるフォントサイズのばらつきを調整して、テキストを読みやすくします。

font-size-adjust : none

フォントサイズを調整しない（初期値）

font-size-adjust : none を指定するとフォントサイズの調整を行わず通常通りの表示にします。

font-size-adjust : 数値

小文字xの高さ÷フォントの高さ の数値を指定

font-size-adjustプロパティのより専門的な活用方法

font-size-adjustは、ホームページで使用するフォントが切り替わった際にも、テキストの視覚的な大きさを一定に保ち、可読性を維持するためのCSSプロパティです。とくに、複数のデバイスで異なるシステムフォントが適用される現代のホームページ（ウェブサイト）制作や、長文のコラムを通じて集客を図るコンテンツマーケティングにおいて、安定した表示品質を確保するために重宝します。ここでは、実務に即した具体的な活用アプローチについて詳しくお伝えしていきます。

異なるフォント間での視覚的バランスの維持

ホームページの制作時には、一般的に複数のフォント候補（フォントファミリー）をCSSで指定します。閲覧者の端末環境に第一希望のフォントがない場合、端末に内蔵されている代替フォントでテキストが表示される仕組みになっています。しかし、同じ「font-size: 16px;」という指定であっても、フォントの種類によって「小文字（xなど）の高さ（アスペクト比）」が大きく異なるため、代替フォントに切り替わった途端に文字が急に小さく見えたり、読みにくくなったりする現象が発生します。

このような課題に対して、font-size-adjustプロパティであらかじめ基準となる数値を設定しておくことで、ブラウザが自動的に文字の大きさを微調整してくれます。第一希望のフォントが表示されない環境であっても、レイアウトの印象を大きく変えることなく、一貫した読みやすさを提供することが可能です。

ユーザーの離脱を防ぐ可読性の担保とSEO効果

ホームページ（ウェブサイト）を訪れたユーザーが文章を快適に読めるかどうかは、サイトの滞在時間や事業の成果に直結する重要な要素です。文字が潰れて見えたり、フォントの切り替わりによって極端に視認性が下がったりする状態は、訪問者のストレスとなり、ページからの早期離脱を招く原因になりかねません。

より専門的には、font-size-adjustを適切に適用し、どの閲覧環境でも一貫した文字の視認性を確保することが、結果的に検索エンジン最適化（SEO）におけるユーザーエクスペリエンスの向上へと繋がっていきます。とくにスマートフォンなどの画面では、限られたスペースのなかでテキストをいかに美しく見せるかが重視されるため、フォントアスペクト比の微調整を意識したスタイルシートの設計を取り入れるとよいかもしれません。

font-size-adjust: ;　読み方　フォントサイズアジャスト

ホームページ制作・Webデザインの1ポイント

基本的にホームページのメインコンテンツは、文章テキストです。テキスト内容を読みやすくする工夫は、ホームページのクオリティを考える上で重要な要素として考えることができます。

font-stretch

font-stretch: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「font-stretch」についてのご説明です。

ホームページ制作・作成において、font-stretch（フォントストレッチ）は、表示フォントを縦長・横長にするプロパティです。

font-stretch フォントを縦長・横長にする

font-stretchは、ホームページで使用するフォントを縦長・横長（幅狭・幅広）に表示します。

normal

標準の形状（初期値）

ホームページで使用するフォントを標準の形状で表示します。

幅狭　narrower　condensed

ホームページで使用するフォントを幅狭に表示します。

narrower

1段階幅狭にする

semi-condensed

normalより1段階幅狭

condensed

normalより2段階幅狭

extra-condensed

normalより3段階幅狭

ultra-condensed

normalより4段階幅狭

幅広　wider　expanded

ホームページで使用するフォントを幅広に表示します。

wider

1段階幅広にする

semi-expanded

normalより1段階幅広

expanded

normalより2段階幅広

extra-expanded

normalより3段階幅広

ultra-expanded

normalより4段階幅広

可変フォント時代のタイポグラフィとfont-stretchの活用

ホームページ（ウェブサイト）のWebデザインにおいて、テキストの「横幅」を微調整し、限られたスペースに見出しを収めたり、洗練されたタイポグラフィを表現したりしたい局面があります。フォントの文字幅（凝縮・伸長）を制御する「font-stretch」プロパティは、デザインに独特のメリハリや品位を与えるための設定です。より専門的には、対応するフォントファイルの仕様や、現代の可変フォント（Variable Fonts）におけるパーセンテージ指定の重要性を理解しておく必要があります。

指定値によるフォント幅の変化とデータの制約

font-stretchプロパティには、標準の幅である normal を基準に、幅を狭くする（縦長に見せる）「condensed」系と、幅を広くする（横長に見せる）「expanded」系の値が段階的に用意されています。

幅狭（condensed系）

semi-condensed（やや狭い）、condensed（狭い）、extra-condensed（極めて狭い）、ultra-condensed（最も狭い）

幅広（expanded系）

semi-expanded（やや広い）、expanded（広い）、extra-expanded（極めて広い）、ultra-expanded（最も広い）

ここで非常に重要な実務上の注意点として、「ブラウザが文字を無理やり横に引き伸ばしたり縮めたりして変形させているわけではない」という点が挙げられます。

このプロパティが正しく機能するためには、指定したフォントファミリーの中に、あらかじめ「Condensed（幅狭体）」や「Expanded（幅広体）」といった専用のスタイル（フォントデータ）が内包されている必要があります。対応データが含まれていない一般的な日本語フォントなどに指定しても、ブラウザ側で見た目の変化が起きない（normalのまま表示される）ケースが多いため、プログラミングを施す際には使用するWebフォントの仕様ルールを事前に確認しておくことが求められます。

可変フォント（Variable Fonts）による精密な数値制御

近年のWeb制作において、font-stretchの有用性は「可変フォント（Variable Fonts）」の普及によって劇的に向上しました。可変フォントとは、1つのフォントファイルの中に太さ（weight）や幅（stretch）などのあらゆるバリエーションを内包し、滑らかに数値を変化させられる画期的なフォント技術です。

最新のWeb標準仕様では、font-stretchに対して従来のキーワードだけでなく、「font-stretch: 75%;」や「font-stretch: 120%;」のようにパーセンテージ（%）の数値で直接プログラミングを行えるようになっています（100%が通常のnormal幅に相当します）。

これにより、見出しの文字数やスマートフォン・パソコンの画面幅（レスポンシブデザイン）に合わせて、文字幅を「ミリ単位」で滑らかに可変させることが可能になりました。

画面の小さなスマートフォン表示で長い見出しが不自然に何行にも折り返されてしまうような場面でも、font-stretchを活用して文字幅をわずかにタイト（例：90%）に引き締めることで、デザインの美しさと視認性を高度に両立させることができます。訪問者がストレスなく快適に情報をインプットできる事業用ホームページを構築し、企業のブランド価値やWeb集客の成果を高めていくために、非常に効果的なタイポグラフィ技術です。

font-stretch: ;　読み方　フォントストレッチ

ホームページ制作・Webデザインの1ポイント

フォント種類やサイズ、カラー以外のフォント関連の指定はあまりなされませんが、使用フォントの印象を変化させる際に特定箇所に使用するなどケースが想定されます。

font-style

font-style: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「font-style」についてのご説明です。

ホームページ制作・作成において、font-style（フォントスタイル）は、表示フォントをイタリック体・斜体にするときのプロパティです。

font-style フォントをイタリック体・斜体

font-styleは、ホームページに記述するテキストのフォントのスタイル（イタリック体、斜体）を指定します。

normal

標準フォント（初期値）

italic

イタリック体フォント（斜めに傾けて筆記体）

oblique

斜体フォント（斜めに傾き）

font-styleプロパティのより専門的な活用方法

ホームページ制作において、font-styleプロパティは単にテキストを傾けるだけでなく、文章のニュアンスを視覚的に伝え、情報の階層を正しく整理するために重要です。とくに日本語と欧文（英語など）が混在する現代のホームページ（ウェブサイト）では、それぞれのフォントの特性に合わせた細やかな指定が、コンテンツの読みやすさ（可読性）を大きく左右します。ここでは、実務に役立つ具体的な手法と注意点について詳しくお伝えしていきます。

日本語環境における「傾いた表現」の視認性とリスク

font-styleプロパティの指定であるitalic（イタリック体）とoblique（斜体）は、もともと欧文タイポグラフィの伝統に基づくものです。英語などのフォントには、傾けることを前提として美しくデザインされた「イタリック体」専用のデータが用意されていることが一般的です。

一方で、多くの日本語フォント（明朝体やゴシック体など）には、専用のイタリック体データが存在しません。そのため、日本語のテキストに対してfont-style: italic; または oblique; を適用すると、ブラウザが標準の文字を機械的に右側へ傾けて表示（疑似斜体）することになります。この処理が行われると、とくにスマートフォンなどの画面サイズが小さなデバイスにおいて、文字の線が重なって潰れてしまい、視認性が著しく低下する場合があります。事業用のホームページ（ウェブサイト）で情報を正確に届けるためには、長文の日本語に対して不用意に傾斜の指定を行うことは避けるのが無難かもしれません。

欧文の強調表現とSEOを意識した正しいマークアップ

ホームページ内の英語の単語や引用文、専門用語などを引き立たせたい場合、font-styleプロパティは非常に有効です。欧文のタイポグラフィにおいて、イタリック体は「書籍のタイトル」「引用」「外来語」などを表す正式な表現手法として認知されているため、サイト全体の洗練された印象を高めることができます。

デザインの調整を行う際は、HTMLのマークアップとの関係性にも配慮することが推奨されます。たとえば、特定のテキストを斜体に見せたい場合、CSSでfont-style: italic;を指定するアプローチのほかに、HTMLの emタグ（強調を意味するタグ）を使用する方法があります。主要なブラウザでは、emタグで囲まれた部分が標準で斜体として描画されます。

より専門的には、検索エンジン最適化（SEO）の観点から「その言葉自体に本当に強調の意味があるか」を考慮して使い分けることが重要です。単にデザインとして文字を傾けたいだけであれば、HTMLタグは通常のままでCSSのfont-styleを使用し、検索エンジンのクローラーに対して文脈上の強い強調として伝えたい場合はemタグを適切に使用するなど、役割を明確に分けることで、検索エンジンにとっても訪問者にとっても親切な構造を組み立てることができます。

font-style: ;　読み方　フォントスタイル

ホームページ制作・Webデザインの1ポイント

テキスト部分をすべてイタリック体にすることは、あまりケースとしては考えられませんが、特定要素にだけ適用することで、その部分が他のテキストと異なる取り扱いであることを示す場合には良いかもしれません。

font-variant

font-variant: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「font-variant」についてのご説明です。

ホームページ制作・作成において、font-variant（フォントバリアント）は、フォントをスモールキャップします。

font-variant フォントをスモールキャップ

font-variantは、ホームページで使用するフォントをスモールキャップ（小文字の表示形式が「小文字サイズの大文字」）にします。

スモールキャップフォントがない場合には、大文字を縮小したものを小文字として表示します。

normal

標準のフォント

small-caps

スモールキャップのフォントで表示

font-variantプロパティのより専門的な活用方法

font-variantは、単にスモールキャップを指定するだけでなく、タイポグラフィの美しさと情報の読みやすさを両立させるための強力なCSSプロパティです。とくにグローバル展開を視野に入れたホームページ（ウェブサイト）や、価格や詳細なデータを多く扱う事業用サイトにおいて、その真価を発揮します。ここでは、現代のWeb制作の現場における実践的な活用手法について詳しくお伝えしていきます。

美しいタイポグラフィによるブランディング効果

従来のfont-variantはsmall-caps（スモールキャップ）の指定が主な役割でしたが、現在のCSSでは機能が大幅に拡張されています。たとえば、派生プロパティであるfont-variant-ligaturesを指定することで、合字（リガチャ）をコントロールし、「fi」や「fl」といった特定の文字の組み合わせを自然で美しく繋げて見せることが可能です。

高品質な欧文フォントと組み合わせてこれらのプロパティを活用することで、ホームページ全体の洗練された印象が際立ちます。文字の細部にまでこだわることは、訪問者に対するブランドの信頼感を高め、結果的にサイトの滞在時間向上や直帰率の改善といった、検索エンジン最適化（SEO）にも良い影響をもたらす可能性があります。日本語が主体のサイトであっても、見出しの英字部分やキャッチコピーに適用することで、デザインの完成度を一段階引き上げることができます。

数字の視認性を高めるfont-variant-numeric

ECサイトの価格表示や、表データ（テーブル）の数値を扱う場面で非常に役立つのが、font-variant-numericという指定です。通常、フォントの数字は文字ごとに幅が異なる（プロポーショナル幅）ため、金額や桁数の多い数値を縦に並べるとガタガタとずれて見えてしまうことがあります。

このような場合、font-variant-numeric: tabular-nums; と指定することで、数字の幅が等間隔（等幅）になり、縦のラインが綺麗に揃います。ユーザーが価格やデータを瞬時に比較・把握しやすくなるため、事業の売上やコンバージョンに直結する重要な要素と言えます。デザインの美しさだけでなく、情報の正確な伝達とユーザーの利便性向上という観点からも、積極的に取り入れていきたい手法です。

font-variant: ;

ホームページ制作・Webデザインの1ポイント

テキスト・フォントに関する指定は数多くありますが、アルファベットの表記の取扱いに関するものなども多く、これらについてほとんどのものは無指定でも大丈夫です。英語表記のデザイン性を考える場合にだけ指定すると良いでしょう。

font-weight

font-weight: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「font-weight」についてのご説明です。

ホームページ制作・作成において、font-weight（フォントウェイト）は、ホームページ（ウェブサイト）に表示するフォントの太さを指定します。

font-weight フォントの太さを指定

font-weightは、ホームページ内のテキスト部分のフォントの太さを指定します。一般的にはboldのみが多用されます。フォントウェイト。

font-weight : 数値

100、200、300、400（標準）、500、600、700（bold）、800、900

font-weight : 数値　でフォントの太さを指定します。

font-weight : キーワード

フォントの太さ（フォントウェイト）を以下のキーワードで指定します。

normal

標準（数値 400）

bold

一般的な太字（数値　700）

lighter

相対的に一段階細く

bolder

相対的に一段階太く

font-weightプロパティのより専門的な活用方法

ホームページ制作において、font-weightプロパティを適切にコントロールすることは、テキストの読みやすさ（可読性）を向上させ、ユーザーに必要な情報を正確に伝えるために非常に重要です。とくに多くの情報が行き交う現代のホームページ（ウェブサイト）では、文字の太さによる視覚的な強弱が、そのままサイト内の回遊率や事業の成果へとつながる傾向にあります。ここでは、デザイン性と機能性を両立させるための具体的なアプローチについて詳しくお伝えしていきます。

Webフォントとfont-weightの連動性における注意点

CSSでfont-weightを100から900までの数値、あるいはboldやlighterといったキーワードで指定しても、実際のホームページ上で文字の太さが変わらない場面に遭遇することがあります。これは、該当のホームページで読み込んでいるフォントファイル自体に、指定した太さ（ウエイト）のデータが含まれていないことが原因です。

たとえば、標準的なウエイト（400）のフォントデータしか読み込んでいない状態で、CSSにfont-weight: 900;と記述しても、ブラウザが機械的に文字を太くして疑似表示するだけで、フォント本来の美しいデザインは再現されません。より専門的には、Google Fontsなどの外部Webフォントを利用する際に、使用する予定のあるウエイト（一般的にはLight 300、Regular 400、Medium 500、Bold 700など）をあらかじめHTMLやCSSの読み込み段階で明示的に選択しておく必要があります。ただし、必要のない太さまで過剰に読み込むと、ホームページ（ウェブサイト）の表示速度が低下する恐れがあります。検索エンジン最適化（SEO）の観点からも、表示速度の維持とデザイン表現のバランスを意識して選択することが重要です。

可読性とSEO効果を高めるための見出しの設計

テキストの太さは、情報の階層構造をユーザーに直感的に理解してもらうための強力な表現手法です。とくにh2やh3といった見出しタグに対して適切なfont-weightを設定することで、記事の構成が明確になります。

検索エンジンのクローラーはHTMLのタグ構造をベースにページ内容を認識しますが、人間の訪問者はページを開いた瞬間に全体のフォントの太さや大きさによるメリハリを視覚的に捉えて、読むべき場所を判断します。見出し部分にしっかりと太さを持たせる一方で、長文となる本文（pタグなど）には標準的なfont-weight（400など）を適用し、長時間の閲覧でも目が疲れにくい調整を行うことが推奨されます。

また、スマートフォンなどの小さな画面で文字が太すぎると、かえって文字同士が潰れて読みにくくなる場合があるため、デバイスごとのメディアクエリを活用して、画面サイズに応じた微調整を行うことも視野に入れるとよいかもしれません。

font-weight: ;　読み方　フォントウェイト

ホームページ制作・Webデザインの1ポイント

ホームページで描画するフォントの太さに関する項目です。フォントの大きさはフォントサイズですが、こちらはサイズは同じものの描画する線の太さを変更する項目になります。

ホームページ（ウェブサイト）制作・作成に役立つCSS3のプロパティ一覧は
⇒css3 property reference index ホームページ制作の装飾プロパティ

ホームページのCSS・スタイルシート編集方法

ホームページ制作やホームページ修正を行う際のCSS・スタイルシート編集方法について。ホームページは基本的にHTMLで構成されています。一方、その外観・デザインを設定するのはCSS（Cascading Style Sheets）・スタイルシートです。ページの基本構成はHTMLで、レイアウトやカラーの設定といった外観面はCSSで設定されています。

ホームページのCSS・スタイルシート編集方法

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ