| ページ全体にCSSを適用する | |
 |
まずはソースを確認してみましょう。 左はHTMLの基本形をしています。 <BODY>ここがメイン部分</BODY>となっています。 文字を入れてみましょう。 |
 |
<h1>おめでとう</h1> h1タグを使っておめでとうと挿入しました。 確認してみましょう。 |
 |
こんな感じで表示されました。 これにページ全体に適用するスタイルを埋め込んでみましょう ここでは単純にFONTの種類だけを変更してみます。 |
 |
ページ全体に適用する場合は<STYLE>タグを使います。 <HEAD>タグの下に埋め込んで使います。 左のように埋め込むとどうなるか？ 確認してみましょう。 |
 |
FONTを変化させました。 色も赤っぽく変えてみましょう。 |
 |
図の位置にカラーコードを挿入しました。 H1{}カッコ内で指定しているだけです。 H1{}カッコの中でH1タグにはこういうスタイルを適用しなさい！ と教えているだけなのです。 それを<STYLE>タグでページ全体に適用させています。 とりあえず確認してみましょう。 |
 |
こんな感じになります。 |
 |
おめでとうの数を３つに増やしてみました。 確認しましょう。 |
 |
全てのH1タグに同じスタイルが適用されています。 同じような事をスタイルなしでやってみましょう。 |
 |
同じFONTがなかったので…違うのを埋め込みました。 STYLEタグは消えましたが各H1タグに同じタグが必要になります 確認してみましょう。 |
 |
極端な感じですがスタイルをページに設定することで 打ち込むタグの数を減らせるのが解りますよね？ ページ全体に設定する時は<HEAD>タグの下に埋め込みます。 |
 |
<STYLE>タグの埋め込み場所と 左のように指定したスタイルを囲むように覚えておけば大丈夫です 後は<P>タグなどのタグを足してスタイルを設定するだけです こうする事でページ全体にスタイルを適用させる事が出来ます。 最後に例を少しみせておきます。 |
 |
左のような感じで足していきます。 こうすることでページ内のタグ全てに同じスタイルを適用出来ます ここでは埋め込む場所と囲い方だけ覚えておけば大丈夫です。 次からはこのページほどの難しさはありません。 簡単で便利に使えるものを紹介していきましょう。 |
| HOME BACK | |