HTMLにCSSファイルを適用する三つの方法をご紹介！

HTMLとCSSの意味は？

HTMLやCSSという言葉を身近で良く聞きますが一体どう意味でどのような場所で使われているのでしょうか。HTMLやCSSの意味や二つの言葉の関係性を確認しましょう。

HTMLの意味とは？

HTMLは"Hyper Text Markup Language"の略です。Hyper Text（ハイパーテキスト）とはテキストを超えた文書という意味です。名前の意味通り、HTMLを使用することによって画像を表示したりサイトURLのリンクを張り付けたりすることができます。

<!DOCTYPE html>
	<html>
		<head>
			<meta >
			<meta charset="utf-8">
			<title>Owlview</title>
		</head>
		<body>
			<h1>Owlviewのサイトです。</h1>
			<a href="https://owl-view.com">Owlview</a>
			<br><br>
			<img src="women.jpg" title="女性写真">
		</body>
</html>

<!DOCTYPE html>

<html>

<head>

<meta >

<title>Owlview</title>

</head>

<body>

<h1>Owlviewのサイトです。</h1>

<a href="https://owl-view.com">Owlview</a>

</body>

</html>

HTMLはWebページを開発するための基本的な言語です。HTML言語のみを使用するとWebページの骨組み部分のみが作成されます。

HTMLの基本コード

CSSの意味とは

CSSは"Cascading Style Sheets" の略です。CSSを使う事によってHTMLで作成したWebページの骨組みの部分をかっこよくデザインすることができます。

HTMLにCSSを適用

HTMLとCSSの関係性は？

HTMLとCSSの基本的な意味合いをご紹介しました。HTMLとCSSの関係は見出しや文章を表示するなどの基本的な部分をHTMLが担当し、見出しや文章にデザインを施すのがCSSの役割になります。

HTMLとCSSを適用する三つの方法

HTML文書にCSSを適用する三つの方法

HTML文書にCSSを適用する方法は三つあります。外部でCSSファイルを作成し、HTMLファイル内にCSSファイルを関連付け読み込ませる方法。Styleタグで文書単位に適用する方法。Style属性で局所的に適用する方法があります。ここではHTMLファイルが既に存在している程で話を進めます。

HTMLファイルに外部CSSファイルを適用

簡単な流れ

HTMLファイルと同じ階層に拡張子「~~.css」でCSSファイルを作成する。
HTML内<head>タグ間に<link rel="stylesheet" type="text/css" href="style.css">を記載し、CSSファイルを読み込む。
エディターを開きCSSファイル内にHTMLを装飾する内容を記載して保存する。

HTMLに外部CSSファイルを適用する

HTMLファイルと同じ階層に拡張子「~~.css」でCSSファイルを作成する。ここではファイル名を「style.css」としています。
Basehtml.htmlにCSSファイルを適用

href="リンク先のURL"を記載する。ここでは先程同じ階層に「style.css」という名前のファイルを作ったので相対パスで「style.css」を指定する。

Default

<link rel="stylesheet" type="text/css" href="style.css">

1

<link rel="stylesheet" type="text/css" href="style.css">

はてな

link rel="stylesheet"・・・外部のスタイルシートを読み込む

type="text/css"・・・・・CSSのMIMEタイプを指定

href="URL"・・・・・・・・URLの指定

HTML内<head>タグ間に<link rel="stylesheet" type="text/css" href="style.css">を記載し、CSSファイルを読み込む。

 <!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<link rel="stylesheet" type="text/css" href="style.css">
			<title>Owlview</title>
		</head>
		<body>
			<h1>Owlviewのサイトです。</h1>
			<a href="https://owl-view.com">Owlview</a>
			<br><br>
			<img src="women.jpg" title="女性写真">
		</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Owlview</title>

</head>

<body>

<h1>Owlviewのサイトです。</h1>

<a href="https://owl-view.com">Owlview</a>

</body>

</html>

エディターを開きCSSファイル内にHTMLを装飾する内容を記載して保存する。

<h1>のタグのカラー、背景色、見出しの上下感覚、ボトムにダブルラインを入れる内容になっています。

a:linkは{color:red}でcolorをredに指定。

bodyは背景をskyblueに指定。

h1{
	color: #ffffff;
	background-color: burlywood;
	padding-bottom: .5em;
	border-bottom: 3px double #ccc
	} 
	
a:link { color: red } 

body {
	 background:skyblue no-repeat  center center / 200px 100px;
}

h1{

color: #ffffff;

background-color: burlywood;

padding-bottom: .5em;

border-bottom: 3px double #ccc

}

a:link { color: red }

body {

background:skyblue no-repeat center center / 200px 100px;

}

作成したHTMLをWebブラウザで開くと次のようになる。

