A.T-MOON

contents

パンくずリスト

スタイルシートとは
スタイルシートとは

Cascading Style Sheet≠フ略で、HTMLタグだけでは表現しきれないデザイン部分を設定する言語です。
スタイルシートを使用する事で様々な表現ができるようになり、色々なカスタマイズができるようになります。
スタイルシートを使ってサイトをデザインしてみましょう。

スタイルシートの種類と優先順位

@個別に指定する場合。(インラインスタイルシート)
A<head>〜</head>内に挿入してページ全体の指定をする場合。(埋め込みスタイルシート)
B外部にスタイルシートのファイルを作りリンクする場合。(スタイルファイル)
があります。
例えばページ全体(body内)のフォントはこれ、フォントのサイズはこれ、と指定します。
しかし<body>〜</body>で挟まれた部分の中でも<table>タグで挟まれた部分だけははこの文字で表示しようとか
textarea内のスクロールバーはこんな形のこんな色で表示しようとか
それぞれを個別で分けるような形で、その部分だけはコレ!という表現ができるのです。
初めは少しややこしいかもしれませんが理解できるととっても便利に使えてしまうものですので
是非、理解して活用していただきたいです^^(管理人のサイトはスタイルファイルを使ったものが中心です)

適用される優先順位は
←高い 優先順位 低い→
style属性による設定 style要素による設定 外部スタイルシートによる設定
インラインスタイルシートによる設定 埋め込みスタイルシートによる設定 外部スタイルシートによる設定
製作者のスタイル ユーザーのスタイル ブラウザのスタイル

すなわち、読み込まれるのが遅いものほど適用されるということです。
読み込まれたものを上書きしていく、といった感じですね。

特に、優先させたいスタイルがある場合は、優先したいスタイルに
!importantというキーワードを記述し設定しておく必要があります。
ページTOP
ひとつ前のページに戻る

スタイルシートの基礎構造

まず初めにブラウザの誤動作を防ぐために
<meta http-equiv="content-style-type" content="text/css"><head>〜</head>内に記述しましょう。

※埋め込みスタイルシートの基礎
┌──────―────―── 宣言 ───────────―──┐
font { color red }
セレクタ(要素) プロパティ(属性) コロン セミコロン

※インラインスタイルシートの基礎
┌──────―────―── 宣言 ───────────―──┐
font { style= " color red " }
セレクタ(要素) プロパティ(属性) コロン セミコロン

これがスタイルシートの基本的な書式です。
セレクタプロパティによって定義されるひとつのかたまりを宣言といい、
セレクタプロパティにする、という形でHTML文書に組み込んでいきます。
:(コロン);(セミコロン)も大切ですので忘れないように記述しましょう。

セレクタプロパティには色々なものがあります。プロパティに対する値も様々です。
またスタイルシートの種類によって記述方法も変わってきますので、ひとつずつ見ていきましょう。
ページTOP
ひとつ前のページに戻る

セレクタの種類

セレクタとはスタイルを適用する対象を指定するものです。
HTMLでいうところの要素名を利用することができましたが、それをタグにスタイルを設定するといいます。
そのほかにも指定方法がいろいろあり、状況に応じて使い分けができるようになっています。


タグにスタイルを設定
要素名を,(半角コンマ)で区切り並べることで複数の要素に対して適用されます。
要素名{プロパティ:値}
要素名A,要素名B,要素名C{プロパティ:値}

任意の範囲にスタイルを設定
大きくわけるとクラスセレクタIDセレクタがあります。
それぞれに決まりがありクラスセレクタはひとつの文章内で重複して使用することができますが
IDセレクタはひとつの文章内で重複して使用することはできません。
要素名.クラス名{プロパティ:値}
要素名#ID名{プロパティ:値}

擬似クラス・擬似要素にスタイルを設定
要素名:擬似クラス{プロパティ:値}
要素名:擬似要素{プロパティ:値}

それぞれの記述方法を見てみましょう。


ページTOP
ひとつ前のページに戻る

クラスセレクタ

<head>〜</head>内、もしくはスタイルファイル
要素名.クラス名{プロパティ:値}
.任意の名前で宣言を記述。
<body>〜</body>内の記述する場所に<○○ class="任意の名前">ココに文字など</○○>
埋め込みスタイルシート、及びスタイルファイルで使用します。

※埋め込みスタイルシートでの例 (そのままコピペして表示してみてください)
<html>
 <head>
  <title>ココにタイトル</title>
  <style type="text/css">
  <!--
  .font1 {
  color: gray;
  }
  -->
  </style>

 </head>
 <body>
 ココに文章をふつうに書き込みます<br>
  <font class="font1">
  ココに書かれた文字は<br>
  head内で指定されたfont1が適用され<br>
  グレイの文字で表示されます
  <font>
 </body>
