今回のポイント
これまでHTMLについて学んできました。
このHTMLはマークアップ言語であるということは、これまでの解説で理解頂けると思います。
そして今回からは、HTMLでマークアップした記事に装飾するCSSの言語を実際に使ってみましょう。
HTMLについては以下の記事で復習できるので分からない方は、そちらの記事から参照して下さい。
CSSを使ってみる
CSSの言語を使う為には、３つの方法があります。
３つの方法については、以下の通りです。
- stye属性を使ってCSSを書く
- header内にCSSを書く
- 外部にCSSファイルを作成してCSSを書く
この３つの方法の内、今回は『stye属性を使って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を使いこなせてきている証拠です。
答えは以下のようになります。
stye要素を使ってCSSを書く方法
あらかじめ準備しておいたHTMLファイルの記事に、それぞれStyle要素を記述していく方法です。
まずはh１タグにStyle属性を記述してみます。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
</head>
<body>
<h1 style=”color: blue;”>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タグ内の文字が青色になりました。
これはStyle属性でh1タグを青色に指定した為です。
<h1 style=”color: blue;”>●●</h1>・・・h1タグ内のスタイルは青色に指定
これこそCSSの基本です。
いかがですか？意外と指定方法は簡単だと思います。
続けてStyle属性を追加してみましょう。
今度は先程のおさらいです。
h2タグ内の文字を、赤色に指定してみましょう。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
</head>
<body>
<h1 style=”color: blue;”>CSSを学ぶ。シリーズ</h1>
<p>CSSを使うには３つの方法があります。</p>
<h2 style=”color: red;“>stye属性を使ってCSSを書く</h2>
<p>これまで学んだHTMLのスキルを応用して記述する方法になります。</p>
<h2 style=”color: red;>header内にCSSを書く</h2>
<p>この方法はheader要素内にCSSを記述していく方法になります。</p>
<h2 style=”color: red;>外部にCSSファイルを作成してCSSを書く</h2>
<p>この方法は外部にCSSファイルを作成してCSSを記述する方法になります。</p>
</body>
</html>
それではブラウザで確認してみましょう。
いかがですか？イメージはできてきましたでしょうか。
それでは次に、Pタグ内の文字の大きさを変えてみましょう。
これにもStyle属性を使用します。
記述すると以下のようになります。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
</head>
<body>
<h1 style=”color: blue;”>CSSを学ぶ。シリーズ</h1>
<p style=”font-size: 9px;”>CSSを使うには３つの方法があります。</p>
<h2 style=”color: red;”>stye属性を使ってCSSを書く</h2>
<p style=”font-size: 9px;”>これまで学んだHTMLのスキルを応用して記述する方法になります。</p>
<h2 style=”color: red;>header内にCSSを書く</h2>
<p style=”font-size: 9px;”>この方法はheader要素内にCSSを記述していく方法になります。</p>
<h2 style=”color: red;>外部にCSSファイルを作成してCSSを書く</h2>
<p style=”font-size: 9px;”>この方法は外部にCSSファイルを作成してCSSを記述する方法になります。</p>
</body>
</html>
そしてブラウザで確認すると、以下のようになります。
いかがでしょうか？
Pタグ内の文字が小さくなったことが分かります。
これはPタグ内の文字を、9ピクセルで表示するように指定した為です。
<p style=”font-size: 9px;”>●●</p>・・・Pタグ内の文字は9ピクセルで指定。
このようにCSSを使って、HTMLで作成した記事を装飾していきます。
今回は文字の色と大きさの指定のみですが、色々と指定出来るのでどんどん学んできましょう。
次の記事
HTMLを学ぶ。シリーズはこちら
