スタイルシート（CSS）／こまホームページ制作（静岡）

スタイルシート（CSS）の主なもの一覧。

スタイルシートの記述方法 ＆ 主な属性と値

スタイルシートの記述方法

記述場所

外部スタイル（リンキングスタイルシート）

<link rel="stylesheet" href="" type="text/css">
　※ 外部スタイルシートの記述には<style>タグは使わない
　※ 複数の外部スタイルファイルをまとめて読み込む
　　　@import url("");

HTMLページ内スタイル

まとめて記述
  <style type="text/css">
  <!--
  -->
  </style>
インラインで記述
  <タグ style="">

効果の範囲

タグにスタイルを設定

タグ{}

任意の範囲にスタイルを設定

.クラス名{}
#ID名{}

タグの相関関係でスタイルを設定

タグ1 タグ2{}

状況に応じてスタイルを設定（疑似クラス、疑似要素）

a:link /* 未参照Aタグ */
a:visited /* 既参照Aタグ */
:active /* マウスボタンが押されている */
:hover /* マウスカーソルが重なっている */
:first-letter /* 要素の中の最初の1文字 */
:first-line /* 要素の中の最初の1行 */

コメント

/*コメント*/

親要素、子要素の影響

スタイルシートは親要素、子要素の関係によって効果に影響がある

単位

絶対 … mm、cm、in、pt、pc
相対 … em、ex、px、%

スタイルシートの主な属性と値

文字

color:#000000; /* 文字の色 */
text-indent:1em; /* 段落にインデント */
vertical-align:middle;
  /* インラインレベル要素とテーブルのセル要素の上下位置
  baseline,super,sub,top,middle,bottom */
letter-spacing:10px; /* 文字間隔 */
text-decoration:none;/* 文字装飾 none,overline,underline,line-through */
white-space:normal,pre,nowrap;
  /* 空白・改行の扱い（「pre」はIE5.5、6、7非対応） */
font:normal normal normal 100%/1.4 sans-serif;
font:italic small-caps bold larger/normal monospace;
  /* フォントの設定
  明朝体 … 'ＭＳ Ｐ明朝',平成明朝,'ヒラギノ明朝 Pro W3'
  ゴシック体 … 'ＭＳ Ｐゴシック',Osaka,'ヒラギノ角ゴ Pro W3'
  等幅フォント … 'ＭＳ ゴシック','ＭＳ 明朝',Osaka−等幅
  毛筆体（Windows） … HG正楷書体-PRO
  UTF-8で半角バックスラッシュを半角円記号（¥）に変換表示（Windows） … "MS PGothic","MS UI Gothic"
  */
font-style:; font-variant:; font-weight:; font-size:; line-height:; font-family:;

背景

background:transparent none repeat scroll left top;
background:#ffffff url("") repeat fixed 0px 3px;
  /* no-repeat、repeat-x、repeat-y*/

枠

border-width:0px;
border-top:0px solid transparent;
border-right:1px double #000000;
border-bottom:2px dotted #cccccc;
border-left:3px dashed #ffffff;

ボックス

width:300px;
height:100px;
overflow:scroll;/*hidden*/

配置

text-align:left,center,right;
  /* 文字の左右位置（NNでテーブルに対して設定する場合は
  マージンを左右とも「auto」にする）*/
margin:0px auto 0px auto;/*マージン*/
padding:0px 0px 0px 0px;/*パディング*/
position:relative; /* absolute */
  top:0px; left:0px ; bottom:0px ; right:0px ;
z-index:1 ; /* 重ね合わせの順序 */
display:block;/*inline,list-item,none（レイアウトに影響を及ぼさない）*/
visibility:visible;/* hidden（レイアウトに影響を及ぼす） */
float:left; /* right、回り込みを指定 */
clear:both; /* 回り込みを解除 */

リスト

list-style:disc outside url("");
　マーク
　　disc … 黒丸
　　circle … 白丸
　　square … 四角
　　decimal … 10進数
　　lower-roman … ローマ数字（小文字）
　　upper-roman … ローマ数字（大文字）
　　lower-alpha … アルファベット（小文字）
　　upper-alpha … アルファベット（大文字）
　　none … マークなし
　画像
　　url("")
　　none
　配置
　　outside
　　inside

カーソル

cursor:pointer;/* text、help（「pointer」はIE5.5非対応）*/