Skip to content

Instantly share code, notes, and snippets.

View atom-sync-settings.md

Atom の設定を sync-settings で共有します。

@maru0014
maru0014 / column.css
Created Nov 4, 2015
レスポンシブ対応等幅リストCSS
View column.css
@charset "utf-8";
/***********************************************************
レスポンシブ対応リストタグ等幅カラムスタイルシート
記述順:
スマートフォン
タブレット@media screen and (min-width: 641px)
PC@media screen and (min-width: 981px)
@maru0014
maru0014 / index.html
Created Oct 27, 2015
jQueryのloadメソッドでパーツを読み込み 1
View index.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
</head>
<body>
<div id="header">
タイトルロゴや画像<br>
グローバルメニューなど
</div>
@maru0014
maru0014 / index.html
Last active Oct 27, 2015
jQueryのloadメソッドでパーツを読み込み2
View index.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<!-- jquery読み込み Ver.1.8.3 -->
<script src="js/jquery.min.js"></script>
<script>
//共通パーツ読み込み
$(function() {
$("#header").load("header.html");
$("#side").load("side.html");
@maru0014
maru0014 / smoothscroll.js
Created Oct 19, 2015
コピペでOK スムーズスクロール
View smoothscroll.js
<!-- jQuery本体の読み込み -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- #リンクのスムーズスクロール -->
<script>
$(function(){
// #で始まるリンクをクリックしたら実行されます
$('a[href^=#]').click(function() {
// スクロールの速度
var speed = 400; // ミリ秒で記述
View ベンダープレフィックス付きcalc.css
li.3col {
width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
width : -webkit-calc(100% / 3) ;
width : calc(100% / 3) ;
}
View gist:0e60aa59ee823abfd6aa
<div class="loadingWrap">
<img src="img/now-loading.gif">
</div>
View gist:5b0b505c7cc067b75a7a
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>