StyleSheet Memo

::目次::


スタイルシートとは?

  • HTML で示される論理構造とレイアウトを分離するために導入された
  • W3C によって CSS(Cascading Style Sheet)として定義されている

スタイルシートの導入方法

  • 外部ファイル(*.css)を読み込む
    スタイルファイル(style.css)を別に作り、<HEAD>~</HEAD>内に次のような記述を加える。
    <LINK REL = "stylesheet" HREF = "style.css" TYPE = "text/css">
  • HTML 内に埋め込む
    <HEAD>~</HEAD>内に次のような記述を加える。
    <STYLE TYPE = "text/css">
    <!--
    スタイルの設定
    -->
    </STYLE>
    

スタイルシートの書式

  • セレクタ {属性:値;}
    例:
    H1 {color:red;}
    
    上記の例では全てのタグについてスタイル設定を行う。
  • CLASS によってスタイルを使い分ける
    例:DIVタグに red クラスのスタイルを加える
    <STYLE TYPE = "text/css">
    DIV.red {background-color:red;}
    </STYLE>
    HTML 内
    <BODY>
    <DIV CLASS = "red">html</DIV>
    </BODY>
    

スタイルシートいろいろ (テキスト関連)

  • color:*; テキストの色を指定
  • font-family:"*"; フォントの種類を指定
  • font-style:*; フォントのスタイルを指定 (italic, oblique, normal)
  • font-weight:*; フォントの太さを指定 (bold, normal, bolder, lighter)
  • font-size:*; フォントのサイズを指定
  • line-height:*; 改行幅を指定
  • text-decoration:*; テキストを装飾
    • underline 下線
    • overline 上線
    • line-through 打ち消し線
    • blink 点滅
    • none 無し
  • text-align:*; テキストの水平位置を指定 (left, center, right)
  • text-indent:*; インデント指定

スタイルシートいろいろ (背景関連)

  • background-color:*; 背景の色を指定
  • background-image:url("*"); 背景の画像を指定
  • background-attachment:fixed; 背景画像を固定
  • background-repeat:*; 背景画像の繰り返し
    • repeat-x 横方向
    • repeat-y 縦方向
    • no-repeat 繰り返し無し
    • repeat 繰り返し (デフォルト)
  • background-position:*; 背景画像の位置を指定 (top, center bottom, left, center, right)

スタイルシートいろいろ (枠線関連)

  • border-style:*; 枠線のスタイルを指定
    例:
    solid
    


    double


    groove


    ridge


    inset


    outset


  • border-width:*; 枠線の幅を指定 (thin, medium, thick)
  • border-color:*; 枠線の色を指定
  • margin:*; マージンを指定
  • padding:*; 枠線と文字の間隔を指定

スタイルシートいろいろ (リスト関連)

  • list-style-type:*; リストのマークを指定
    例:
    • disc
    • circle
    • square
    • decimal
    • lower-roman
    • upper-romann
    • lower-alpha
    • upper-alpha
    • none
  • list-style-mage:url("*"); リストのマークに画像を指定
  • list-style-position:*; リストのマークの位置を指定 (outside, inside)

スタイルシートいろいろ (リンク関連)

  • リンクの状態によって次の3つに分けられる
  • a:link{ } リンクされている文字列
    a:visited{ } 訪問済みの文字列
    a:hover{ } マウスがリンクされている文字列に乗った時
    
  • { }内のスタイルシートの設定方法は上記のテキストと同じ
  • cursor:*; マウスカーソルの形を指定
    例:
    crosshair
    move
    wait
    help
    w-resize
    e-resize

その他

  • コメント文は /* ~ */

Home

Tips

ページのトップへ戻る