webデザイン独学【無料】スタイルシートCSSの記述場所と適用方法！

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

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

もくじ

webデザイン独学【無料】スタイルシートCSSの記述場所と適用方法！

CSSには２種類の記述場所がある。
CSSを外部ファイルとして記述する。
HTMLへの記述方法。
HTMLへの記述方法（パス）
外部CSSファイルのメリット。
HTMLファイルを実際に確認しよう。
HTMLのheadタグ内に直接記述する方法。
まとめ

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

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

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

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

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

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

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

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

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

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

HTMLへの記述方法。

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

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>

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>

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

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

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

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

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

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

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

lesson2の練習用ファイル DL

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

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

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

練習用ファイルのzip解凍方法

Visual Studio Codeの紹介

Microsoft社が提供している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>