今回のポイント
これまでHTMLについて学んできました。
このHTMLはマークアップ言語であるということは、これまでの解説で理解頂けると思います。
そして今回からは、HTMLでマークアップした記事に装飾するCSSの言語を実際に使ってみましょう。
HTMLについては以下の記事で復習できるので分からない方は、そちらの記事から参照して下さい。
CSSを使ってみる
CSSの言語を使う為には、３つの方法があります。
３つの方法については、以下の通りです。
- stye属性を使ってCSSを書く
- head要素内にCSSを書く
- 外部にCSSファイルを作成してCSSを書く
この３つの方法の内、今回は『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を使うには３つの方法があります。</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を使うには３つの方法があります。</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を使うには３つの方法があります。</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を使うには３つの方法があります。</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タグ内の文字を９ピクセルに指定してみましょう。
そろそろ、感覚が掴めてきた頃ではないでしょうか。
<!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を使うには３つの方法があります。</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を学ぶ。シリーズはこちら
