外部ファイルを読み込む！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デザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
執筆してくれたメンター
| 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。 |
ここでは”header.css”と”table.css”の2つのファイルを”main.css”に取り込んで、それをHTMLで読み込んでいるよ。
取り込まれた2つのCSSファイルの内容も、しっかり反映されていますね！
コンテンツが多い場合、このように部品化させることで編集がやりやすくなるんだ。
管理しやすい形にすることは大事ですね。ありがとうございました！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートしオリジナルのWebサイトを作ることが可能です。
独学に限界を感じている場合はご検討ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
