CSSを学ぶ。head要素内にCSSを書く。

CSSを学ぶ。head要素内にCSSを書く。

今回のポイント

これまでHTMLについて学んできました。
このHTMLはマークアップ言語であるということは、これまでの解説で理解頂けると思います。
そして今回からは、HTMLでマークアップした記事に装飾するCSSの言語を実際に使ってみましょう。
HTMLについては以下の記事で復習できるので分からない方は、そちらの記事から参照して下さい。

CSSを使ってみる

CSSの言語を使う為には、3つの方法があります。
3つの方法については、以下の通りです。

  • stye属性を使ってCSSを書く
  • head要素内にCSSを書く
  • 外部にCSSファイルを作成してCSSを書く

この3つの方法の内、今回は『header内にCSSを書く』方法について解説したいと思います。

まずはHTMLで記事を書いておく。

まずはHTMLで記事を作成しておきます。
今回は以下のように、HTMLで記述した記事を作成しておきました。

<!DOCTYPE HTML>
<html lang=”ja”>
<head>
 <meta charset=”UTF-8″>
 <title>ぱくぱくのCSS講座</title>
</head>
 <body>
  <h1>CSSを学ぶ。シリーズ</h1>
   <p>CSSを使うには3つの方法があります。</p>
  <h2>stye属性を使ってCSSを書く</h2>
   <p>これまで学んだHTMLのスキルを応用して記述する方法になります。</p>
  <h2>header内にCSSを書く</h2>
   <p>この方法はheader要素内にCSSを記述していく方法になります。</p>  
  <h2>外部にCSSファイルを作成してCSSを書く</h2>
   <p>この方法は外部にCSSファイルを作成してCSSを記述する方法になります。</p>
  </body>
</html>

この記事をブラウザで表示するとどうなるか想像できますか?
想像出来るようであれば、大分HTMLを使いこなせてきている証拠です。
答えは以下のようになります。

header内にCSSを書く

あらかじめ準備しておいたHTMLファイルのhead要素内にCSSを記述していく方法です。

まずはhead要素内にStyleタグを記述します。

<!DOCTYPE HTML>
<html lang=”ja”>
<head>
 <meta charset=”UTF-8″>
 <title>ぱくぱくのCSS講座</title>
 <style type=”txt/css”>
 </style>

</head>
 <body>
  <h1>CSSを学ぶ。シリーズ</h1>
   <p>CSSを使うには3つの方法があります。</p>
  <h2>stye属性を使ってCSSを書く</h2>
   <p>これまで学んだHTMLのスキルを応用して記述する方法になります。</p>
  <h2>header内にCSSを書く</h2>
   <p>この方法はheader要素内にCSSを記述していく方法になります。</p>  
  <h2>外部にCSSファイルを作成してCSSを書く</h2>
   <p>この方法は外部にCSSファイルを作成してCSSを記述する方法になります。</p>
  </body>
</html>

これはこの記事にCSSを使用することを宣言する事となります。
そしてこのStyleタグの中に、装飾する内容のCSSを記述していく訳です。

それではh1タグに対して、CSSを記述してみましょう。

<!DOCTYPE HTML>
<html lang=”ja”>
<head>
 <meta charset=”UTF-8″>
 <title>ぱくぱくのCSS講座</title>
 <style type=”text/css”>
  h1 {
    color: blue;
   }

 </style>
</head>
 <body>
  <h1>CSSを学ぶ。シリーズ</h1>
   <p>CSSを使うには3つの方法があります。</p>
  <h2>stye属性を使ってCSSを書く</h2>
   <p>これまで学んだHTMLのスキルを応用して記述する方法になります。</p>
  <h2>header内にCSSを書く</h2>
   <p>この方法はheader要素内にCSSを記述していく方法になります。</p>  
  <h2>外部にCSSファイルを作成してCSSを書く</h2>
   <p>この方法は外部にCSSファイルを作成してCSSを記述する方法になります。</p>
  </body>
</html>

そしてブラウザで確認してみます。

いかがですか?
これはh1要素内の文字を、青色に指定した事になります。

h1 {color: blue;}・・・h1要素内の文字を青色に指定する。

次にh2要素内の文字を赤色に変えてみましょう。
先程の応用ですね。分かりますか?
記述すると、以下のようになります。

<!DOCTYPE HTML>
<html lang=”ja”>
<head>
 <meta charset=”UTF-8″>
 <title>ぱくぱくのCSS講座</title>
<style type=”text/css”>
  h1 {
    color: blue;
   }
  h2 {
    color: red;
   }

 </style>
</head>
 <body>
  <h1>CSSを学ぶ。シリーズ</h1>
   <p>CSSを使うには3つの方法があります。</p>
  <h2>stye属性を使ってCSSを書く</h2>
   <p>これまで学んだHTMLのスキルを応用して記述する方法になります。</p>
  <h2>header内にCSSを書く</h2>
   <p>この方法はheader要素内にCSSを記述していく方法になります。</p>  
  <h2>外部にCSSファイルを作成してCSSを書く</h2>
   <p>この方法は外部にCSSファイルを作成してCSSを記述する方法になります。</p>
  </body>
</html>

それでは、ブラウザで確認してみましょう。

いかがでしょうか。

以前解説した『stye属性を使ってCSSを書く』方法ではそれぞれの要素に対して指定していきましたが、今回は一斉に装飾することができました。

『stye属性を使ってCSSを書く』方法については、以下の記事を参照してみて下さい。

これこそCSSの醍醐味です。
指定したページ内の要素・タグに対して一斉に装飾を与えることができるのです。

それでは前回同様に、Pタグ内の文字を9ピクセルに指定してみましょう。
そろそろ、感覚が掴めてきた頃ではないでしょうか。

<!DOCTYPE HTML>
<html lang=”ja”>
<head>
 <meta charset=”UTF-8″>
 <title>ぱくぱくのCSS講座</title>
<style type=”text/css”>
 h1 {
    color: blue;
   }
 h2 {
    color: red;
   }
 p {
    font-size: 9px;
   }

 </style>
</head>
 <body>
  <h1>CSSを学ぶ。シリーズ</h1>
   <p>CSSを使うには3つの方法があります。</p>
  <h2>stye属性を使ってCSSを書く</h2>
   <p>これまで学んだHTMLのスキルを応用して記述する方法になります。</p>
  <h2>header内にCSSを書く</h2>
   <p>この方法はheader要素内にCSSを記述していく方法になります。</p>  
  <h2>外部にCSSファイルを作成してCSSを書く</h2>
   <p>この方法は外部にCSSファイルを作成してCSSを記述する方法になります。</p>
  </body>
</html>

それでは、ブラウザで確認してみましょう。

いかがだったしょうか。
今回はheader内に、CSSを記述していきました。
一斉にページ内の要素やタグに対して、CSSで指定することが分かったと思います。
前回の解説記事との違いをよく理解して、次回の『外部にCSSファイルを作成してCSSを書く』に臨んでみて下さい。

次の記事

前回の記事

HTMLを学ぶ。シリーズはこちら

CSSカテゴリの最新記事