ラベル 雛形 の投稿を表示しています。 すべての投稿を表示
ラベル 雛形 の投稿を表示しています。 すべての投稿を表示

2012年6月25日月曜日

html5の雛形（改版）

html5を意識したhtmlファイルを書くときに便利になるかと思います。
よろしければコピペしてお使いください＾＾

次はリセットcssかな


<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <title>HTML 5</title>
 <!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

 <style>
   article, aside, dialog, figure, footer, header,
   hgroup, menu, nav, section { display: block; }
 </style>
</head>
<body>
<!--ヘッダ-->
<header>
 <a href="#">html5ヘッダ</a>
</header>
<!--ナビ-->
<nav>
 <ul>
 <li><a href="#">html5ヘッダ</a></li>
 <li><a href="#">html5ヘッダ</a></li>
 </ul>
</nav>
<!--メイン-->
<section>
 <article>
  <h1>Article1</h1>
  <p>html5Body</p>
 </article>

  <article>
  <h1>Article1</h1>
  <p>html5Body</p>
 </article>
</section>
<!--フッタ-->
<footer>
 <a href="#">html5フッタ</a>
</footer>
</body>
</html>
投稿者 時刻: 0 件のコメント:
ラベル: ,

2012年5月29日火曜日

jQuery Mobileでページを書くときの雛形

雛形シリーズ第三弾「jQuery Mobile」

<!DOCTYPE html> 
<html> 
<head> 
<title>PageTitle</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

<div data-role="header">
<h1>Title</h1>
</div>

<div data-role="content"> 
<p>Hello world</p>  
</div>
</div>

</body>
</html>
投稿者 時刻: 0 件のコメント:
ラベル: , , ,

html5で書くときの雛形 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<p>Bodyだぜー</p>
</body>
</html>
投稿者 時刻: 2 件のコメント:
ラベル: ,

JQueryを使ったページを書くときの雛形

よく使うのでメモ

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
<script>
$(document).ready(function() {
 $('#test a').click(function(){
  $(this).text('hello');
 });
});
</script>
<div id="test"><a href="#">クリックして！</a></div>
</body>

</html>
投稿者 時刻: 0 件のコメント:
ラベル: , ,
登録: 投稿 (Atom)