HTMLにCSSを適用

Styleタグで文書単位にHTMLにCSSを適用

簡単な流れ

HTMLコード”<head>”間に”<style type="text/css">”タグを記載
"<Style>"タグ間に""でCSSコードを挟み記載し保存

HTMLコード内にStyleタグでCSSを記載

HTMLコード<head></head>間に<style type="text/css"></style>タグを記載する。

<head>間にStyleタグを記述する
Default

<head> 　　<style type="text/css"> 　　 　　</style> </head>

1
2
3
4
5

<head> 　
　<style type="text/css">
　　 　
　</style>
</head>

<Style>タグ間にでCSSコードを挟み記載し保存する。

<style type="text/css">
			<!--
			h1{
			color: #ffffff;
			background-color: burlywood;
			padding-bottom: .5em;
			border-bottom: 3px double #ccc
			} 
	
			a:link { color: red } 

			body {
				background:skyblue no-repeat  center center / 200px 100px;
			}
　　　　　　　　-->
</style>

<!--

h1{

color: #ffffff;

background-color: burlywood;

padding-bottom: .5em;

border-bottom: 3px double #ccc

}

a:link { color: red }

body {

background:skyblue no-repeat center center / 200px 100px;

}

　　　　　　　　-->

</style>

Macでエディターを使用してHTMLファイルにCSSを記載して保存をすると次のようにアイコンに大まかな外観が表示されるようになる。

basehtml3.htmlファイルにCSSを記載して保存

次のコードはHTMLにStyleタグでCSSを直接組み込んで装飾しHTMLコードです。

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Owlview</title>
			<style type="text/css">
			<!--
			h1{
			color: #ffffff;
			background-color: burlywood;
			padding-bottom: .5em;
			border-bottom: 3px double #ccc
			} 
	
			a:link { color: red } 

			body {
				background:skyblue no-repeat  center center / 200px 100px;
			}

			-->
			</style>
		</head>
		<body>
			<h1>Owlviewのサイトです。</h1>
			<a href="https://owl-view.com">Owlview</a>
			<br><br>
			<img src="women.jpg" title="女性写真">
		</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Owlview</title>

<!--

h1{

color: #ffffff;

background-color: burlywood;

padding-bottom: .5em;

border-bottom: 3px double #ccc

}

a:link { color: red }

body {

background:skyblue no-repeat center center / 200px 100px;

}

-->

</style>

</head>

<body>

<h1>Owlviewのサイトです。</h1>

<a href="https://owl-view.com">Owlview</a>

</body>

</html>

Style属性で局所的にHTMLにCSSを適用

簡単な流れ

HTMLファイルの<head>間に<meta charset="utf-8">タグを設置
<body>内の各要素に対してCSSを直接指定

各要素に対して局所的にCSSを指定

HTMLファイルの<head>間に<meta charset="utf-8">タグを設置する。

Default

meta charsetの設置" ><head> <meta charset="utf-8"> </head>

1
2
3

meta charsetの設置" ><head>
<meta charset="utf-8">
</head>

<body>内の各要素に対してCSSを直接指定

<body style="background:skyblue no-repeat  center center / 200px 100px";>
　<h1 style="color: #ffffff;background-color: burlywood;padding-bottom: .5em;
　border-bottom: 3px double #ccc">
　Owlviewのサイトです。</h1>
　<a href="https://owl-view.com" Style="color: red">Owlview</a>
　<br><br>
　<img src="women.jpg" title="女性写真">
</body>

　<h1 style="color: #ffffff;background-color: burlywood;padding-bottom: .5em;

　border-bottom: 3px double #ccc">

　Owlviewのサイトです。</h1>

　<a href="https://owl-view.com" Style="color: red">Owlview</a>

</body>

それぞれ各要素のタグ内で直接style=""で装飾を行なっていきます。このようにHTMLの<body>内各要素に対してCSSを適用していくやり方がありますが、複雑になってしまいがちです。

まとめ

HTMLにCSSを適用する三つの方法をご紹介しました。

ポイント

外部CSSファイルの読み込み
HTML内<head>間にCSSを記載
HTML内<body>にCSSを局所的に記載

HTMLファイルとCSSファイルを分けた方が見た目がスッキリしますし、混合しないのでオススメです。

HTMLにCSSファイルを適用する三つの方法をご紹介！HTMLとCSSの関係

HTMLとCSSの意味は？

HTMLの意味とは？

CSSの意味とは

HTMLとCSSの関係性は？

HTML文書にCSSを適用する三つの方法

HTMLファイルに外部CSSファイルを適用

Styleタグで文書単位にHTMLにCSSを適用

Style属性で局所的にHTMLにCSSを適用

まとめ