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

CSSのfont-variantプロパティでスモールキャップス効果を作成する方法

Webページのテキストをより洗練された印象にしたいとき、「スモールキャップス（small-caps）」効果が役立ちます。スモールキャップスとは、英単語をすべて大文字で表示しつつ、通常の大文字よりも小さめのサイズで表示するタイポグラフィ効果のことです。

font-variantプロパティを使ったスモールキャップスの実装

CSSでスモールキャップス効果を作成するには、font-variant プロパティを使用します。値として small-caps を指定することで、小文字が縮小された大文字に自動的に変換されて表示されます。

記述例

以下のコードは、font-variantプロパティをインラインスタイルで適用した基本的な例です。実際にブラウザで表示して、スモールキャプス効果を確認してみましょう。

<html>
   <head>
   </head>
   <body>
      <p style = "font-variant:small-caps;">
         Asia, Antartica, Africa are continents
      </p>
   </body>
</html>

表示結果

上記のコードを実行すると、「Asia, Antarctica, Africa are continents」というテキストがスモールキャップスで表示されます。元々大文字だった部分（Aなど）は通常の大文字サイズのまま表示され、小文字部分はやや小さい大文字に変換されます。

font-variantプロパティの主な値

font-variantプロパティには、以下のような値を指定できます。

  • normal：通常のフォント表示（デフォルト値）
  • small-caps：スモールキャップスフォントで表示
  • inherit：親要素の設定を継承

なお、使用しているフォントがスモールキャップスに対応していない場合、ブラウザは大文字を縮小した形でシミュレートして表示します。見出しや強調したいテキストに活用すると、エレガントなデザイン演出が可能です。

  1. CSSを使ってWebサイトにダークモード／ライトモードを実装する方法

    ページの文字色（color）と背景色（background-color）を切り替えるだけで、Webサイトにダークモード／ライトモード機能を簡単に追加できます。本記事では、CSSと少量のJavaScriptを組み合わせて、ボタン操作で表示モードを切り替える実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 基本の構文 ダークモードを適用する場合は、次のような構文を使用します。セレクターに対して文字色を白、背景色を黒に指定することで、暗い環境でも視認性の高い表示を実現できます。 Selector {    color: white;   &nbs

  2. CSSだけで実現する視差スクロール（パララックス）効果の作り方

    Webサイトに動きと奥行きを与える演出のひとつに「視差スクロール（パララックススクロール）」があります。背景画像と前景コンテンツのスクロール速度に差をつけることで、画面に立体感が生まれ、ユーザーを引き込む印象的なデザインになります。実は、JavaScriptを使わなくても、CSSのbackground-attachment: fixedを活用するだけで、簡単にパララックス効果を実現できます。このプロパティを指定すると、ページをスクロールしても背景画像が固定されたまま表示され、その上を前景のコンテンツが流れるように動くため、視差が生まれる仕組みです。パララックス効果の基本ポイントbackgrou