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

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

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

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

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

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

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

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

スポンサーリンク

漫画~CSSの反映方法~

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

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

ぜひご覧ください。

CSSの反映方法

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

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

それぞれ見ていきます。

1.HTMLのheadタグの中にCSSを書く方法

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

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

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

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

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

 <style>
  p { color : red }
 </style>

</head>
<body>
 <p>ここに本文を書きます</p>
</body>

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

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

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

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

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

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

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

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

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

 <p style=”color: red”>ここに本文を書きます</p>
</body>

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

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

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

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

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

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

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

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

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

 <link rel=”stylesheet” href=”style.css”>
</head>
<body>
 <p>ここに本文を書きます</p>
</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″』と書いて、文字コードを指定する必要があります。

複数のCSSファイルを読み込むこともできます。

あとがき

以上、CSSを反映させる3つの方法を説明しました。

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

別のファイルにCSSコードを書くことで、HTMLコードの量を減らすことができます。
すると、キーワードが目立つのでSEOに有利に働きます。

他の方法は、テスト用に使うといいでしょう。

スポンサーリンク

おすすめ記事

フォローする