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に有利に働きます。

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

【無料体験・全額返金】圧倒的に効率的なプログラミングスクール

独学でプログラミングを勉強するのは大変じゃないですか?

  • ググるのが面倒
  • エラーの対応に1日消費
  • 重要なコードがわからない

お金はかからないものの、かなり効率が悪いです。

『Time is Money』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。

代表的なスクールは以下の2つ。

  • TechAcademy
    web系、アプリ系いずれもOK
    完全オンラインでプログラミングを学習したい方
  • テックキャンプ
    web系、アプリ系いずれもOK
    教室またはオンラインで学習したい方

この2つには以下のような特典もあります。

TechAcademy

  • 1週間の無料体験
  • 1コース申し込むと、もう1コースプレゼント

テックアカデミー

  • 1週間以内に申告あれば全額返金
  • 転職できなかったら全額返金

かなりお得です。

確かにどのスクールも本格的にやれば20~30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。

目安の報酬をまとめておくと、

  • ランサーズ:1件10万くらい
  • 中小企業:1件30万くらい
  • 大手企業:桁違い

こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。

この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。

TechAcademy:無料で1週間体験
テックキャンプ:全額返金制度

テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。

おすすめ記事

フォローする