ホームページ制作＆SEO
ページの<head>内に記述することにより、そのページにある指定されたタグ全てにその効果が適用されます。
その記述方法は以下のようになります。解りやすいよう、<head>から記述します。
|
<head> <style type="text/css"> <!--要素{属性:値;}--> </style> </head> |
1つの要素に複数の効果を適用したい場合は以下のようになります。
|
<head> <style type="text/css"> <!--要素{属性:値;属性:値;}--> </style> </head> |
複数の要素にそれぞれ効果を適用したい場合は以下のようになります。
| <head> <style type="text/css"> <!--要素{属性:値;} 要素{属性:値;}--> </style> </head> |
さらに特定の要素内のさらに特定の要素に効果を適用させることもできます。
そういった場合は以下のような形になります。
| <head> <style type="text/css"> <!--要素大 要素小{属性:値;} 要素{属性:値;}--> </style> </head> |
ややこしいので念のため例を挙げます。
例えば<p>タグのなかにある<strong>タグに効果を適用させたい場合なら、
|
<head> <style type="text/css"> <!--p strong{属性:値;}--> </style> </head> |
という形になります。
ここでは<p>タグとその中の<strong>タグにCSSの属性を適用させてみます。
解りやすいよう、以下のHTMLは<html>から必要なもののみ抜粋して記述します。
| <html> <head> <style type="text/css"> <!--p{color:#000099;font-size:20px;} p strong{font-family:HGｺﾞｼｯｸE;}--> </style> </head> <body> <p>この文字に<strong>CSSを適用</strong>させています。</p> <br> <br> <p>この文字にもCSSを適用させています。</p> </body> </html> |
上のタグを記述したものが以下のものになります。
|
この文字にCSSを適用させています。 この文字にもCSSを適用させています。 |
今記述したCSSは、<p>タグ内は『文字を青色にする』と『文字の大きさを20pxにする』と指定し、さらに<p>タグ内の<strong>タグに『字体をHGｺﾞｼｯｸEにする』と指定しています。