スタイルシートCSSの記述場所と適用方法!

スタイルシートCSSの記述場所と適用方法!

スタイルシートはHTMLファイルとは別に外部ファイルを作成します。その他HTMLファイルへ直接記述する方法もありますが、外部ファイルとして記述する方が良いとされています。ここではスタイルシートの適用方法と位置関係を説明します。

こんにちは!あーるくんです。ヾ ^_^♪
Adobe提携校でWEBクリエイター講師を2年ほどしていました。しっかりと学べるように記事を書いていくので閲覧よろしくお願い致します。

もくじ

スタイルシートCSSの記述場所と適用方法!

CSSには2種類の記述場所がある。

スタイルシート(CSS)には2種類の記述方法があります。

  • 外部ファイルとして記述する方法
  • HTMLのheadタグ内に記述する方法。

この2種類をそれぞれ説明していきます。

デザインを適用する方法だね〜!

あーる君コアラ

スタイルシートとはCSSのことね^^

あーる子コアラ

CSSを外部ファイルとして記述する。

スタイルシートとHTMLファイルを別に作成します。互いにリンクさせることによりCSSファイルに記述されているスタイルをHTMLへ適用します。この方法が主流になります。

CSSを外部ファイルとして記述する

CSSファイルの拡張子は「.css」とです。style.cssなど分かりやすい名前にしましょう。

CSSファイルをHTMLファイルへ適用する為にHTMLへ一筆記述する必要があります。

HTMLへの記述方法。

HTMLのheadタグ内に以下のソースを記述します。

<link rel="stylesheet" href="CSSファイルへのパス" type="text/css">

CSSファイルにstyle.cssという名前を付けます。続いて適用するHTMLファイルと同じ場所にCSSファイルを設置すると以下のようになります。

記述場所はこちら。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.css" type="text/css">
<title>CSSを外部ファイルとして記述する</title>
</head>

<body>
</body>
</html>

headタグ内に記述することで外部CSSを適用することができます。headタグ内であればどこに記述しても構いません。

HTMLへの記述方法(パス)

HTMLファイルとは違う階層のcssファイルを適用する場合。今回はcssフォルダの中にstyle.cssを設置しています。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>CSSを外部ファイルとして記述する</title>
</head>

<body>
</body>
</html>

このように記述することで適用することができます。CSSファイルはフォルダを作成してファイルを格納することが主流です。

外部CSSファイルのメリット。

外部CSSのメリットは一つのCSSファイルで複数のHTMLに適用することができます。スタイルシートを修正することで各ページのデザインを一括的に変更させることも可能です。お店のホームページを季節に応じたデザインに変更することも楽にできます。

HTMLファイルを実際に確認しよう。

CSSを適用する前の表示は以下になります。

外部CSSを適用後は以下の表示になります。スタイルは予めこちらで記述しております。

素材を用意しましたのでHTMLファイルをダブルクリックして確認しましょう。

lesson2の練習用ファイル DL

※ 圧縮したファイルがダウンロードできたらzipファイルをダブルクリックで解凍しましょう。

ダウンロードしたHTMLファイルはVisual Studio Codeで確認してください。Lesson6で紹介しています。

解凍方法が分からない方はこちら

Visual Studio Codeの紹介

HTMLのheadタグ内に直接記述する方法。

CSSをHTMLファイルに直接記述することもできます。スタイルは外部CSSで適用することが一般的ですが、例外として記述することがあります。

headタグ内にstyleタグを記述します。styleタグ内にCSSを記述することで適用できます。

記述方法

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
h1{
color:#F39;
border-bottom:1px solid #F39;
}
li{
color:#30F;
}
</style>

<title>CSSを外部ファイルとして記述する</title>
</head>

<body>
</body>
</html>

素材を用意しましたのでHTMLファイルをダブルクリックして確認しましょう。

lesson2の練習用ファイル DL

まとめ

スタイルを適用するには、外部CSSファイルの添付とHTMLへ直接記述する2つの方法がる。現在は外部CSSを用いて適用する流れが主流。

Lesson.3