html内のclass名を認識して該当するcssを反映させるプラグイン。

DL：css-lib-2.4.zip

marginやpaddingやborder-radiusなど、cssファイルに書く事なく
html内のclassに直接数値を書けば自動でcssを適応してくれる。

とりあえずヘッダーで読み込む。

後はhtmlに自動生成したいclassを書くのみ。

例：classをこう書くと

  
天下一品が食べたい。

こうなる

例：classをこう書くと

  
ごちそうさまでした。

こうなる
※例のようにclassをシングルクォーテーションで括る必要は無い。

以下が対応するclass名一覧
○○のとこの数値を変えればその数値で自動生成される。

全体margin ： m_○○
上margin ： m_t○○
右margin ： m_r○○
左margin ： m_l○○
下margin ： m_b○○
左右margin ： m_lr○○
上下margin ： m_lr○○
左右margin-auto ： m_auto

全体padding ： p_○○
上padding ： p_t○○
右padding ： p_r○○
左padding ： p_l○○
下padding ： p_b○○
左右padding ： p_lr○○
上下padding ： p_lr○○

角丸 ： r_○○
角丸上 ： r_t○○
角丸下 ： r_b○○
角丸左 ： r_l○○
角丸右 ： r_r○○
角丸左上 ： r_tl○○
角丸右上 ： r_tr○○
角丸左下 ： r_bl○○
角丸右下 ： r_br○○

幅 ： w_○○

高さ ： h_○○

フォントサイズ ： fs_○○
line-height  :lh_○○
※デフォルトは%指定。

ボックスパック start　： bxpk_s
ボックスパック end　： bxpk_e 
ボックスパック center　： bxpk_c 
ボックスパック justify　： bxpk_j 

textセンター ： txt_c
text右寄せ ： txt_r
text左寄せ ： txt_l

フロート左 ： float_l
フロート右 ： float_r

valign上寄せ ： vl_t
valign中央寄せ ： vl_m
valign下寄せ ： vl_b

背景無し ： bg_n
ボーダー無し ： bd_n

フォントサイズ small ： small
フォントサイズ x-small ： x-small
フォントサイズ xx-small ： xx-small
フォントサイズ medium ： medium
フォントサイズ large ： large
フォントサイズ x-large ： x-large
フォントサイズ xx-large ： xx-large

ボールド ： bold
ノーマル ： normal

clear-left ： clear_l
clear-right： clear_r
clear-both ： clear_b

テキストカラー ：white , red , blue,brown , black , green , gold , yellow , pink , purple , orange , aqua , gray , navy , yellowgreen 

jQuery

• 
• Tweet