妹のおすすめ記事①

2023年7月7日

未分類

妹のオススメ

CSSで外部ファイルを読み込む際に役立つ@importの使い方について解説します。

ファイル分割してCSSの記述をする時などに知っておくと便利な知識です。

目次
@importとは
@importの書き方
実際に書いてみよう
執筆してくれたメンター

@importとは

@importとは、外部のCSSファイルを読み込み利用することを指します。

1つのファイルに記述するとファイルが大きくなりバグなどが見つけづらくなるため、ファイルを分割する時に使われます。

[PR] Webデザインで副業する学習方法を動画で公開中

@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分 をすべて無料でできます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！無料相談はこちら

執筆してくれたメンター

太田和樹（おおたかずき）
ITベンチャー企業のPM兼エンジニア普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

ここでは”header.css”と”table.css”の2つのファイルを”main.css”に取り込んで、それをHTMLで読み込んでいるよ。

取り込まれた2つのCSSファイルの内容も、しっかり反映されていますね！

コンテンツが多い場合、このように部品化させることで編集がやりやすくなるんだ。

管理しやすい形にすることは大事ですね。ありがとうございました！

TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートしオリジナルのWebサイトを作ることが可能です。

独学に限界を感じている場合はご検討ください。

記事を書いた人

妹

アプリケーションパスワードを使用すると、実際のパスワードを入力しなくても XML-RPC や REST API などの非対話型システムを介した認証が可能になります。アプリケーションパスワードは簡単に取り消すことができます。サイトへの従来のログインには使用できません。

ぷろぐらむ兄妹