【初心者向け】CSSをhead内に書くやり方を紹介
「CSSって結局どこに書けばいいのかよくわからない」
こう思う方も多いのではないでしょうか。
本記事をお読みいただくと以下が分かります。
- CSSをhead要素内に書くやり方がわかる
CSSを書ける場所はいくつかありますが、本記事ではその中でもhead内にCSSを書くやり方を紹介します。是非本記事をお読みいただき、理解を深めてください。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
CSSを記述する主な3つの場所
記事の冒頭でもお伝えしたとおり、CSSを記述できる場所は主に3つあります。
・stye属性を使ってCSSを書く
・外部ファイルを作成してCSSを書く
・head要素内にCSSを書く
入門として習う時には外部ファイルを作成してCSSを書いたことがある方も多いかもしれません。この中で、本記事では最後の項目のhead要素内にCSSを書くやり方を紹介します。
CSSをhead要素内に書くやり方
それでは早速、CSSをhead要素内に書くやり方を紹介します。まずはCSS設定前のHTMLサンプルです。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>CSS学習資料</title>
</head>
<body>
<h1>CSSとは</h1>
<p>CSSとは、背景や文字の装飾をするために使います。CSSを書く場所は主に3つです。</p>
<h2>stye属性を使ってCSSを書く</h2>
<p>stye属性を使ってCSSを書くには、〇〇のように書く必要があります。</p>
<h2>外部ファイルを作成してCSSを書く</h2>
<p>外部ファイルを作成してCSSを書くには、△△のように書く必要があります。</p>
<h2>head要素内にCSSを書く</h2>
<p>本記事で紹介するやり方はこちらです。</p>
</body>
</html>
上記をコピーアンドペーストで良いので試してみてください。今はまだ、見出しをつけているのでタイトルが太字のように見えていますが何も装飾はしていない状態です。
このままでもいいのですが、黒文字ばかりで味気なかったり、少し見づらいですよね。
それでは、ここにCSSでシンプルな装飾をしてみた例がこちらです。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>CSS学習資料</title>
<style>
h1 {color: green; }
</style>
</head>
<body>
<h1>CSSとは</h1>
<p>CSSとは、背景や文字の装飾をするために使います。CSSを書く場所は主に3つです。</p>
<h2>stye属性を使ってCSSを書く</h2>
<p>stye属性を使ってCSSを書くには、〇〇のように書く必要があります。</p>
<h2>外部ファイルを作成してCSSを書く</h2>
<p>外部ファイルを作成してCSSを書くには、△△のように書く必要があります。</p>
<h2>head要素内にCSSを書く</h2>
<p>本記事で紹介するやり方はこちらです。</p>
</body>
</html>
追加した部分は以下です。head内に<style>タグを追加し、h1タグは緑文字にするという装飾です。
<style>
h1 {color: green; }
</style>
こうすることで、h1タグの「CSSとは」だけを緑文字にすることができました。
いかがでしょうか。非常にシンプルに装飾できることがお分かりいただけたと思います。それではさらに、h2タグの文字色も変えてみましょう。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>CSS学習資料</title>
<style>
h1 {color: green; }
h2 {color: blue; }
</style>
</head>
<body>
<h1>CSSとは</h1>
<p>CSSとは、背景や文字の装飾をするために使います。CSSを書く場所は主に3つです。</p>
<h2>stye属性を使ってCSSを書く</h2>
<p>stye属性を使ってCSSを書くには、〇〇のように書く必要があります。</p>
<h2>外部ファイルを作成してCSSを書く</h2>
<p>外部ファイルを作成してCSSを書くには、△△のように書く必要があります。</p>
<h2>head要素内にCSSを書く</h2>
<p>本記事で紹介するやり方はこちらです。</p>
</body>
</html>
先ほどのhtタグの下に、以下のようにh2タグのCSSの記述を増やしただけでh2タグの「stye属性を使ってCSSを書く」「外部ファイルを作成してCSSを書く」「head要素内にCSSを書く」を緑色にすることができました。
<style>
h1 {color: green; }
h2 {color: blue; }
</style>
まとめ
いかがでしたでしょうか。非常にシンプルにCSSの記述ができることがお分かりいただけたと思います。
是非本記事をきっかけに、ユーザにとって読みやすいサイト設計を進めてください。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
