marumo maru0014

## column.css
@charset "utf-8";

/***********************************************************
  レスポンシブ対応リストタグ等幅カラムスタイルシート
  記述順：
  スマートフォン
  ↓
  タブレット@media screen and (min-width: 641px)
  ↓
  PC@media screen and (min-width: 981px)

## index.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
</head>
<body>
   <div id="header">
     タイトルロゴや画像<br>
     グローバルメニューなど
   </div>


## 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");

## atom-sync-settings.md

      
              7 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                maru0014
                / atom-sync-settings.md
            
            
              Last active
              July 12, 2017 01:27
            
              
                automatic update by http://atom.io/packages/sync-settings
              
          
      View atom-sync-settings.md
  
      
    Atom の設定を sync-settings で共有します。

  
## 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; // ミリ秒で記述

## ベンダープレフィックス付きcalc.css
li.3col {
  width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
  width : -webkit-calc(100% / 3) ;
  width : calc(100% / 3) ;
}

## 列を三等分calcファンクション.css
li.3col {
  width : calc(100% / 3) ;
}

## 列を三等分.css
li.3col {
width : 33.33333% ;
}

## 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用 */
}

## 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用 */
}
	@charset "utf-8";

	/***********************************************************
	レスポンシブ対応リストタグ等幅カラムスタイルシート
	記述順：
	スマートフォン
	↓
	タブレット@media screen and (min-width: 641px)
	↓
	PC@media screen and (min-width: 981px)
	<!DOCTYPE HTML>
	<html lang="ja">
	<head>
	</head>
	<body>
	<div id="header">
	タイトルロゴや画像<br>
	グローバルメニューなど
	</div>
	<!-- 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; // ミリ秒で記述
	li.3col {
	width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
	width : -webkit-calc(100% / 3) ;
	width : calc(100% / 3) ;
	}
	//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用 */
	}
	//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用 */
	}