A.T-MOON

contents

パンくずリスト

メッセージエリア

スタイルシートindex
ここではスタイルシートについての解説を行っています。
スタイルシートの基礎から記述方法、使い方までを紹介しています。
スタイルシートを理解できるとサイト内に色々な応用が効くようになりますので
是非、使えるようになって下さいね。

順を追っての面倒な説明(?)になっていますので
「そんなのどーでもいいや。とりあえずタグ!タグが知りたい!!」って方は
←左のメニュー、又は↓下のindexからのからお好きな所にお飛びください(笑)

又、知りたいタグが【HTML】なのか【スタイルシート】なのか…なんだかわからないという方は
タグindexもしくは目的別indexを見て探してみてください。
ひとつ前のページに戻る
Design&Action スタイルシートとは

メッセージエリア

スタイルシート 目的別index

メッセージエリア

文字の指定をしたい   文字を装飾したい
  1. 文字のサイズを指定したい {font-size: ;}
  2. 文字の種類を指定したい {font-family: ;}
  3. 文字の色を指定したい {font-color: ;}
  4. 文字と文字の間隔を指定したい
    {letter-spacing: ;}
  5. 文字と文字の行間を指定したい
    {line-height: ;}
 
  1. スタイルを指定したい
    <font style="○○">(文字の色やサイズや種類など指定)
  2. 縦書き表示にしたい
    <○○ style="writing-mode:tb-rl;>(範囲を指定して括る)
  3. 文字に影をつける {filter:dropshadow}
  4. 文字を発光させる {filter:glow}
  5. 文字をかすれさせる {filter:shadow}
  6. 文字を次第に透明にする {filter:alpha}
  7. 文字の背景に色をつける {background-color}
  8. 文字の背景に色をつけ文字を白抜きにする
    {filter:mask}
背景の指定をしたい   位置の指定をしたい
  1. 背景色を指定したい
  2. 背景に画像を指定したい
  3. 画像を固定したい
  4. 画像を横に並べたい
  5. 画像を縦に並べたい
  6. 文字と文字の間隔を指定したい
  7. 画像を一枚のみ表示したい
  8. 画像の位置を指定したい
 
  1. テーブルや画像などの表示位置を指定したい
表示形式の指定をしたい   回り込みの指定をしたい
  1. comin' soon
 
  1. comin' soon
スクロールバーの指定をしたい   BOXを使ってレイアウトしたい
  1. comin' soon
 
  1. サイズを指定したい
  2. 枠線の種類を指定したい
  3. 枠線の色を指定したい
  4. 枠の太さを指定したい
  5. 外側の余白を指定したい
  6. 内側の余白を指定したい

ページTOP
ひとつ前のページに戻る
Design&Action スタイルシートとは

メッセージエリア

スタイルシート 要素と属性index

メッセージエリア

a   b
comin' soon
  • comin' soon
  background属性
背景関連の一括指定
要素{background: 値 値 値;}
半角スペースで区切り複数の値を一括で指定できます
  • color … カラーコードかカラーネーム
  • img … 画像ファイルのURL
  • repeat … 背景画像の並び方
  • position … 背景画像の表示位置
  • attachment…背景画像の固定、非固定の指定
backgyound-attachment属性
背景画像の固定、非固定の指定
要素{backgyound-attachment:値;}
  • fixed … 背景画像の位置の固定
  • scroll … 他の内容と共にスクロール
backgyound-color属性
背景色の指定
要素{backgyound-color:値;}
  • カラーコードかカラーネーム
  • transparent … 背景を透明に
backgyound-image属性
背景の画像指定
要素{backgyound-image:値;}
  • 画像ファイルのURL
  • none … 背景画像の指定をしない(デフォルト)
backgyound-position属性
背景画像の表示位置指定
要素{backgyound-position:値;}
  • 実数値+単位 … px、pt、%など
  • キーワード … left、right、top、bottom
backgyound-position-x属性
背景画像の横方向の表示位置指定
要素{backgyound-position-x:値;}
  • 実数値+単位 … px、pt、%など
  • キーワード … left、center、right
backgyound-position-y属性
背景画像の縦方向の表示位置指定
要素{backgyound-position-y:値;}
  • 実数値+単位 … px、pt、%など
  • キーワード … top、center、bottom
backgyound-repeat属性
背景画像の並び方を指定
要素{backgyound-repeat:値;}
  • repeat … 縦横にタイル状に
  • repeat-x … 横方向のみ繰り返し
  • repeat-y … 縦方向のみ繰り返し
  • no-repeat … ひとつだけ(繰り返しなし)
border属性
線の一括指定
要素{border: 値 値 値;}
半角スペースで区切り複数の値を一括で指定できます
  • color … カラーコードかカラーネーム
  • width … 線の長さ
  • style … none、hidden、solidなど
border-style属性 … 線の設定
  • color … カラーコード、カラーネーム
  • image… 画像ファイルのURL
background属性 … 背景の設定
  • color … カラーコード、カラーネーム
  • image… 画像ファイルのURL
c   d
comin' soon   div … テキストや画像などをひとつのまとまりに設定
  • align属性 … 表示位置の指定
  • style属性 … スタイル情報を直接記述して指定
  • id属性 … スタイルシートのセレクタや
    スクリプトからの参照先、
    オブジェクトの指定やリンクの指定
  • class属性 … スタイルシートのセレクタや
    スクリプトからの参照先、
    オブジェクトの指定やリンクの指定
  • title属性 … 要素の情報表示の指定
e   f
 
  •  
  font … 文字の設定
  • color … 文字の色の指定
  • size … 文字の大きさの指定
  • face … 文字の種類の指定
g   h
 
  •  
   
  •  
i   j
 
  •  
   
  •  
k   l
 
  •  
 
  •  
m   n
 
  •  
   
  •  
o   p
 
  •  
  p … テキストや画像などをひとつのまとまりに設定
  • align属性 … 表示位置の指定
  • style属性 … スタイル情報を直接記述して指定
  • id属性 … スタイルシートのセレクタや
    スクリプトからの参照先、
    オブジェクトの指定やリンクの指定
  • class属性 … スタイルシートのセレクタや
    スクリプトからの参照先、
    オブジェクトの指定やリンクの指定
  • title属性 … 要素の情報表示の指定
q   r
 
  •  
   
  •  
s   t
span … テキストや画像などをひとつのまとまりに設定
  • align属性 … 表示位置の指定
  • style属性 … スタイル情報を直接記述して指定
  • id属性 … スタイルシートのセレクタや
    スクリプトからの参照先、
    オブジェクトの指定やリンクの指定
  • class属性 … スタイルシートのセレクタや
    スクリプトからの参照先、
    オブジェクトの指定やリンクの指定
  • title属性 … 要素の情報表示の指定
   
  •  
u   v
 
  •  
   
  •  
w   x
     
  •  
y   z
 
  •  
   
  •  

ページTOP
ひとつ前のページに戻る
Design&Action スタイルシートとは