- 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
- https://
- @nagai_shouten
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Use Gists to store code you would like to remember later on | |
console.log(window); // log the "window" object to the console |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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の?以降を格納 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* ゼロパディング | |
* | |
* @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';}//作業用に必要な個数分のゼロを付け足す(文字列型) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 三桁区切りでカンマを付加 | |
* | |
* @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, '');//カンマがあれば除去 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* カンマを削除 | |
* | |
* @param {String or Number} 整形したいカンマ付き数字(=文字列)。小数点ありもOK。数値ならそのまま返す | |
* https://gist.github.com/oreo3/571c4974974801011602 | |
*/ | |
var removeComma = function(num) { | |
if (typeof num === 'string'){ | |
return (num.replace(/,/g, '')); | |
} |
OlderNewer