57. 知っていると便利かもしれない Web制作のアレコレ
Compass Sprite Tips
sprite-sa408f7de4a.pngの英数字を消したい
on_stylesheet_saved do |filename|
if File.exists?(filename)
css = File.read filename
File.open(filename, 'w+') do |f|
f << css.gsub(%r{-s[a-z0-9]{10}¥.png},
'.png')
end CompassでCSSスプライトを生成した際
のファイル名を変更する方法
end http://stackstock.net/archives/2008/
end
Creators MeetUp vol.01
58. 知っていると便利かもしれない Web制作のアレコレ
Compass Sprite Tips
sprite-sa408f7de4a.pngの英数字を消したい
on_stylesheet_saved do |filename|
if File.exists?(filename)
css = File.read filename
config.rbに記述
File.open(filename, 'w+') do |f|
f << css.gsub(%r{-s[a-z0-9]{10}¥.png},
'.png')
end
end
end
Creators MeetUp vol.01
62. 横幅のサイズや
数が不規則
Donec ornare
massa ac orci
sodales sodales.
Donec ornare
massa ac orci
sodales sodales.
垂直中央にしたい
Donec ornare
massa ac orci
sodales sodales.
63. 横幅のサイズや
数が不規則
Donec ornare
massa ac orci
floatでは調整が難しい
sodales sodales.
Donec ornare
massa ac orci
sodales sodales.
垂直中央にしたい
Donec ornare
massa ac orci
sodales sodales.
69. 知っていると便利かもしれない Web制作のアレコレ
サムネイルとテキストの中央揃え
Donec ornare
massa ac orci
sodales sodales.
幅固定
Donec ornare
massa ac orci
sodales sodales.
Donec ornare
massa ac orci
sodales sodales.
Creators MeetUp vol.01
70. 知っていると便利かもしれない Web制作のアレコレ
サムネイルとテキストの中央揃え
Donec ornare
massa ac orci
sodales sodales.
幅可変
Donec ornare
massa ac orci
sodales sodales.
Donec ornare
massa ac orci
sodales sodales.
Creators MeetUp vol.01
72. 知っていると便利かもしれない Web制作のアレコレ
サムネイルとテキストの中央揃え
CSS
.list ul li{
display:table;
width:100%;
}
.list ul li .img{
width:100px;
}
.list ul li .img,
.list ul li .txt{
display:table-cell;
vertical-align:middle;
}
Creators MeetUp vol.01
73. 知っていると便利かもしれない Web制作のアレコレ
サムネイルとテキストの中央揃え
HTML CSS
.list ul li{
<div class=“list”>
display:table;
<ul>
width:100%;
<li>
}
<div class=“img”><img
.list ul li .img{
src=“hoge.jpg”></div>
width:100px;
<div
}
class=“txt”>hogehoge</div
.list ul li .img,
>
.list ul li .txt{
</li>
display:table-cell;
</ul>
vertical-align:middle;
</div>
}
Creators MeetUp vol.01