JavaScriptでスタイルシートを読み込む方法

このドキュメントの内容は、以下の通りです。

はじめに
スタイルの指定方法
文書構造とスタイルを分離する意味
CSSの拡張子
CSSファイルの読み込み方法
JavaScriptでCSSファイルを読み込む方法
サンプルコード

はじめに

ウェブサイト・ウェブページは、HTMLと呼ばれるマークアップ言語で作成されています。HTMLは文章の構造を指示します。HTMLをどのように表示するか、つまり、デザインを指示するために CSS (カスケーディングスタイルシート) が利用されます。ウェブページを動的に更新するために、JavaScript と呼ばれるブラウザで動作するスクリプト言語も利用されています。

スタイルの指定方法

スタイルの指定方法を以下に例を挙げます。

スタイルタグ：HTML ファイル内に定義する
インライン：HTML のタグで定義する
外部ファイル：スタイルシートのファイルで定義する

文書構造とスタイルを分離する意味

HTML文書から見栄え(デザイン)を定義するスタイルは分離していることが望ましいです。文書構造とデザインを分離しておくことにより、ページをメディアに合わせたスタイルシートに切り替えることで、メディアごとに表示を変更できます。

CSSファイルの読み込み方法

HTML タグで CSS のファイルを読み込む場合には、 link タグを利用します。

ここでは、 style.css を読み込むものとします。以下に、 link タグの例を示します。

<link rel="stylesheet" href="style.css">

JavaScriptでCSSファイルを読み込む方法

JavaScriptでスタイルシートの外部ファイルを読み込む方法について説明します。

CSSのファイルを読み込む場合には、 link タグを利用すると説明しました。そのため、 JavaScript で css のファイルを読み込む場合には、 JavaScriptで link タグを作成し、ヘッダ (head) に appendChild で追加します。

サンプルコード

以下は、JavaScript で動的に .css のファイルを読み込むサンプルコードです。

<html>
	<head><title>css load</title></head>
	<body>
		<h1>CSS load</h1>

		<p id="contents">
		CSS loader.
		</p>

	</body>
	<script type="text/javascript">
		var d = document;
		var link = d.createElement('link');
		link.href = '/style-min.css';
		link.rel = 'stylesheet';
		link.type = 'text/css';
		var h = d.getElementsByTagName('head')[0];
		h.appendChild(link);
	</script>
</html>

いつもシェア、ありがとうございます！

もっと情報を探しませんか？

過去ログ

2020 : 01 02 03 04 05 06 07 08 09 10 11 12
2019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12