外部ファイルを読み込む！CSSで@importを使う方法【初心者向け】
初心者向けにCSSで@importを使って外部ファイルをインポートする方法について解説しています。デザインの作業の中で外部ファイルを読み込むシーンは少ないですが、いざという時に役立つので、ぜひ書き方をご覧ください。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
CSSで外部ファイルを読み込みする際に役立つ@importの使い方について解説しています。
ファイル分割をしてCSSの記述をする時などに知っておくと便利な知識でしょう。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
今回はCSSの@ルールのひとつ、@importを使ってみよう。
田島メンター！！@importは何をするんですか〜？
@importは外部のCSSファイルを取り込むときに使用するよ。スタイルシートの内容がとても多くなって、いくつかに分割したいときに使うことができるね。
なるほど、いずれ必要になりそうですね。お願いします！
@importとは
@importとは、外部のCSSファイルを読み込むときに使います。1つのファイルに記述するとファイルが大きくなりバグなどが見つけづらくなるため、ファイルを分割する時に使われます。
@importの書き方
@import は次のように記述します。
@import url("cssファイル名");
違う階層のディレクトリにCSSファイルがある場合は、階層を指定します。例えばCSSディレクトリにCSSファイルがある場合は、
@import url("css/cssファイル名");
のように記述します。
@importの基本の書き方だよ。
読み込みたいファイルを(“〜”)の中に記述するんですね。
次は実際にCSSファイルを読み込んで、その内容がきちんと適用されるか見てみよう。
[PR] HTML/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デザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。
ここでは”header.css”と”table.css”の2つのファイルを”main.css”に取り込んで、それをHTMLで読み込んでいるよ。
取り込まれた2つのCSSファイルの内容も、しっかり反映されていますね！
コンテンツが多い場合、このように部品化させることで編集がやりやすくなるんだ。
管理しやすい形にすることは大事ですね。ありがとうございました！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートしオリジナルのWebサイトを作ることが可能です。
独学に限界を感じている場合はご検討ください。
