スタイルシートの基礎

● スタイルシートとは

　スタイルシートは、WEBページ上の「見栄え」を設定するためのタグです。HTML は本来文書内容を記述するものでありました。見た目を重視したWebページが増えるに従って、HTML に対するデザイン面の要求が高まっていきました。このように、HTML に対するデザイン面を専門に担当するのがスタイルシートでです。　スタイルシートを適用前のページと、適用後のページの違いを見てみ比べてみてください。記述内容が同じでもまったく異なった見栄えになることが実感して頂けると思います。

● スタイルの基本的な記述

　スタイルの記述方法には、タグ要素での設定、ページ単位での設定、スタイルファイルでの設定と３つの種類あります。
　同じ属性が設定されている場合は、例外を除いて、狭い範囲の設定が優先します。すなわちタグ要素での設定が最優先で、次がページ全体というように優先順位が下がってゆきます。

タグ要素でスタイルを設定する

HTMLソース

ブラウザ画面表示

<html>
<head>
  <title>タグ要素でスタイル設定</title>
</head>
<body>
　 <p  style="color:aqua;background-color:yellow;">スタイル１</p>　･･･②
　 <p  style="padding:1em 3em;border:2px dotted red;">style２</p> ･･･③
</body>
</html>

タグ要素でスタイル設定 - Microsoft････

File　Edit　 View　fAvorite　Tool　Help　

スタイル１　　　　　　　　･･･②

style２　　　　　　･･･③

サンプルページ

style="○○:**; △△: ++;"

;

<style>タグでスタイルを設定する

HTMLソース

ブラウザ画面表示

<html><head>
  <title>style タグでスタイル設定</title>
  <style type="text/css">　　　　　　　　　　　　　　･･･①
    
  </style>
</head>
<body>
　 <h2>スタイルＡ</h2>　　　　　　　　　　　　　　　･･･②
　 style タグ記述で、指定タグのスタイルを設定 　　　　･･･③
</body></html>

style タグでスタイル設定 - Microsoft････

File　Edit　 View　fAvorite　Tool　Help　

スタイルＡ　　　　　　　　　　　　　　･･･②

style タグ記述で、指定タグのスタイルを設定　･･･③

サンプルページ

タグ属性 {○○:**; △△: ++;}

タグ属性 , タグ属性 { ○○:** ; △△: ++; }

クラス

ＩＤ

スタイルシートファイルでスタイルを設定する

HTMLソース

ブラウザ画面表示

　【HTMLファイル】
<html><head>
<title>スタイルファイルで設定</title>
<link rel="stylesheet" href="sheet.css" type="text/css"> 　　･･･①
</head>
<body>
　 <p>スタイルシート</p> 　　　　　　　　　　　　　　　　　　　　･･･②
　 <span>スタイルシートファイルでスタイル設定</span> 　　　　　･･･③
</body></html>

　【スタイルシートファイル: [sheet.css] 】　　　　　　　　　　　　　　･･･④
/* スタイルシート内にコメントを書きたいときは、このように書きます */　･･･⑤
p{color:#339933;text-align: center;letter-spacing:1.0em;}
span{background-color:lime;direction:rtl;unicode-bidi:bidi-override;}

スタイルファイルで設定 - Microsoft････

File　Edit　 View　fAvorite　Tool　Help　

スタイルシート

　　　　　　　　　　　　　　　　　　　　･･･②

スタイルシートファイルでスタイル設定
　　　　　　　　　　　　　　　　　　　　･･･③ 　

サンプルページ

<link>

href="□□.css"

/* ～ */