CSSの@importの書き方をサンプルコード付き解説！
CSSには@importという便利な機能があります。@importを使うとCSSの外部ファイルを読み込むことができ、ファイルの簡素化や後の管理のしやすさなど、メリットがたくさんあります。今回はその@importの書き方をサンプルコード付きで解説します。
CSSの@importとは？
今回はCSSの@importについてサンプルコード付きで解説していきます。@importとはCSSにて外部の別ファイルを読み込むために使用する機能の事です。
人によっては1つのCSSファイルにreset.cssから全てのコードを記述していくと思います。
しかしそのような場合に@importを利用することで、reset.cssなど触らなくてもいいファイルと実際にスタイルを変更するためのファイルを分けて書くことができるので、CSS全体の簡素化や後のカスタマイズ性で大きなメリットがあります。
しかし、そんな@importにもデメリットがあります。それは読み込みが遅くなることがあるということです。それについては以下の記事で詳しく解説していますので合わせてご覧ください。
CSSの@importの書き方
まずは基本的な@importの書き方を解説します。
以下のように記述します。
@import
@import: url("ファイル指定");
また、ここで1つ大切になるのがディレクトリの指定に気をつけなければいけないことです。
普段のHTMLのlinkタグとhref属性を用いてCSSを読み込むときと同様、ディレクトリの指定が必要になります。
例えばCSSファイル全てをcssというフォルダに格納している場合href属性では"css/style.css"とディレクトリを指定すると思います。
CSSで@importを使用するときも同様で、全てCSSがファイルが同じフォルダの場合は気にする必要がありませんが、外のフォルダにある別ファイルを読み込みする場合はその指定が必要になります。
また、CSSは前に書いたコードを後に書いたコードが上書きするため、後に書いたコードが反映されるという特徴があります。
普段はreset.cssを最初に書き、style.cssを後から書くと思います。
@importを用いるときも同様で、@importする順番には注意する必要があります。
CSSの@importのサンプルコード
それでは実際にサンプルコードを用いて、@importの挙動について確認していきます。
今回は簡単のため、コードの内容は簡単にします。
cssフォルダの中に.red .blue .green というクラスにスタイルを適用するCSSファイルをそれぞれ用意します。
また、@importよりも下にあるスタイルが適用されることも確認していただける内容です。
それでは以下のサンプルコードでご確認ください。
このように@importの後に書いたスタイルが適用させていることが確認できました。
