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: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:6199320
Created Aug 10, 2013
Sublime Text 2 に入れたPackage
View gist:6199320
  • AutoFileName
  • ConvertToUTF8
  • emmet
  • Goto CSS Declaration
  • Image2Base64
  • LESS
  • SASS
  • SCSS
  • LiveReload
  • Markdown Preview
@shirokuro331
shirokuro331 / gist:6199243
Created Aug 10, 2013
MacBookAir買った時に入れたソフト
View gist:6199243
  • Google Chrome

  • Google Chrome canary

  • Firefox

  • evernote

  • Dropbox

  • Sublime Text 2

  • Google 日本語入力

View Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
watch:{
sassmin:{
files: 'src/scss/*.scss',
tasks: ['compass','cssmin']
},
js:{
files: 'src/js/*.js',
@shirokuro331
shirokuro331 / gist:5698477
Last active Dec 18, 2015
Retina 対応 mixin
View gist:5698477
$spriteName: sprite-map("folder/*.png", $spacing: 5px);
@mixin sprite-hoge($name){
background-image: $spriteName;
background-repeat: no-repeat;
width: image-width(sprite-file($spriteName, $name)) / 2;
height: image-height(sprite-file($spriteName, $name)) / 2;
$ypos: round(nth(sprite-position($spriteName, $name), 2) / 2);
background-position: 0 $ypos;
background-size: round(image-width(sprite-path($spriteName)) / 2) round(image-height(sprite-path($spriteName)) / 2);
@shirokuro331
shirokuro331 / gist:5135506
Last active Dec 14, 2015
jekyll の導入手順(jekyll Bootstrap)
View gist:5135506

jekyll インストール

terminal.app を起動し、下記コマンドを入力。

$ gem install jekyll

※ Ruby 1.9.1 が必要っぽい
Install

jekyll bootstrap のファイルをローカルにクローンする。

View Grantfile.js
module.exports = function(grunt) {
grunt.initConfig({
sass: {
dist: {
files: {
'css/style.css': // コンパイル後のフォルダとファイル
[
'_scss/*.scss' // 元ファイル
]
View Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
imagemin: { // Task
dist: { // Target
options: { // Target options
optimizationLevel: 3
},
files: { // Dictionary of files
'dist/': 'src/*.png' // dist is output directory name. src directory png file are optimization
@shirokuro331
shirokuro331 / gist:4702149
Last active Dec 12, 2015
GitHubのメモ
View gist:4702149

GitHubのメモ

### GitHub のファイルを取ってくる

$ git clone https://hogehoge.git

### GitHub のリポジトリにファイルをアップする

  1. GitHub でリポジトリを作る
  2. ローカルの適当なところでフォルダをつくる
@shirokuro331
shirokuro331 / gist:4648973
Last active Dec 11, 2015
Sass の placeholder について
View gist:4648973

placeholder について

Sass 3.2 になってからの新機能らしい。
簡単に言うと css ファイルに書きだされない extend って感じ。

書き方は下記。
valiables は『$』だけど、placeholder は『%』を頭につける。

%redtext-redbackground{
    background: #f00;
You can’t perform that action at this time.