CSS講座-CSSの基本

CSS > CSSの基本

CSSのバージョン†

CSSのバージョンには、

• CSS1
• CSS2、CSS2.1
• CSS3
  等がある。

しかし、CSSファイルには「バージョン」を指定する記法がないので、指定したCSSの反映はブラウザの対応状況に依存する。

CSSの書き方†

セレクタ、プロパティ、値†

CSSは、

• セレクタ
• プロパティ
• 値
  という３つの要素で見た目を指定する。

p { color: red; }

• この場合、「p」がセレクタ、「color」がプロパティ、「red」が値となる。
• セレクタは、HTMLタグ名やユーザーが指定した文字列を指定できる。
• セレクタの後に、「{」「}」で囲って、プロパティと値の対を記述する。
• プロパティと値は、「:」で区切る。
• 値の末尾に「;」を付ける。
• 「;」の後に続けて次のプロパティと値の対を記述できる。

コメント†

CSSではコメントを「/*」と「*/」で囲む。

/* コメント */

• C言語のコメントと同様。
• コメントは複数行にわたってもOK。
• コメントの中にコメントを記述する入れ子にはできない。

CSSの適用方法†

CSSの指定†

XHTMLに適用するCSSを指定する方法は、４つある。

• 「link」、「@import」で、別ファイルのCSSを呼び出す方法が良い。
• 直接XHTMLに書き込む「style」の使用は望ましくない。

link要素†

#code(css,nomenu){{

link rel="stylesheet" type="text/css" href="css/style.css" />
}}

@import†

#code(css,nomenu){{

style type="text/css">
@import "css/style.css"

/style>
}}

style要素†

#code(css,nomenu){{

style type="text/css">
p { margin: 15px; }

/style>
}}

style属性†

#code(css,nomenu){{

p style="margin: 15px;">テキスト</p>
}}

CSSの文字コード†

「link」や「@import」で読み込むCSSファイルの先頭行に「@charset "…";」で文字コードを記述しておく。

#code(css,nomenu){{
@charset "UTF-8";
}}

日本語ページの場合は、

• UTF-8
• Shif_JIS
• EUC-JP
  等の文字コードが指定される。

あくまでもCSSファイルで使用する文字コードの指定であり、XHTMLの文字コードとは関係ない。
XHTMLと別の文字コードでも問題ないが、特に理由がなければXHTMLの文字コードと同じにしておく。

CSSのメディアタイプ†

CSSを適用するメディア（デバイス、ソフトウェア）を、「メディアタイプ」によって指定することができる。
カンマ区切りで並べて、複数のメディアタイプを同時に指定できる。
メディアタイプを指定しない場合は、CSSがすべてのメディアに適用される。

XHTMLのlink要素でメディアタイプ指定†

• パソコンのモニターやプロジェクターに適用するCSSの指定

  #code(css,nomenu){{

  link ref="stylesheet" type="text/css" href="css/screen.css" media="screen, projection" />
  }}

• テレビ、テレビゲーム機に適用するCSSの指定

  #code(css,nomenu){{

  link ref="stylesheet" type="text/css" href="css/tv.css" media="tv" />
  }}

• プリンターなどの印刷メディアに適用するCSSの指定

  #code(css,nomenu){{

  link ref="stylesheet" type="text/css" href="css/print.css" media="print" />
  }}

• 携帯電話に適用するCSSの指定

  #code(css,nomenu){{

  link ref="stylesheet" type="text/css" href="css/handheld.css" media="handheld" />
  }}

@importでメディアタイプ指定†

#code(css,nomenu){{
@import url("projection.css") projection;
}}

@mediaでメディアタイプ指定†

#code(css,nomenu){{
@media print {

 body { font-size: medium; }

}
}}

セレクタ†

スタイルの適用対象を指定するのが「セレクタ」

セレクタの種類†

セレクタの記号について

• E
  要素名のセレクタを「E」と表現することがある。これは「Element」に由来している。
• E F
  要素名のセレクタ「E」の次のアルファベット「F」は、他の関連する要素を表現するときに用いられる。

擬似クラス・擬似要素†

• 擬似クラスは、要素の状況やタイミングに対しスタイルを設定できる特殊なセレクタ。
• 擬似要素は、要素内の特定の箇所に対してスタイルを設定できる特殊なセレクタ。

リンク擬似クラスとダイナミック擬似クラスを一緒に使う場合、指定する順番がある。
＝ユーザーによるアクションの順番にする。

1. :link
2. :visited
3. :hover
4. :focus
5. :active

セレクタの組み合わせ†

• 各セレクタは組み合わせて使用可能
  例えば、「#header h1」と指定した場合、「id="header"」（IDセレクタ）の子孫要素として含まれるh1要素（タイプセレクタ）にスタイルが適用される。

