【CSS Modules】srcアットルール記述子の使い方
srcアットルール記述子の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
srcプロパティは、CSSの特定のルール内で、外部リソースの場所（URLやファイルパス）を保持するプロパティです。このプロパティは主に@font-faceルールや@importルールで使用されます。
@font-faceルールにおいて、srcプロパティはウェブページで使用するカスタムフォントのファイルへのパスを指定するために不可欠です。複数のフォント形式をカンマで区切って記述することで、ブラウザがサポートする最適な形式のフォントを自動的に選択し、ウェブフォントの表示を安定させます。例えば、url('myfont.woff2') format('woff2')のように、url()関数でファイルのパスを、format()関数でフォントの形式を明示します。これにより、異なるブラウザ環境でも一貫したフォント表示が実現可能です。
また、@importルールでは、外部のスタイルシートファイルを現在のCSSファイルに読み込むためのURLをsrcプロパティに指定します。これにより、複数のCSSファイルを効率的に管理し、モジュール化された設計を促進します。CSS Modulesのようなモジュール指向の環境においても、外部スタイルシートの取り込みにこのsrcプロパティが活用されます。
このように、srcプロパティは、ウェブページのデザインや機能において、外部リソースの「供給源」を正確に指定する極めて重要な役割を担っています。ブラウザが外部のファイルやデータを正しく読み込み、ウェブサイトが意図した通りに動作し表示されるようにするために不可欠な設定項目です。
公式リファレンス: src
構文(syntax)
1src: url('フォントファイルへのURL') format('フォーマットタイプ'), 2 local('システムにインストールされているフォント名');
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません