Skip to content

Instantly share code, notes, and snippets.

View takunagai's full-sized avatar

nagataku takunagai

10 followers · 8 following
View GitHub Profile
@takunagai
takunagai / _retina.scss
Last active December 14, 2015 22:19
高解像度(Retina)対応 背景画像 SCSS Mixin
// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
//画像名とサイズを指定すると、高解像度ようのメディアクエリーを作成、倍の解像度の画像を表示してくれるミックスイン
//retinajs.com で紹介されているが、ratina.jsとは関係ない
@mixin at2x($image_name, $w: auto, $h: auto, $extention: '.png') {
background-image: image_url($image_name + $extention);
$x2img : $image_name + '@2x' + $extention;
@media all and (-webkit-min-device-pixel-ratio : 1.5) {
background-image: url($x2img);
background-size: $w $h;
}
@takunagai
takunagai / Flexible-Responsive-Grid-Block-Rayout-(3-4-5-column,-IE7-8-ok).markdown
Last active December 22, 2015 05:09
A Pen by Oreo3.

Flexible Responsive Grid Block Rayout (3/4/5 column, IE7/8 ok)

  • Break point : 480px
  • Modern Browser & IE7/8 O.K. (Use selectivizr 1.0.3)
  • 3,4,5 column
  • You can use list tags instead of div tags

A Pen by Oreo3 on CodePen.

License.

@takunagai
takunagai / index.html
Last active August 29, 2015 14:02
CSS3 linear-gradient で斜めストライプの背景
<!DOCTYPE html>
<html>
<head>
<title>CSS3 linear-gradient で斜めストライプの背景</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
</head>
<body>
@takunagai
takunagai / 0_reuse_code.js
Last active August 29, 2015 14:02
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
@takunagai
takunagai / main.js
Last active August 29, 2015 14:02
ページ内スムーススクロール & ページ上部へ戻るボタン（要jQuery）
$(function() {
/**
* ページ内スムーススクロール
* https://gist.github.com/takunagai/457302aaa44421bbc958
* サンプル：http://codepen.io/oreo3/pen/JjHDz
*/
$('a[href^="#"], area[href^="#"], a[href=""], area[href=""]').on('click', function(e) {
var href= $(this).attr('href');
var target = $(href === '#top' || href === '#' || href === '' ? 'html' : href);
var isSafari = /Safari/.test(navigator.userAgent);
@takunagai
takunagai / main.js
Last active August 29, 2015 14:02
IE8以前で forEach が使えるようにする
/**
* forEachをサポートしていないIE8以前で forEach が使えるようにする
*
* Production steps of ECMA-262, Edition 5, 15.4.4.18
* Reference: http://es5.github.com/#x15.4.4.18
* https://developer.mozilla.org/ja/docs/JavaScript/Reference/Global_Objects/Array/forEach
* https://gist.github.com/oreo3/76595108a85ae4d6883a
*/
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(callback, thisArg) {
@takunagai
takunagai / main.js
Last active August 29, 2015 14:02
URLからクエリを取得し、オブジェクトに格納
/**
* URLからクエリを取得し、オブジェクトに格納
*
* @param {String} url クエリ付きのURL
* @param {Boolian} setEmptyKeys 空のパラメーターを表示するか(省略でfalse)
* https://gist.github.com/oreo3/76595108a85ae4d6883a
*/
var urlQueryToHash = function (url,setEmptyKeys) {
var paramsHash = {};//データを格納するハッシュ
var queryString = url.replace(/^[^\?]+\??/, '');//URLの?以降を格納
@takunagai
takunagai / main.js
Last active August 29, 2015 14:02
ゼロパディング
/**
* ゼロパディング
*
* @param {number} num 加工したい数値
* @param {number} digit 加工後の桁数
* https://gist.github.com/oreo3/2dddf5d4e5246c31062b/edit
*/
var zeroPadding = function (num, digit) {//引数："整形したい数字, 表示したい桁数"
var zeros = '';
for(var i=digit ; i>0 ; i--){ zeros += '0';}//作業用に必要な個数分のゼロを付け足す（文字列型）
@takunagai
takunagai / main.js
Last active August 29, 2015 14:02
三桁区切りでカンマを付加
/**
* 三桁区切りでカンマを付加
*
* @param {Number or String} 整形したい数値。小数点あり、文字列でもOK
* https://gist.github.com/oreo3/055505b354120939fa4b
*/
var addFigure = function (num) {
num = num + '';//文字列に型変換
if (num.length >= 4){
num = num.replace(/,/g, '');//カンマがあれば除去
@takunagai
takunagai / main.js
Last active August 29, 2015 14:02
カンマを削除
/**
* カンマを削除
*
* @param {String or Number} 整形したいカンマ付き数字(=文字列)。小数点ありもOK。数値ならそのまま返す
* https://gist.github.com/oreo3/571c4974974801011602
*/
var removeComma = function(num) {
if (typeof num === 'string'){
return (num.replace(/,/g, ''));
}