戻る

セミカスタマイズ (CSS)

次へ 
<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset="UTF-8">
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style>
body{
	background:#dbe8f6 url("jqm1/images/background.png") no-repeat;
}
</style>
</head>
<body>
	<div data-role="page" id="index" data-theme="f">
		<div data-role="header" data-theme="n">
			<p>Webマーケティング、トレンドなど最新情報が満載</p>
			<h1><img src="jqm1/images/logo.png" alt="WEB NEWS Professional" widt="212" height="21"></h1>
		</div>
		<div data-role="content">
			<div class="menu">
				<div data-role="controlgroup" data-type="horizontal" class="ui-shadow">
					<a href="list.html" data-role="button">TOP</a>
					<a href="list.html" data-role="button">TECH</a>
					<a href="list.html" data-role="button">WEB</a>
					<a href="list.html" data-role="button">MAC</a>
				</div>
			</div>
			<div class="category">
				<h2 class="h2">NEWS Category</h2>
				<ul data-role="listview" class="ui-grid-a ui-shadow">
					<li class="ui-block-a" data-theme="g" data-icon="false"><a href="list.html"><img src="jqm1/images/icon-web.png" alt="" class="ui-li-icon">Webトレンド</a></li>
					<li class="ui-block-b" data-theme="g" data-icon="false"><a href="list.html"><img src="jqm1/images/icon-html5.png" alt="" class="ui-li-icon">HTML5</a></li>
					<li class="ui-block-a" data-theme="g" data-icon="false"><a href="list.html"><img src="jqm1/images/icon-design.png" alt="" class="ui-li-icon">デザイン</a></li>
					<li class="ui-block-b" data-theme="g" data-icon="false"><a href="list.html"><img src="jqm1/images/icon-epub.png" alt="" class="ui-li-icon">電子書籍</a></li>
					<li class="ui-block-a" data-theme="g" data-icon="false"><a href="list.html"><img src="jqm1/images/icon-smartphone.png" alt="" class="ui-li-icon">スマートフォン</a></li>
					<li class="ui-block-b" data-theme="g" data-icon="false"><a href="list.html"><img src="jqm1/images/icon-markething.png" alt="" class="ui-li-icon">マーケティング</a></li>
				</ul>
			</div>
			<div class="newsNavi" id="newsNavi">
				<div data-role="navbar" class="navbar">
					<ul>
						<li><a href="#news" rel="external" class="selected">新着記事</a></li>
						<li><a href="#trend" rel="external">業界動向</a></li>
						<li><a href="#series" rel="external">連載記事</a></li>
						<li><a href="#topics" rel="external">注目記事</a></li>
					</ul>
				</div>
			</div>
			<div class="newsList" id="newsList">
				<ul id="news" data-role="listview" class="ui-shadow">
					<li data-theme="g"><a href="detail.html">お祭り騒ぎで終わらないためのスマホ対策</a></li>
					<li data-theme="g"><a href="detail.html">HTML5のアウトラインとセクションを理解する</a></li>
					<li data-theme="g"><a href="detail.html">jQuery MobileのCSSを変更してテーマをカスタマイズ</a></li>
					<li data-theme="g"><a href="detail.html">Capture APIでiPhone用ビデオレコーダーを作ろう</a></li>
					<li data-theme="g"><a href="detail.html">クリック課金のGoogleが「パンダ」を採用する理由</a></li>
				</ul>
				<ul id="trend" data-role="listview" class="ui-shadow">
					<li data-theme="g"><a href="detail.html">ad:tech tokyo 2011でルグランが無料セミナー</a></li>
					<li data-theme="g"><a href="detail.html">クリック課金のGoogleが「パンダ」を採用する理由</a></li>
					<li data-theme="g"><a href="detail.html">お祭り騒ぎで終わらないためのスマホ対応とは？</a></li>
					<li data-theme="g"><a href="detail.html">コンバージョン改善はライティングスキルが鍵</a></li>
					<li data-theme="g"><a href="detail.html">Facebookの「いいね！」で売上は増えるのか？</a></li>
				</ul>
				<ul id="series" data-role="listview" class="ui-shadow">
					<li data-theme="g"><a href="detail.html">西畑一馬のjQuery Mobileデザイン入門</a></li>
					<li data-theme="g"><a href="detail.html">浜 俊太朗のHTML5マークアップ移行ガイド</a></li>
					<li data-theme="g"><a href="detail.html">古籏一浩のJavaScriptラボ</a></li>
					<li data-theme="g"><a href="detail.html">実録！HTML5でモバイルWebアプリ開発</a></li>
					<li data-theme="g"><a href="detail.html">清水 誠の「その指標がデザインを決める」</a></li>
				</ul>
				<ul id="topics" data-role="listview" class="ui-shadow">
					<li data-theme="g"><a href="detail.html">「みんビズ」にかけるGoogleの思惑</a></li>
					<li data-theme="g"><a href="detail.html">アマゾン、佐賀県鳥栖市に物流センターを開設 </a></li>
					<li data-theme="g"><a href="detail.html">「いいね」を押したことがある人、ネット利用者の3割</a></li>
					<li data-theme="g"><a href="detail.html">マガシーク、雑誌「CanCam」連動の雑貨通販を企画</a></li>
					<li data-theme="g"><a href="detail.html">SBRなど3社、「Googleショッピング商品掲載」開始</a></li>
				</ul>
			</div>
		</div>
		<div data-role="footer" data-theme="n">
			© 2011 ASCII MEDIA WORKS All right reserved.
		</div>
	</div>
</body>
</html>
inserted by FC2 system