Skip to content

Instantly share code, notes, and snippets.

@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");
View atom-sync-settings.md

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

@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) ;
}
@maru0014
maru0014 / Android標準ブラウザでも背景画像が表示される(幅100%指定).css
Last active Oct 13, 2015
Android標準ブラウザでも背景画像が表示される(幅100%指定)
View Android標準ブラウザでも背景画像が表示される(幅100%指定).css
//Android標準ブラウザでも背景画像が表示される(幅100%指定)
h2 {
background: url(image.jpg);
background-size: 100% 40px;
-webkit-background-size: 100% 40px; /* Safari,Google Chrome用 */
-moz-background-size: 100% 40px; /* Firefox用 */
-o-background-size: 100% 40px; /* Opera用 */
}
@maru0014
maru0014 / Android標準ブラウザでも背景画像が表示される.css
Last active Oct 13, 2015
Android標準ブラウザでも背景画像が表示される
View Android標準ブラウザでも背景画像が表示される.css
//Android標準ブラウザでも背景画像が表示される
h2 {
background: url(image.jpg) repeat-x;
background-size: 1px 40px;
-webkit-background-size: 1px 40px; /* Safari,Google Chrome用 */
-moz-background-size: 1px 40px; /* Firefox用 */
-o-background-size: 1px 40px; /* Opera用 */
}