CSSファイルの読み込み方がいくつかあることを知っていますか？
さまざまな読み込み方を知ってると、複数のCSSファイルを一元管理できたり、状況に応じて適切な記述ができるようになります。
この記事ではCSSファイルの読み込み方について具体例も合わせて紹介します。是非最後までご覧ください。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
CSSファイルの読み込み方について
CSSファイルの読み込み方は5つあります。
CSSファイルの読み込み方
- linkタグで読み込む
- @importで読み込む
- styleタグを使う（CSSファイルを使わずにCSSを適用する方法）
- インラインで記述する（CSSファイルを使わずにCSSを適用する方法）
- functions.phpで読み込む（WordPress使用の場合）
それぞれの方法について解説していきます。
CSSファイルをlinkタグで読み込む
CSSファイルの基本的な読み込み方はlinkタグで囲むことです。
以下のような記述でCSSファイルを読み込むことができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSSの読み込み -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<!-- -->
<title> Document </title>
</head>
<body>
</body>
</html>上からファイルが読み込まれるので（厳密には並列的）、上記の場合はreset.cssが先に読み込まれ、次にstyle.cssが読み込まれます。
なおreset.cssを適用している理由は、ChromeやSafariなど各種ブラウザ間でデフォルトで適用されているスタイルを上書きして差異を無くすためです。おすすめのreset.cssを紹介しているサイトもありますので活用してみてください！
CSSファイルを@importで読み込む
@importはCSSファイルを分割して読み込むことができます。
以下の例ではlinkタグからstyle.cssを読み込み、@importでsub.cssを読み込んでいます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSSの読み込み -->
<link rel="stylesheet" href="style.css">
<!-- -->
<title> Document </title>
</head>
<body>
<p class="test1">style.cssからfontsizeを20pxにしています。</p>
<p class="test2">sub.cssで文字の色を赤にします。</p>
</body>
</html>/* style.css */
/* sub.cssを読み込む */
@import url("sub.css");
.test1 {
font-size: 20px;
}/* sub.css */
.test2 {
color: red;
}出力結果
style.cssからfontsizeを20pxにしています。
sub.cssで文字の色を赤にします。
sub.cssを読み込んでスタイルを適用させることができました。
linkタグを使って記述する場合はCSSファイルは並列的に読み込みます。そのため、CSSファイルを複数読み込むと表示スピードに大きな影響を与えません。
一方で@importを使用した場合は順番に読み込みが行われるため、サイトの表示速度が遅くなるデメリットがあります。
styleタグを使ってCSSを適用する
styleタグはCSSファイルを読み込まないでHTML内に直接CSSを記述する方法です。
head内にstyleタグを記述し、その中でスタイルを適用していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title> Document </title>
<style>
p {
color: red;
font-size: 20px;
font-weight: bold;
}
.blue{
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>head内のstyleタグでスタイルを変更します！</p>
<p class="blue">head内のstyleタグでスタイルを変更します！</p>
</body>
</html>出力結果
head内のstyleタグでスタイルを変更します！
head内のstyleタグでスタイルを変更します！
CSSファイルを使わずにhead内からstyleタグを使ってCSSを適用することができました。
こちらの方法は超小規模開発であれば見やすいという利点があります。しかし記述量が多くなると可読性が落ちるので中規模以上の開発には向いていません。
CSSをインラインで記述する
styleタグと同様にCSSファイルを使わずにスタイルを適用することができます。
「インラインCSS」といい、HTMLにstyle属性を適用する形になります。
記述方法を確認しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title> Document </title>
</head>
<body>
<p style="color:red; font-size: 20px;">インラインでスタイルを変えます！</p>
<p style="color:blue; font-size: 16px; font-weight: bold;">インラインでスタイルを変えます！</p>
</body>
</html>出力結果
インラインでスタイルを変えます！
インラインでスタイルを変えます！
styleタグと同様にHTMLファイルから直接CSSを記述するやり方です。インラインでスタイルを記述する方法は以下2つの特徴があります。
- 一つ一つのタグにスタイルを記述しなければいけないため、効率が悪い
- 外部ファイルのすたいるよりも詳細度が高いため優先される
詳細度に関してはこちらの記事を参照ください。
functions.phpでCSSファイルを読み込む
WordPressを使ってサイト制作を行う場合、CSSやJSファイルをfunctions.phpで読み込みすることが推奨されています。
以下の記述でfunctions.phpからCSSファイルを読み込めます。
// functions.phpに記述
<?php
wp_enqueue_style('reset_style', get_template_directory_uri() . '/css/style.css');
?>上記のコードを簡単に解説すると以下のようになります。
- wp_enqueue_style('スタイルシートのハンドル名(任意)', 'スタイルシートのURL');
- wp_enqueue_style：CSS読み込むための関数
- get_template_directory_uri()：テンプレートのあるディレクトリURIを出力
functions.phpでCSSファイルを一元管理することにより、スタイルシートの重複読み込みを防ぐことができます。
まとめ
CSSファイルの読み込み方の違いを理解することができましたか？
この記事では5種類の読み込み方を紹介しました。
それぞれ読み込み方の違いを理解すると開発規模に応じた記述ができるようになり、開発工数の削減やWebページの表示スピードの短縮ができるようになります。
この記事の内容を念頭において開発を進めていきましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
