takunagai/index.html

## index.html
<!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>
  <h1>CSS3 linear-gradient で斜めストライプの背景</h1>

  <h2>サンプル</h2>
  <h3 class="hoge">
    (h3.hoge)斜めストライプの背景のサンプル見出し
  </h3>


  <h2>メモ</h2>
  <ul>
    <li>IE10以上対応 <a href="http://caniuse.com/#search=linear-gradient">CSS Gradients - Can I use...</a></li>
    <li>IE8/9対応するのにCSS3Pie使うことにした（<a href="http://stackoverflow.com/questions/4961651/does-ie9-support-css-linear-gradients">SVGを使う方法</a>もあるらしいが未検証）</li>
    <li>一応 -webkit- 付けといた方が良さそう</li>
    <li>background-size は 偶数値に。奇数値だとずれる</li>
  </ul>


  <h2>バリエーション</h2>
  角度変えたり、サイズ変えたり、格子にしたり

  <h2>参考にした記事</h2>
  <ul>
    <li><a href="http://www.nxworld.net/tips/15-smartphone-css-tips.html">スマートフォンサイト制作時に覚えておきたいCSS - NxWorld</a></li>
  </ul>

  <!-- IE9以下対応 -->
  <!--[if IE 9]><script src="http://cdnjs.cloudflare.com/ajax/libs/css3pie/2.0beta1/PIE_IE9_uncompressed.js"></script><![endif]-->
  <!--[if lt IE 9]><script src="http://cdnjs.cloudflare.com/ajax/libs/css3pie/2.0beta1/PIE_IE678_uncompressed.js"></script><![endif]-->
  <script>
  $(function() {
    if (window.PIE) {
      $('.box').each(function() {//適用する要素を指定
        PIE.attach(this);
      });
    }
  });
  </script>
</body>
</html>

## style.css
body {padding: 20px;}
.hoge {
	background-color: #E7E7E7;/* ベース色、グラデーションの透過部分で見える */
	background-image: -webkit-linear-gradient(45deg,#CCC 25%,/* autoprefixer使うなら不要 */
	                transparent 25%,transparent 50%,#CCC 50%,
	                                                #CCC 75%,transparent 75%,transparent);
	background-image:         linear-gradient(45deg,#CCC 25%,
	                transparent 25%,transparent 50%,#CCC 50%,
	                                                #CCC 75%,transparent 75%,transparent);
	background-size: 10px 10px;
	/* 以下、その他の装飾 */
	padding: 3px 10px;
	color: #333;
	box-shadow: 1px 1px 0 #999;
	text-shadow: 1px 1px 0px white;
}
	<!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>
	<h1>CSS3 linear-gradient で斜めストライプの背景</h1>

	<h2>サンプル</h2>
	<h3 class="hoge">
	(h3.hoge)斜めストライプの背景のサンプル見出し
	</h3>


	<h2>メモ</h2>
	<ul>
	<li>IE10以上対応 <a href="http://caniuse.com/#search=linear-gradient">CSS Gradients - Can I use...</a></li>
	<li>IE8/9対応するのにCSS3Pie使うことにした（<a href="http://stackoverflow.com/questions/4961651/does-ie9-support-css-linear-gradients">SVGを使う方法</a>もあるらしいが未検証）</li>
	<li>一応 -webkit- 付けといた方が良さそう</li>
	<li>background-size は偶数値に。奇数値だとずれる</li>
	</ul>


	<h2>バリエーション</h2>
	角度変えたり、サイズ変えたり、格子にしたり

	<h2>参考にした記事</h2>
	<ul>
	<li><a href="http://www.nxworld.net/tips/15-smartphone-css-tips.html">スマートフォンサイト制作時に覚えておきたいCSS - NxWorld</a></li>
	</ul>

	<!-- IE9以下対応 -->
	<!--[if IE 9]><script src="http://cdnjs.cloudflare.com/ajax/libs/css3pie/2.0beta1/PIE_IE9_uncompressed.js"></script><![endif]-->
	<!--[if lt IE 9]><script src="http://cdnjs.cloudflare.com/ajax/libs/css3pie/2.0beta1/PIE_IE678_uncompressed.js"></script><![endif]-->
	<script>
	$(function() {
	if (window.PIE) {
	$('.box').each(function() {//適用する要素を指定
	PIE.attach(this);
	});
	}
	});
	</script>
	</body>
	</html>
	body {padding: 20px;}
	.hoge {
	background-color: #E7E7E7;/* ベース色、グラデーションの透過部分で見える */
	background-image: -webkit-linear-gradient(45deg,#CCC 25%,/* autoprefixer使うなら不要 */
	transparent 25%,transparent 50%,#CCC 50%,
	#CCC 75%,transparent 75%,transparent);
	background-image: linear-gradient(45deg,#CCC 25%,
	transparent 25%,transparent 50%,#CCC 50%,
	#CCC 75%,transparent 75%,transparent);
	background-size: 10px 10px;
	/* 以下、その他の装飾 */
	padding: 3px 10px;
	color: #333;
	box-shadow: 1px 1px 0 #999;
	text-shadow: 1px 1px 0px white;
	}