CSSの記述場所 – CSSはどこに書けばいいのか?【初心者向け】

CSS(スタイルシート)はどこに書けばいいの?そんな疑問を解決できる初心者向けの記事です。CSSの記述場所は3種類あります。styleタグ、インライン、外部ファイルの3つですので、それぞれ書き方を解説します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSの基本的な書き方は決まっていますが、CSSの記述場所にはいくつかあります。

そこで今回は、CSSを書く場所について初心者向けに解説します。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

田島悠介

ここではCSSをどこで書くかということについて説明するよ。

大石ゆかり

田島メンター!!CSSを書く場所というのはどのように決まっているんでしょうか~?

田島悠介

styleタグに書く方法・インラインに書く方法・外部ファイルに書く方法と3通りあるんだ。それぞれの書き方を見てみよう。

大石ゆかり

はい!

 

CSSを書く3つの場所

CSSを書く場所は、ズバリ、以下の3つです。

それぞれに応じて、書く場所も変わってきます。

 

 

それでは、下記のHTMLファイルをもとに、ひとつずつ見ていきましょう。

<!DOCTYPE html>
<html lang=“ja”>
<head>
<meta charset=“UFT-8”>
<title>CSS</title>
</head>
<body>
<h1>CSS入門</h1>
<p>はじめてのCSS</p>
</body>
</html>

 

これをデスクトップに「a.html」の名前で保存し、ブラウザで読み込んだものが次の画面です。

1HTMLのみブラウザ

ここにCSSを使ってスタイルを施していきます。

田島悠介

今回はこの例で、それぞれの記述方法を見てみよう。

大石ゆかり

h1の見出しと、pの段落がひとつずつある状態ですね。

田島悠介

この文書の文字の色や大きさを指定していくよ。まずはstyleタグに書く方法からだね。

 

styleタグに書く

まず、<style> を <head> のなかに書きます。そこで指定していくことで、<body>にスタイルを適応させます。

たとえば、「h1」タグの文字を赤にしたい場合は、次のように書きます。

<!DOCTYPE html>
<html lang=“ja”>
<head>
<meta charset=“UTF-8”>
<title>CSS</title>
          <style>
          h1 {color: red; }
          </style>
</head>
<body>
<h1>CSS入門</h1>
<p>はじめてのCSS</p>
</body>
</html>

 

すると、このようにブラウザでは見栄えが反映されました。

2styleタグ

 

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

インラインに書く

次にインラインに書く方法です。

インラインに書くときは、タグに直接、属性としてスタイルを指定します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>CSS</title>
<style>
h1 {color: red; }
</style>
</head>
<body>
<h1>CSS入門</h1>
<p style=“color: blue; ”>はじめてのCSS</p>
</body>
</html>

 

ブラウザではこのように更新されます。

3インライン

 

 

外部ファイルに書く

最後に、外部ファイルに書く方法です。

これは、HTMLファイルに書き込むのではなく、違うファイルにCSSを書き、リンクで読み込むというものです。

最近公開されているWebサイトではこの書き方が一般的になっています。

 

まずは、新規でファイルを作成してください。

たとえば、フォントサイズを大きくしたい場合、次のように書きます。

h1{
font-size:40px;
}

 

4外部ファイル

 

そしてファイルに拡張子「.css」を入れた名前を付けて保存します。(ここでは「style.css」としました)

ここで注意点ですが、保存するときは、さきほどのHTMLファイルと同じ階層に保存するようにしましょう。

5保存

 

次に、このCSSファイルを、先ほどのHTMLファイルの<style>内に紐付けます。

このとき使うのを「link」タグといい、特定のファイルを紐付けることができる性質を持ちます。

 

<link rel=“stylesheet” href=“style.css”>

 

relは読み込むファイル、hrefは、relで読み込むファイルがどこにあるものかを指定します。

これで、「style.css」のスタイルシートを読み込むという意味になります。

 

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>CSS</title>
<style>
h1 {color: red; }
</style>
<link rel=“stylesheet” href=“style.css”>
</head>
<body>
<h1>CSS入門</h1>
<p style=“color: blue; ”>はじめてのCSS</p>
</body>
</html>

 

これを保存し、ブラウザで読み込みなおすと、別ファイルで書いたスタイルが適応されるはずです。

6外部

指定通り、文字が大きくなりました。

 

今回の記事は以上です。

自分でも手を動かしながらCSSを書いてみましょう。

CSSについてさらに詳しく知りたい場合は、CSSを記述する際の優先順位の記事もあるので合わせてご覧ください。

 

田島悠介

それぞれの適用方法はこんな感じだね。

大石ゆかり

この中だと、外部ファイルが一番編集しやすいように感じますね。

田島悠介

そうだね。基本的にCSSは外部ファイルから適用させる方法が多く使われているよ。まずはこの手順で練習してみよう。

大石ゆかり

分かりました。ありがとうございます!

 

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSを基礎から学ぶことができます。