ひろぽっぽれす » (X)HTML+CSS http://hiropo.co.uk Web系エンジニアの適当なブログです。どうでも酔いものばかり作ってます。 Sun, 25 Jul 2010 17:09:15 +0000 ja hourly 1 http://wordpress.org/?v=3.0 .haribote CSS画像置換 http://hiropo.co.uk/archives/201 http://hiropo.co.uk/archives/201#comments Thu, 13 Aug 2009 02:10:21 +0000 admin http://hiropo.co.uk/?p=201 CSSでの画像置換にはやり方がたくさんあるが、その中でもこの .haribote は最も強力な画像置換CSSと言えるだろう。
画像オフの場合でもテキストが表示され、ロールオーバーも実現出来、かつ、SEO対策もばっちりである。

text-indent: -9999em; や、spanでテキスト囲ってを visibility: hidden; にしたりといった従来のテキストを無理やり飛ばしたり隠したりするのではなく、テキストはそこに残したままなのである。
テキストの上に画像を被せることによって .haribote は画像置換を実現している。

#画像は200px×80pxで、上にロールオーバー前の画像、
#下にロールーオーバー後の画像を上下にくっつける形で用意する。

PLAIN TEXT
HTML:
  1. <div id="replace_img"><a href="#dummy" class="haribote">バナーボタン<span></span></a></div>

PLAIN TEXT
CSS:
  1. /*
  2. *    haribote
  3. */
  4. .haribote,
  5. .haribote span {
  6.     display: block;
  7.     overflow: hidden;
  8. }
  9. .haribote {
  10.     position: relative;
  11. }
  12. .haribote span {
  13.     position: absolute;
  14.     top: 0; left: 0;
  15.     cursor: pointer;
  16. }
  17.  
  18. /**/
  19. #replace_img a,
  20. #replace_img a span {
  21.     width: 200px;
  22.     height: 40px;
  23. }
  24. #replace_img a span {
  25.     background: url(replace_img.gif) no-repeat 0 0;
  26. }
  27. #replace_img a:hover span {
  28.     background-position: 0 -40px;
  29. }

ソースをみてもらえばわかるが、テキストの上に、positionで画像をのっけているだけの非常にシンプルな構造になっている。

個人的な見解ですが、今のところ .haribote を越えるCSS画像置換には未だ出会っていない。
他に素晴らしいソースがあればぜひ教えてくださいませ。

]]> http://hiropo.co.uk/archives/201/feed 0 モジュールCSS http://hiropo.co.uk/archives/199 http://hiropo.co.uk/archives/199#comments Tue, 11 Aug 2009 07:05:47 +0000 admin http://hiropo.co.uk/?p=199 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. }

]]> http://hiropo.co.uk/archives/199/feed 0 原付改造ブログ MovableType（MT）で構築 http://hiropo.co.uk/archives/129 http://hiropo.co.uk/archives/129#comments Tue, 03 Feb 2009 16:13:45 +0000 admin http://hiropo.co.uk/?p=129 こんぬつわ。久しぶりの更新です。

wordpress大好きな僕としては、個人的にMovableTypeとかアンチだったんですが、MTを組み込む仕事があったことをきっかけにMTにはまっちゃいました！

そこで、専門学校の時につくったサイトをMTに組み込んで再構築してみました。

当時、「原付改造日記」というものをフルスクラッチで作っていました。
（その頃、ブログはまだ一般的でなかったのです。）

MT組み込んだら更新もめちゃめちゃ簡単だし、もうラクっていうかなんていうか…。
今の世の中って凄いです。

]]> http://hiropo.co.uk/archives/129/feed 0 気になっちゃうシリーズ。 – youtube編 http://hiropo.co.uk/archives/55 http://hiropo.co.uk/archives/55#comments Wed, 10 Dec 2008 17:05:25 +0000 admin http://hiropo.co.uk/?p=55

↑の画像の「チャンネル登録」をクリックすると・・・、

はい崩れた！今クリックしたら崩れたよ！！

]]> http://hiropo.co.uk/archives/55/feed 0