記事の紹介

この記事では”link要素でcssファイル読み込み”を扱います。

link要素でcssファイル読み込み

前回の記事でHTML文書内にstyle要素を使うことで、要素に適用されるスタイルを修正できるようになりました。しかし、まだHTML文書の中に見た目に関する指定が残ってます。そこで、もう一段分離を進めて見ましょう。

そこで、必要なのがlinkという要素です。前回の記事で最後のソースを分離して別のcssという名前のフォルダに保存し、その内容をlink要素から参照した例をいかに示して見ました。href属性を使って参照先のファイルを指定します。

index_css.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<h1>私の名前は<span class = "name">柴犬</span>です。</h1>
	<p><h1>趣味は<span id="hobby">ゲーム</span>です。</h1></p>
	<p>好きな<span class="game_name">ゲーム</span>目録</p>
	<ul>
		<li>モンスターハンター</li>
		<li class="social_game">グラブル</li>
		<li class="social_game">プリコネ</li>
	</ul>
	<h2>皆さんよろしくお願いします。</h2>
</body>
</html>

css/style.css

* {
	background-color:#87CEEB
}
.name {
	/*class="name"というクラス属性が指定されている要素の文字の色を青にします。*/
	color: blue;
}
#hobby {
	/*id="hobby"というクラス属性が指定されている要素の文字の色を黄色にします。*/
	color:yellow;
}
.game_name {
	/*class="game_name"というクラス属性が指定されている要素の文字のサイズを30pxにします。*/
	font-size: 30px
}
.social_game {
	/*class="social_game"というクラス属性が指定されている要素の文字の色を緑にします。*/
	color:green
}
h2 {
	/*h2の文字を太く表示します。*/
	font-style: bold;
}

完成ファイル

これで、ようやく文書とスタイルが完全に分離されました。実際のウェブサイトではこのようにcssファイルとHTMLファイルを分離し、それらをlink要素で関連づけるのが主なサイトの作成法です。皆さんも習慣をつけておくといいと思いますえん。

Web開発-初めてのCSS

プログラミングメイン