コンテンツ範囲を示すID名やクラス名を基に、子孫セレクタでスタイルを適用

#code(css,nomenu){{

#header {

 height: 60px;
 background: #33cccc url(../images/header.jpg);

}

#header h1 {

 padding-top: 20px;
 padding-left: 15px;
 color: #ffffff;

}

#header h1 a {

 color: #0000ff;

}
}}

擬似クラスも利用した、やや複雑な子孫セレクタの例

#code(css,nomenu){{

#main .highlight ul li a:link {

 color: #000080;

}

#main .highlight ul li a:visited {

 color: #800080;

}
}}

子孫セレクタで、構造を示すIDやクラスは、タイプセレクタ（要素名）をつけないことが多い。
「div#header」ではなく、単に「#header」と指定する。
子孫セレクタをつなげて記述する場合、いちいち「div」が出てくると見づらくなるため省略する。

セレクタのグループ化†

セレクタはカンマ区切りでグループ化して、同じスタイルを同時に指定可能。

#code(css,nomenu){{
h1,h2,h3 {

 color: #ff6600;

}
}}

グループ化するセレクタが長いときは、カンマごとに改行すると見やすくなる。
最後のセレクタには、カンマを付けないので注意。

#code(css,nomenu){{

#utility-nav ul li a:link,

#global-nav ul li a:link,

#local-nav ul li a:link {

 color: #0000cc;

}

#utility-nav ul li a:visited,

#global-nav ul li a:visited,

#local-nav ul li a:visited {

 color: #cc0000;

}
}}

プロパティ†

• スタイルの種類（どのような効果を与えるか）が、「プロパティ」。
• 効果の具体的な内容を「値」で指定する。

ボックスモデル†

• XHTMLの要素は、各自の表示領域を持っている。
• この領域は「四角形」と決まっており、四角形の領域を「ボックス」という。
• ボックスは、さらに４つの領域に細分化されている。

• content　（内容）
• padding　（内余白）
• border　（枠線）
• margin　（外余白）

http://html-coding.co.jp/knowhow/tips/000014/
ボックスモデルの概念
ボックスモデルとはブロックレベル要素がもつ短形領域の概念で、内容・マージン（margin）・パディング（padding）・ボーダー（border）から構成されます。

• 背景色の指定は、marginには適用されない。

http://www.justmystage.com/home/hodogaya/css11.html
マージン領域は常に透明として扱われます
ボックスと背景の関係ボックスに背景を指定した場合、内容領域、パディング、ボーダーの各領域には、指定した背景が適用されるが、マージンの領域は常に透明として扱われます。

#html{{

h3 class="well">メニュー</h3>
}}

• 記事一覧
• 書籍紹介
• アイデア

• デザイン
• プログラミング
• ネットワーク・インフラ
• IoT (電子工作)
• ビジネス

#html{{

h3 class="well">まとめ</h3>
}}

• IT用語集
• ネットワーク用語
• ネットワーク講座
• ネットワークスペシャリスト

• DApps (Web 3.0)
• Haskell
• OCaml

• JavaScript
• Elm
• React
• PHP
• CodeIgniter
• WordPress

#html{{

!-- Google Ads -->

script type="text/javascript"><!--
google_ad_client = "ca-pub-1656096348298445";
/* sagasite.info_250x250_20110808 */
google_ad_slot = "6542397273";
google_ad_width = 250;
google_ad_height = 250;

/script>

script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

/script>
}}

最新の10件

人気の10件

#html{{

p align="center">

a href="http://s09.flagcounter.com/more/lQC"><img src="http://s09.flagcounter.com/count/lQC/bg=FFFFFF/txt=000000/border=CCCCCC/columns=2/maxflags=20/viewers=0/labels=1/" alt="free counters" border="0"></a>

/p>
}}

#html{{

p align="center">

a href="http://px.a8.net/svt/ejp?a8mat=1O73NW+3B2PRM+D8Y+BXYE9" target="_blank">

img border="0" width="125" height="125" alt="" src="http://www28.a8.net/svt/bgt?aid=101108300200&wid=001&eno=01&mid=s00000001717002006000&mc=1"></a>

img border="0" width="1" height="1" src="http://www11.a8.net/0.gif?a8mat=1O73NW+3B2PRM+D8Y+BXYE9" alt="">

/p>
}}

#html{{

!-- X:S ZenBackWidget -->

!--

script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//program.sagasite.info/wiki/&nsid=94351984097772224%3A%3A95034570365255946&rand="+Math.ceil*1+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script>

• >

  !-- X:E ZenBackWidget -->
  }}