View column.css
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
@charset "utf-8"; | |
/*********************************************************** | |
レスポンシブ対応リストタグ等幅カラムスタイルシート | |
記述順: | |
スマートフォン | |
↓ | |
タブレット@media screen and (min-width: 641px) | |
↓ | |
PC@media screen and (min-width: 981px) |
View index.html
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 lang="ja"> | |
<head> | |
</head> | |
<body> | |
<div id="header"> | |
タイトルロゴや画像<br> | |
グローバルメニューなど | |
</div> | |
View index.html
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 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 smoothscroll.js
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
<!-- 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
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
li.3col { | |
width : 33.33333% ; /* 未対応ブラウザ用フォールバック */ | |
width : -webkit-calc(100% / 3) ; | |
width : calc(100% / 3) ; | |
} |
View 列を三等分calcファンクション.css
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
li.3col { | |
width : calc(100% / 3) ; | |
} |
View 列を三等分.css
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
li.3col { | |
width : 33.33333% ; | |
} |
View Android標準ブラウザでも背景画像が表示される(幅100%指定).css
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
//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用 */ | |
} |
View Android標準ブラウザでも背景画像が表示される.css
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
//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用 */ | |
} |
NewerOlder