コース: CSS 基本講座

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

@importを使う

@importを使う - CSSのチュートリアル

コース: CSS 基本講座

1ヶ月の無料トライアルを開始 法人向けサービス

@importを使う

“

このレッスンでは @-規則について簡単にご説明し、 その中の@importと いうものを使ってみたいと思います。 @-規則というのは「@」で始まります。 そしてそのあとに規則の種類を示す 識別子、つまり名前ですね。 が続いて、最後「;」で終わります。 @-規則の種類なんですけれども 大きく3つあります。 「メタデータ」と「条件付き情報」と それから「説明的な情報」ですね。 そしてその中のここに挙げたのは例で 全部ではありません。 例えば「メタデータ」では「@charset」。 これはよく使われますけれども スタイルシートで使う 文字エンコーディングを定義します。 それから今回使う「@import」ですね。 これは他のスタイルシートから スタイル規則を読み込みます。 それから「条件付き情報」では 「@media」というのがあったりします。 メディアクエリを使って、それにもとづいて スタイルシートを適用するんですね。 あと「@document」。 これは文書のURLにもとづいて スタイル規則を制約します。 あと「説明的な情報」としては 「@font-face」というのがあって これはテキストにフォントを指定すると いうことができます。 そして今回使う「@import」なんですが、 他のスタイルシートからスタイル規則を 読み込みます。 ただし@charsetは除きます。 あと@-規則には 入れ子にできるものがあるんですけれども この@importは入れ子にはできません。 @importというのは外部ファイルから CSS規則を読み込みます。 ファイルのフォーマットは 拡張子 css ですね。 そう言うと そっくりスタイルを外部に持っていく 外部スタイルシートが 思い浮かぶかもしれません。 ただ外部スタイルシートはそっくり 完全に定義されたものを 外部に移して、それを link属性で読み込むということですね。 ですから完成されたものを読み込むと いうイメージになります。 それに対して@importというのは 部分的にです。 今回試すのはこの部分ですね。 h1、h3、strong の文字のカラー。 これはいくつかのHTMLドキュメントで 共通に使いたいというときには これを部分的に外部に切り出して そしていくつかのHTMLドキュメントで…

目次