CSSを反映させる３つの方法を簡単にわかりやすく説明【漫画付】

ブログ初心者
『CSSってどうやってブログに反映させればいいの？
だれかわかりやすく教えて。』

こんにちは、AWAKOJIです。今日も薬剤師をやりながらブログを書いています。

ブログの書き方がなんとなくわかってきたとき、次の壁はCSSでデザインを反映させることではないでしょうか？

僕も初めてCSSを反映させようとしたとき苦労したものです。

この記事では、CSSをブログに反映させる方法３つを簡単にわかりやすく説明します。

理解しやすいように下手ですが、漫画も描いてみました。
５分程度で読めるのでぜひご覧ください。

この記事の内容

漫画～CSSの反映方法～
CSSの反映方法
あとがき
【無料体験・全額返金】圧倒的に効率的なプログラミングスクール

漫画～CSSの反映方法～

以上、CSSの反映方法を漫画で説明しました。

ここからは、文章で説明していきます。

ぜひご覧ください。

CSSの反映方法

web上にCSSを反映させる方法は以下の３つあります。

HTMLのheadタグの中にCSSを書く方法
反映させたいタグの中に直接CSSを書く方法
別ファイルにCSSを書いて、それを読み込む方法

それぞれ見ていきます。

１．HTMLのheadタグの中にCSSを書く方法

1つ目は、headタグの中にCSSを書いていく方法です。

HTMLの基本構造は以下の通りです。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title> ここにタイトルを書きます</title>
</head>
<body>
ここに本文を書きます
</body>

以下のように、headタグの中にCSSを書きます。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title> ここにタイトルを書きます</title>
　<style>
p { color : red }
</style>
</head>
<body>
ここに本文を書きます
</body>

styleタグの中にCSSの指定を書きました。

例文では、pタグではさまれた文字の色を赤にするように設定しました。

この方法だと、すべてのページのheadタグの中にCSSを指定する必要が出てきます。

２．反映させたいタグの中に直接CSSを書く方法

2つ目は、反映させたいタグの中に直接CSSを書く方法です。

HTMLの基本構造は以下の通りです。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title> ここにタイトルを書きます</title>
</head>
<body>
ここに本文を書きます
</body>

以下のように、pタグの中にCSSを書きます。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title> ここにタイトルを書きます</title>
</head>
<body>
　ここに本文を書きます
</body>

pタグの文字を赤に設定するために、開始タグ(文字の前に書かれるタグのこと)の中にCSSのコートが入ります。

終了タグ(文字の後に書かれるタグのこと)はのままです。

直接CSSを書くのは、楽かもしれません。
でも、訂正をしなければいけなくなったとき一つ一つ直していかなければならないためあまりおすすめできない方法です。

３．別ファイルにCSSを書いて、それを読み込む方法

3つ目は、別のファイルにCSSを書いて、それを読み込む方法です。

HTMLの基本構造は以下の通りです。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title> ここにタイトルを書きます</title>
</head>
<body>
ここに本文を書きます
</body>

以下のように、CSSのファイルを読み込みます。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>ここにタイトルを書きます</title>
　<link rel=”stylesheet” href=”style.css”>
</head>
<body>
ここに本文を書きます
</body>

headタグの中でstyle.cssというファイルを読み込んでいます。

link要素には、rel属性とhref属性を書く必要があります。

rel属性：『stylesheet』と書いてCSSファイルを読み込むことを示す
href属性：読み込むCSSのファイル名を書く

CSSのファイル名は好きに決めることができます。
でも拡張子は『.css』である必要があります。

style.cssのファイルには次のような感じで書きます。

@charset “utf-8”
p { color : red ; }

CSSファイルでは最初に『@charset”utf-8″』と書いて、文字コードを指定する必要があります。