外部ファイルを読み込む！CSSで@importを使う方法【初心者向け】
初心者向けにCSSで@importを使って外部ファイルをインポートする方法について解説しています。デザインの作業の中で外部ファイルを読み込むシーンは少ないですが、いざという時に役立つので、ぜひ書き方をご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSで外部ファイルを読み込む際に役立つ@importの使い方について解説します。
ファイル分割してCSSの記述をする時などに知っておくと便利な知識です。
目次
今回はCSSの@ルールのひとつ、@importを使ってみよう。
田島メンター！！@importは何をするんですか〜？
@importは外部のCSSファイルを取り込むときに使用するよ。スタイルシートの内容がとても多くなって、いくつかに分割したいときに使うことができるね。
なるほど、いずれ必要になりそうですね。お願いします！
@importとは
@importとは、外部のCSSファイルを読み込み利用することを指します。
1つのファイルに記述するとファイルが大きくなりバグなどが見つけづらくなるため、ファイルを分割する時に使われます。
@importの書き方
@import は次のように記述します。
@import url("cssファイル名");
違う階層のディレクトリにCSSファイルがある場合は、階層を指定します。
例えばCSSディレクトリにCSSファイルがある場合は、以下のように記述します。
@import url("css/cssファイル名");
@importの基本の書き方だよ。
読み込みたいファイルを(“〜”)の中に記述するんですね。
次は実際にCSSファイルを読み込んで、その内容がきちんと適用されるか見てみよう。
実際に書いてみよう
それでは実際に書いてみましょう。
まず、「header.css」と「table.css」を作ります。
header.css
h1,h2,h3,h4,h5,h6 {
color: rgb(200, 92, 92);
}
table.css
table.tbl {
border-collapse: collapse;
text-align: left;
line-height: 1.5;
}
table.tbl th {
width: 150px;
padding: 10px;
font-weight: bold;
vertical-align: top;
border: 1px solid rgb(200,200,200);
}
table.tbl td {
width: 350px;
padding: 10px;
vertical-align: top;
border: 1px solid rgb(200,200,200);
}
次に、「main.css」を作成して、「header.css」と「table.css」を@importで読み込みます。
main.css
@import url("./header.css");
@import url("./table.css");
最後に、「import.html」を作成して、「main.css」を読み込みます。
import.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<h1>@importの使い方</h1>
<h2>table</h2>
<table class="tbl">
<thead>
<tr>
<td>名前</td>
<td>好きな食べ物</td>
</tr>
</thead>
<tbody>
<tr>
<td>太郎</td>
<td>きびだんご</td>
</tr>
<tr>
<td>二郎</td>
<td>ラーメン</td>
</tr>
<tr>
<td>ジョン</td>
<td>ドーナッツ</td>
</tr>
</tbody>
</table>
</body>
</html>
ブラウザで表示します。
「header.css」と「table.css」が読み込まれています。
この記事では、@importを使って外部ファイルを読み込む方法について解説しました。
他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。
執筆してくれたメンター
| 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。 |
ここでは”header.css”と”table.css”の2つのファイルを”main.css”に取り込んで、それをHTMLで読み込んでいるよ。
取り込まれた2つのCSSファイルの内容も、しっかり反映されていますね！
コンテンツが多い場合、このように部品化させることで編集がやりやすくなるんだ。
管理しやすい形にすることは大事ですね。ありがとうございました！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートしオリジナルのWebサイトを作ることが可能です。
独学に限界を感じている場合はご検討ください。