</html>
<head>内に
  <style type="text/css">
  <!--
  A {
  BC
  }
  -->
  </style>


<body>内の適用させたい所に
<D class="A">ココに文字など</D>

Aには任意の名前を付けて下さい。先頭に.(半角ドット)を付けて下さいね。
Bプロパティです。セレクタの何をどうするか?≠フ何を?≠フ部分です。
Cです。セレクタの何をどうするか?≠フどうするか?≠フ部分ですね。
Dセレクタです。HTMLタグでいうところの要素名≠ェココに入ります。
div h1〜h6 hr li p span table td ul textarea …など


ページTOP
ひとつ前のページに戻る

IDセレクタ

<head>〜</head>内、もしくはスタイルファイル#任意の名前で宣言を記述。
<body>〜</body>内の記述する場所に<○○ id="任意の名前">ココに文字など</○○>
埋め込みスタイルシート、及びスタイルファイルで使用します。

※埋め込みスタイルシートでの例 (そのままコピペして表示してみてください)
<html>
 <head>
  <title>ココにタイトル</title>
  <style type="text/css">
  <!--
  #font2 {
  color: red;
  background-color: yellow;
  }
  -->
  </style>

 </head>
 <body>
 ココに文章をふつうに書き込みます<br>
  <font id="font2">
  ココに書かれた文字は<br>
  head内で指定されたfont2が適用され<br>
  背景が黄色で赤い文字色で表示されます
  <font>
 </body>
</html>
<head>内に
  <style type="text/css">
  <!--
  #A {
  BC
  }
  -->
  </style>


<body>内の適用させたい所に
<D id="A">ココに文字など</D>

Aには任意の名前を付けて下さい。先頭に#(半角シャープ)を付けて下さいね。
Bプロパティです。セレクタの何をどうするか?≠フ何を?≠フ部分です。
Cです。セレクタの何をどうするか?≠フどうするか?≠フ部分ですね。
Dセレクタです。HTMLタグでいうところの要素名≠ェココに入ります。
div h1〜h6 hr li p span table td ul textarea …など


ページTOP
ひとつ前のページに戻る

擬似クラス

要素名属性などで分類できないものには疑似クラスを使用します。アンカー要素である<a>に使用されます。
要素名に続けて擬似クラスを記述していきます。

※埋め込みスタイルシートでの例 (そのままコピペして表示してみてください)
<html>
 <head>
  <title>ココにタイトル</title>
  <style type="text/css">
  <!--
  a:link {
  color: purple
  }
  -->
  </style>

 </head>
 <body>
 ココに文章をふつうに書き込みます
 <a href="リンク先URL">リンク名</a>
 リンク名のところが<br>
 head内で指定されたスタイルシートが適用され<br>
 紫の文字で表示されます
 </body>
</html>
link visited hover active focus lang …など

a:link = 未訪問ページ(要素)へのスタイル指定
a:visited = 訪問済みページ(要素)へのスタイル指定
a:hover = アンカー要素にマウスカーソルが重なったときのスタイル指定
a:active = アンカー要素をクリックした瞬間のスタイル指定


ページTOP
ひとつ前のページに戻る

擬似要素

HTML文書の構造であるツリー構造の展開にある親要素や子要素などでは指定できない部分に対して
疑似要素というものを使用します。
以下のような擬似要素が定義されています。
:first-line 要素の表示される最初の一行(ブロックレベル要素のみ指定可能)
:first-letter 要素の表示される最初の一文字(一部のブロックレベル要素のみ指定可能)
:before 要素の直前に追加される内容(contentプロパティと併用)
:after 要素の直後に追加される内容(contentプロパティと併用)
要素名に続けて擬似クラスを記述していきます。

※埋め込みスタイルシートでの例 (そのままコピペして表示してみてください)
<html>
 <head>
  <title>ココにタイトル</title>
  <style type="text/css">
  <!--
  p:first-line {
   color: purple
  }
  p:first-letter {
   font-size: 25pt;
   font-weight: bold;
   float: left
  }
  div:before {
   content: "Check!!";
   font-size: x-small;
   color: navy;
  }
  div:after {
   content:"End";
   font-size: x-small;
   color: lime;
  }
  -->
  </style>

 </head>
 <body>
 ココに文章をふつうに書き込みます
 <p>
 この行の一文字目と行全体にが<br>
 head内で指定されたスタイルシートが適用され<br>
 紫の文字で表示され<br>
 一文字目が左端から25ptのサイズで太字で表示されます。
  <div>
  ココからは<div>〜</div>で挟まれた範囲になるので<br>
  直前にCheck!!の文字が表示され<br>
  直後にはEndと表示されます<br>
  </div>
 </p>
 </body>
</html>
範囲を変えて色々試してみて下さい^^
ページTOP
ひとつ前のページに戻る
スタイルシートindexへ戻る前のページ