上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
*今回の記事は、主にコチラのホームページを参考にしています(Cascading Style Sheets, Level 2

 さて、スタイルが適度に当てられるようになったら、スタイルシートでどこまで出来るのかが気になるところ。
 今回は資料集を作ってみましょう。今まで出てきた、主に「文字周り」を装飾・デコレーションするためのスタイルシートの命令文(これを値・プロパティといいます)をひとまとめにしてみましょう。
(スタイルシート講座・メインメニューはコチラから
実用的スタイルシート入門

font,text フォント
フォントfont-familyserif
sans-selif
明朝体
ゴシック体
font-family : "MS ゴシック" , sans-serif ;
字体 font-style normal
italic
正体
斜体
font-style : normal ;
太さ font-weight normal
bold
中字
太字
font-weight : bold ;
大きさfont-size~px文字サイズ
font-size : 16px ;
文字色color#~文字色
color : #ffcc99 ;
デコレーションtext-decorationnone
underline
overline
line-through
飾り無し
下線
上線
取り消し線
text-decoration : underline ;
字間letter-spacing~px字と字の隙間
letter-spacing : -1px ;
行間line-height~px
~%
行間の隙間
line-height : 1.3 ;
行揃えtext-alignleft
center
right
左寄せ
中央寄せ
右寄せ
text-align : left ;
padding ボーダーの内側の空間
パディングpadding
padding-top
padding-right
padding-bottom
padding-left
~px4辺の空間
上の空間
右の空間
下の空間
左の空間
上下同時、左右同時指定 padding : ~px ~px ;
上下 左右
上下左右同時指定 padding : ~px ~px ~px ~px ;
*半角スペースで区切る
margin ボーダーの外側の空間
マージンmargin
margin-top
margin-right
margin-bottom
margin-left
~px4辺の空間
上の空間
右の空間
下の空間
左の空間
上下同時、左右同時指定 margin : ~px ~px ;
上下 左右
上下左右同時指定 margin : ~px ~px ~px ~px ;
border 枠線・ボーダー




border
border-top
border-right
border-bottom
border-left
: #~ ~px ;
太さスタイル
この三つの項目は順不同です。
半角スペースで区切ります。
ボーダーのスタイル none
dotted
dashed
solid
double
groove
ridge
inset
outset
ボーダーなし
ボーダー
ボーダー
ボーダー
ボーダー
ボーダー
ボーダー
ボーダー
ボーダー
display ブロック要素かインライン要素かの指定
ディスプレイdisplay none
inline
block
見えなくする
インライン(spanと同じ)
ブロック(divと同じ)
display : none ;
ブロック(div)要素の大きさ制御
高さheight~px
height : 24px ;
横幅width~px
width : 250px ;

■RGB色をランダムに探す!
RGBカラー・ランダムくん

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Tue.03.23.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。