Skip to content

Instantly share code, notes, and snippets.

Sasaki Toshiaki shirokuro331

View GitHub Profile
@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() {
@shirokuro331
shirokuro331 / hoge.markdown
Created Nov 20, 2012 — forked from taizooo/hoge.markdown
gist で markdown 記法がつかえる。
View hoge.markdown

#なんだかんだ

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

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

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

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

Compass

インストール

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

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

View gist:4122358

watch について

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

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

$ compass compile sass/screen.scss

で、css フォルダへコンパイルした screen.css ができあがる。
でもいちいちそんな面倒なことはしたくないし、たぶん誰もしないと思う。
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"
@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:4158227
Created Nov 28, 2012
Sprite について
View gist:4158227

Sprite について

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

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

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

@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: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 / 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>
You can’t perform that action at this time.