Skip to content

Instantly share code, notes, and snippets.

Sasaki Toshiaki shirokuro331

Block or report user

Report or block shirokuro331

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@shirokuro331
shirokuro331 / stripe table
Last active Dec 10, 2015
しましまにしまっしま
View stripe table
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
@shirokuro331
shirokuro331 / gist:4345182
Created Dec 20, 2012
画像の幅と高さを取得する
View gist:4345182

画像の幅と高さを取得する

background プロパティで背景画像を指定した時、width と height の値が欲しい時もある。
そういうときに、いちいち画像のサイズを調べるのは面倒なので、下記のようにする。

background: url("../image/common/hoge.png") no-repeat 0 0;
width: image-width("../image/common/hoge.png");
height: image-height("../image/common/pagetop.png");

image-width, image-height で、自動的に画像のサイズを取得してくれる。

@shirokuro331
shirokuro331 / gist:4224692
Created Dec 6, 2012
Sprite について(dimention編)
View gist:4224692

続・Sprite について

一つ前の Gist でSprite について触れたが、あれだけだと単に画像をひとまとめにして、それぞれのセレクタを作ってくれるだけ。

width や height の値も入るようにしよう。

@import "my-icons/*.png";
@include all-my-icons-sprites($dimensions:true);

上記のように ($dimentions:true) と付け足すだけで

@shirokuro331
shirokuro331 / gist:4158227
Created Nov 28, 2012
Sprite について
View gist:4158227

Sprite について

Sprite しよう。
アイコンとかボタンとかを Photoshop とかでひとつの画像にしなくても、Compass がやってくれる。
さらに background プロパティも自動で書いてくれる。

CSS Sprite Generator みたいなことを Comapss がやってくれるのでとても楽。

公式サイトの Spriting with Compass を見てみると、その手順が書いてある。

@shirokuro331
shirokuro331 / gist:4142921
Created Nov 25, 2012
Compass の書き方について
View gist:4142921

Compass の書き方について

では実際にどのように使うのか。 公式サイトの Reference を見てみると

This file can be imported using: @import "compass"

と書いてある。

なので、sass/screen.scss に

@shirokuro331
shirokuro331 / gist:4128654
Created Nov 22, 2012
config.rb について
View gist:4128654

config.rb について

config.rb を編集しよう。
config.rb をエディタで開いてみると

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
View gist:4122358

watch について

scss ファイルを編集したら自動でコンパイルしてくれる便利なやつ。

単体のファイルをコンパイルするだけなら

$ compass compile sass/screen.scss

で、css フォルダへコンパイルした screen.css ができあがる。
でもいちいちそんな面倒なことはしたくないし、たぶん誰もしないと思う。
scss ファイル編集したら自動でコンパイル(監視)してくれるコマンドは下記。

@shirokuro331
shirokuro331 / gist:4117971
Created Nov 20, 2012
compass コトハジメ
View gist:4117971

俺、もう1回 compass と向き合ってみるんだ...!
だって sprite とか便利そうだから。

Compass

インストール

公式サイトの Install ページを見るとインストール手順が書いてある。

コマンドラインから compass 使うには Ruby もインストールする必要がある。 Mac は最初から Ruby が入ってるので、インストールする必要ない。

@shirokuro331
shirokuro331 / hoge.markdown
Created Nov 20, 2012 — forked from taizooo/hoge.markdown
gist で markdown 記法がつかえる。
View hoge.markdown

#なんだかんだ

##えーと1 どういうこういう そういうどういう

##えーと2 どういうこういう そういうどういう

@shirokuro331
shirokuro331 / gist:2250996
Created Mar 30, 2012
スクロールしてもついてくるメニュー
View gist:2250996
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
floatBox("#fixedArea", 1);
function floatBox(ele, flag) {
var box = $(ele);
var fixed_box_offset = box.offset();
var box_size = {"width": box.width(), "height": box.height()};
var footer_box_offset = $("#footer").offset();
$(window).scroll(function() {
You can’t perform that action at this time.