«
»

モジュールCSS

2009年8月11日

Filed under: (X)HTML+CSS — admin @ 4:05 PM

CSSでよく使うモジュールをまとめてみた。
とりあえず基本的なクラスだけ。

PLAIN TEXT
CSS:
  1. /**
  2. *
  3. *    module.css
  4. */
  5.  
  6. /*    font
  7. ----------------------------------------------*/
  8. .xlf {font-size: 125% !important;}
  9. .lf {font-size: 115% !important;}
  10. .sf {font-size: 85% !important;}
  11. .xsf {font-size: 75% !important;}
  12.  
  13. .fb {font-weight: bold !important;}
  14. .fn {font-weight: normal !important;}
  15.  
  16. /*    margin padding
  17. ----------------------------------------------*/
  18. /* margin */
  19. .m10 {margin:10px !important;}
  20. .m20 {margin:20px !important;}
  21. .m30 {margin:30px !important;}
  22. .m40 {margin:40px !important;}
  23. .m50 {margin:50px !important;}
  24. /* padding */
  25. .p10 {padding:10px !important;}
  26. .p20 {padding:20px !important;}
  27. .p30 {padding:30px !important;}
  28. .p40 {padding:40px !important;}
  29. .p50 {padding:50px !important;}
  30.  
  31. /* detail */
  32. .mt0 {margin-top:0 !important;}
  33. .mt1 {margin-top:1px !important;}
  34. .mt2 {margin-top:2px !important;}
  35. .mt3 {margin-top:3px !important;}
  36. .mt4 {margin-top:4px !important;}
  37. .mt5 {margin-top:5px !important;}
  38. .mt10 {margin-top:10px !important;}
  39. .mt11 {margin-top:11px !important;}
  40. .mt12 {margin-top:12px !important;}
  41. .mt13 {margin-top:13px !important;}
  42. .mt14 {margin-top:14px !important;}
  43. .mt15 {margin-top:15px !important;}
  44. .mt20 {margin-top:20px !important;}
  45. .mt25 {margin-top:25px !important;}
  46. .mt30 {margin-top:30px !important;}
  47. .mt35 {margin-top:35px !important;}
  48. .mt40 {margin-top:40px !important;}
  49. .mt45 {margin-top:45px !important;}
  50. .mt50 {margin-top:50px !important;}
  51. .mt55 {margin-top:55px !important;}
  52. .mt60 {margin-top:60px !important;}
  53. .mt65 {margin-top:65px !important;}
  54. .mt70 {margin-top:70px !important;}
  55. .mt75 {margin-top:75px !important;}
  56. .mt80 {margin-top:80px !important;}
  57. .mt85 {margin-top:85px !important;}
  58. .mt90 {margin-top:90px !important;}
  59. .mt95 {margin-top:95px !important;}
  60. .mt100 {margin-top:100px !important;}
  61.  
  62. .mb0 {margin-bottom:0px !important;}
  63. .mb5 {margin-bottom:5px !important;}
  64. .mb10 {margin-bottom:10px !important;}
  65. .mb15 {margin-bottom:15px !important;}
  66. .mb20 {margin-bottom:20px !important;}
  67. .mb25 {margin-bottom:25px !important;}
  68. .mb30 {margin-bottom:30px !important;}
  69. .mb35 {margin-bottom:35px !important;}
  70. .mb40 {margin-bottom:40px !important;}
  71. .mb45 {margin-bottom:45px !important;}
  72. .mb50 {margin-bottom:50px !important;}
  73.  
  74. .ml0 {margin-left:0 !important;}
  75. .ml1 {margin-left:1px !important;}
  76. .ml2 {margin-left:2px !important;}
  77. .ml3 {margin-left:3px !important;}
  78. .ml4 {margin-left:4px !important;}
  79. .ml5 {margin-left:5px !important;}
  80. .ml6 {margin-left:6px !important;}
  81. .ml7 {margin-left:7px !important;}
  82. .ml8 {margin-left:8px !important;}
  83. .ml9 {margin-left:9px !important;}
  84. .ml10 {margin-left:10px !important;}
  85. .ml15 {margin-left:15px !important;}
  86. .ml20 {margin-left:20px !important;}
  87.  
  88. .mr0 {margin-right:0px !important;}
  89. .mr1 {margin-right:1px !important;}
  90. .mr2 {margin-right:2px !important;}
  91. .mr3 {margin-right:3px !important;}
  92. .mr4 {margin-right:4px !important;}
  93. .mr5 {margin-right:5px !important;}
  94. .mr6 {margin-right:6px !important;}
  95. .mr7 {margin-right:7px !important;}
  96. .mr8 {margin-right:8px !important;}
  97. .mr9 {margin-right:9px !important;}
  98. .mr10 {margin-right:10px !important;}
  99. .mr15 {margin-right:15px !important;}
  100. .mr20 {margin-right:20px !important;}
  101.  
  102. .pt0 {padding-top:0px !important;}
  103. .pt5 {padding-top:5px !important;}
  104. .pt10 {padding-top:10px !important;}
  105. .pt15 {padding-top:15px !important;}
  106. .pt20 {padding-top:20px !important;}
  107. .pt25 {padding-top:25px !important;}
  108. .pt30 {padding-top:30px !important;}
  109. .pt35 {padding-top:35px !important;}
  110. .pt40 {padding-top:40px !important;}
  111. .pt100 {padding-top:100px !important;}
  112.  
  113. .pb0 {padding-bottom:0px !important;}
  114. .pb5 {padding-bottom:5px !important;}
  115. .pb10 {padding-bottom:10px !important;}
  116. .pb15 {padding-bottom:15px !important;}
  117. .pb20 {padding-bottom:20px !important;}
  118. .pb25 {padding-bottom:25px !important;}
  119. .pb30 {padding-bottom:30px !important;}
  120. .pb35 {padding-bottom:35px !important;}
  121. .pb40 {padding-bottom:40px !important;}
  122. .pb45 {padding-bottom:45px !important;}
  123. .pb50 {padding-bottom:50px !important;}
  124.  
  125. .pl0 {padding-left:0 !important;}
  126. .pl5 {padding-left:5px !important;}
  127. .pl10 {padding-left:10px !important;}
  128. .pl15 {padding-left:15px !important;}
  129. .pl20 {padding-left:20px !important;}
  130. .pl25 {padding-left:25px !important;}
  131. .pl30 {padding-left:30px !important;}
  132. .pl35 {padding-left:35px !important;}
  133. .pl40 {padding-left:40px !important;}
  134. .pl45 {padding-left:45px !important;}
  135. .pl50 {padding-left:50px !important;}
  136.  
  137. .pr0 {padding-right:0 !important;}
  138. .pr5 {padding-right:5px !important;}
  139. .pr10 {padding-right:10px !important;}
  140. .pr15 {padding-right:15px !important;}
  141. .pr20 {padding-right:20px !important;}
  142. .pr25 {padding-right:25px !important;}
  143. .pr30 {padding-right:30px !important;}
  144. .pr35 {padding-right:35px !important;}
  145. .pr40 {padding-right:40px !important;}
  146. .pr45 {padding-right:45px !important;}
  147. .pr50 {padding-right:50px !important;}
  148.  
  149.  
  150. /*    visual
  151. ----------------------------------------------*/
  152. .pointer {cursor: pointer !important;}
  153.  
  154. /*    collum
  155. ----------------------------------------------*/
  156. .pane2 {width: 48% !important;}
  157. .pane3 {width: 32% !important;}
  158. .pane4 {width: 24% !important;}
  159.  
  160.  
  161. /*    position
  162. ----------------------------------------------*/
  163. .fl {float: left;}
  164. .fr {float: right;}
  165. .ft {
  166.     overflow: hidden;
  167.     zoom: 1;
  168. }
  169.  
  170. .vt {vertical-align: top !important;}
  171. .vm {vertical-align: middle !important;}
  172. .vb {vertical-align: bottom !important;}
  173.  
  174. .center {
  175.     margin-left: auto;
  176.     margin-right: auto;
  177.     text-align: center !important;
  178. }
  179. .center > *{
  180.     margin-left: auto;
  181.     margin-right: auto;
  182. }
  183. .right {text-align: right !important;}
  184. .right > *{
  185.     margin-left: auto;
  186.     margin-right: 0;
  187. }
  188. .left {text-align: left !important;}
  189. .left > *{
  190.     margin-left: 0;
  191.     margin-right: auto;
  192. }
  193. /* visual none */
  194. .none {
  195.     display: none !important;
  196. }
  197. .vnone {
  198.     visibility: hidden !important;
  199. }
  200. /* nobr */
  201. .nobr {
  202.     white-space: nowrap !important;
  203. }

コメントはまだありません »

コメントはまだありません。

この投稿へのコメントの RSS フィード。

コメントする