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 / 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 / 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:4515767
Last active Dec 11, 2015
忘れやすいので。
View gist:4515767

Emmet の書き方メモ

h2{menu}+ul>li*10>a[href="#"]{menu$}

上記をCtrl + E で展開すると

<h2>menu</h2>
<ul>
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu2</a></li>
You can’t perform that action at this time.