CSSを学ぶ。Style属性を使ってCSSを書いてみる。

CSSを学ぶ。Style属性を使ってCSSを書いてみる。

今回のポイント

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

CSSを使ってみる

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

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

この3つの方法の内、今回は『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を使うには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を使いこなせてきている証拠です。
答えは以下のようになります。

stye要素を使ってCSSを書く方法

あらかじめ準備しておいたHTMLファイルの記事に、それぞれStyle要素を記述していく方法です。

まずはh1タグにStyle属性を記述してみます。

<!DOCTYPE HTML>
<html lang=”ja”>
<head>
 <meta charset=”UTF-8″>
 <title>ぱくぱくのCSS講座</title>
</head>
 <body>
  <h1 style=”color: blue;”>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タグ内の文字が青色になりました。
これは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を使うには3つの方法があります。</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を使うには3つの方法があります。</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を学ぶ。シリーズはこちら

CSSカテゴリの最新記事