セッション処理の応用02





☆★データーでの確認★☆

カートに入れる仕組みを作る(セッション版)


カートに入れる仕組みを作る(セッション版)


  • 1-2.php と 1-2_02.php は、セッション機能を使ってショッピングカートの基本的な処理を行う例。
  • 1-2.php の画面で「カートに入れる」のリンクをクリックすると、その行の商品IDがGETで自分自身に送られる。1-2.php はそのデータを受け取り、現在のセッション変数のデータを取り出した後、今回選択された商品IDをカンマ区切りで追加して、再度同じ変数に保存する。

    一方、「カートの中身を見る」のリンクをクリックすると 1-2_02.php の画面へページ移動する。

    この PHP ファイルでは、カート情報の入ったセッション変数の内容を読み込み、商品データの配列を参照しながら、カートの内容を一覧表示する。


【 書式 】

PHPスクリプト

<?php
	if (isset($_GET[id])) {
		// データが渡されたとき
		
		// セッションを開始
		session_start();
		
		if ($_GET[id] == 0) {
			// id=0 が渡されたときはカートをクリア
			unset($_SESSION[sescart]);
		
		} else {
			// id=0 以外はカートに入れる
			if (! session_is_registered("sescart")) {
				// セッション変数が未定義なら新規に登録
				session_register("sescart");
			}
			
			// 現在のカートデータに今回の商品IDをカンマ区切りで追加
			$cart .= (strlen($cart) == 0 ? "" : ",") . $_GET[id];
			// セッション変数にデータを代入して保存
			$_SESSION[sescart] = $cart;
		}
	}
?>

<?php
			// 追加したデータを表示
			print "今回カートに入れた商品IDは" . $_GET[id] . "<br><br>";
?>


ソースコード


ソースコード【 HTML 】

[1-2.php]

<?php
	if (isset($_GET[id])) {
		// データが渡されたとき
		
		// セッションを開始
		session_start();
		
		if ($_GET[id] == 0) {
			// id=0 が渡されたときはカートをクリア
			unset($_SESSION[sescart]);
		
		} else {
			// id=0 以外はカートに入れる
			if (! session_is_registered("sescart")) {
				// セッション変数が未定義なら新規に登録
				session_register("sescart");
			}
			
			// 現在のカートデータに今回の商品IDをカンマ区切りで追加
			$cart .= (strlen($cart) == 0 ? "" : ",") . $_GET[id];
			// セッション変数にデータを代入して保存
			$_SESSION[sescart] = $cart;
		}
	}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>webサイト開発 | PHPサンプルサイト</title>
<link href="../css/reset.css" rel="stylesheet" type="text/css" media="screen">

  <!-- CSS for slidesjs.com example -->
  <link rel="stylesheet" href="../css/example.css">
  <link rel="stylesheet" href="../css/font-awesome.min.css">
  <!-- End CSS for slidesjs.com example -->

	<link rel="stylesheet" href="../css/embet.css">

<link href="../css/common.css" rel="stylesheet" type="text/css" media="screen">
<link href="../css/page.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				//******************************************
				//クリックによる開閉
				//******************************************
				//基本的に、ページ内のどこをクリックしても全てのサブメニューを閉じるようにしておく。
				$(document).click(function() { $('#main_menu > li > ul').slideUp() });

				$('#main_menu > li').click(function(ev){
					var sub = $(this).children('ul');
					if ($(sub).is(':hidden')) {
						//今回は、これからサブメニューを開きたい項目をクリックしているので、
						//上記の、全てのサブメニューを閉じるイベントを発火させてはならない。
						//よって、イベントのバブリングを中止する。
						ev.stopPropagation();

						//他に開いているサブメニューを閉じる。
						//開いたままでもよければ、下の1行は必要ない。
						$('#main_menu > li > ul:visible').slideUp();
						$(sub).slideDown();
					}
				});

				//クリックによる開閉の場合、親メニューの"a"要素の機能は必要ないので無効にする。
				$('#main_menu > li > a').click(function(ev) { ev.preventDefault() });
				
			});
		</script>

		<script type="text/javascript">
			jQuery(document).ready(function($) {
				//******************************************
				//クリックによる開閉
				//******************************************
				//基本的に、ページ内のどこをクリックしても全てのサブメニューを閉じるようにしておく。
				$(document).click(function() { $('#main_menu > li > ul').slideUp() });

				$('#main_menu > li').click(function(ev){
					var sub = $(this).children('ul');
					if ($(sub).is(':hidden')) {
						//今回は、これからサブメニューを開きたい項目をクリックしているので、
						//上記の、全てのサブメニューを閉じるイベントを発火させてはならない。
						//よって、イベントのバブリングを中止する。
						ev.stopPropagation();

						//他に開いているサブメニューを閉じる。
						//開いたままでもよければ、下の1行は必要ない。
						$('#main_menu > li > ul:visible').slideUp();
					
						$(sub).slideDown();
					}
				});

				//クリックによる開閉の場合、親メニューの"a"要素の機能は必要ないので無効にする。
				$('#main_menu > li > a').click(function(ev) { ev.preventDefault() });
				
			});
		</script>

		<script type="text/javascript">
			jQuery(document).ready(function($) {
				//******************************************
				//クリックによる開閉
				//******************************************
				//基本的に、ページ内のどこをクリックしても全てのサブメニューを閉じるようにしておく。
				$(document).click(function() { $('#list_menu > li > ul').slideUp() });

				$('#list_menu > li').click(function(ev){
					var sub = $(this).children('ul');
					if ($(sub).is(':hidden')) {
						//今回は、これからサブメニューを開きたい項目をクリックしているので、
						//上記の、全てのサブメニューを閉じるイベントを発火させてはならない。
						//よって、イベントのバブリングを中止する。
						ev.stopPropagation();

						//他に開いているサブメニューを閉じる。
						//開いたままでもよければ、下の1行は必要ない。
						$('#list_menu > li > ul:visible').slideUp();
					
						$(sub).slideDown();
					}
				});

				//クリックによる開閉の場合、親メニューの"a"要素の機能は必要ないので無効にする。
				$('#main_menu > li > a').click(function(ev) { ev.preventDefault() });
				
			});
		</script>


		<style type="text/css">
			#main_menu > li > ul {
				display:none;
				padding: 10px 10px 5px;
				background: rgba(169, 169, 170, 1.0);
				cursor: pointer!important;
			}
		</style>
	</head>
	
<body>

<!--▽#container-->
<div id="container">
<header class="clearfix">
<h1><a href="../index.html"><img src="../images/logo.png" width="75" alt=""></a><span>webサイト開発 | PHPサンプルサイト</span></h1>

<!--▽#menu-->


<ul id="main_menu">
<li><a href=""><img src="../images/menu.png"  width="38px" alt=""></a>

<ul class="menu_home">
<li><span class="menu_title">HOME</span>
<li><a href="#top">TOP</a></li>
</li></ul>

<ul class="menu_link">
<li><span class="menu_title">LINK</span>
<li><a href="http://d.hatena.ne.jp/webry/">実践するWEBサイト制作 | webnote</a></li>
<li><a href="http://webry.dousetsu.com/images_deta/">はてなデーターの保管庫 | webrynote</a></li>
<li><a href="http://webrynote.jimdo.com/"></a>動画で確認するscript | FlashとJavaScrip</li>
<li><a href="http://webry.dousetsu.com/"></a>実践でカフェオレを俺流においしく作るサイト | カフェ俺流に作る</li>
</li></ul>

<ul class="menu_sns">
<li><span class="menu_title">SNS</span>
<li><a href="https://twitter.com/webrynote">Twitter</a></li>
<li><a href="https://www.facebook.com/note.webry">Facebook.</a></li>
<li><a href="http://webry.tumblr.com/">Tumblr</a></li>
</li></ul>

</li>
</ul>
</header>

<!--▽.content-->
<div class="content">

<!--▽.col1-->
<section class="col1">
<h2>セッション処理の応用</h2>
</section><!--▲.col1-->

<!--▽.content_inner-->
<div class="content_inner">

<section class="col2">
<section id="post01" class="col2-1 post">
<a href="#post01"><h2><span class="ita">1-2&nbsp;</span>カートに入れる仕組みを作る(セッション版)</h2></a>
<div class="post_inner">
<p class="p_point"><span class="point">point&nbsp;</span>カートに入れる仕組みを作る(セッション版)</p>
<ul class="list01">
	<li>1-2.php と 1-2_02.php は、セッション機能を使ってショッピングカートの基本的な処理を行う例。</li>
    <li>1-2.php の画面で「カートに入れる」のリンクをクリックすると、その行の商品IDがGETで自分自身に送られる。1-2.php はそのデータを受け取り、現在のセッション変数のデータを取り出した後、今回選択された商品IDをカンマ区切りで追加して、再度同じ変数に保存する。<br>
    一方、「カートの中身を見る」のリンクをクリックすると 1-2_02.php の画面へページ移動する。<br>
    この PHP ファイルでは、カート情報の入ったセッション変数の内容を読み込み、商品データの配列を参照しながら、カートの内容を一覧表示する。</li>
</ul>
</div>
</section><!--▲.col2-1-->

<section class="col-code">
<div id="post02" class="post">
<a href="#post02"><h2><span>PHPのコードを表示</span></h2></a>
<div class="post_inner">
<div class="inner">

<pre>
<code>
&lt;?php 
	if (isset($_GET[id])) {
		// データが渡されたとき
		
		// セッションを開始
		session_start();
		
		if ($_GET[id] == 0) {
			// id=0 が渡されたときはカートをクリア
			unset($_SESSION[sescart]);
		
		} else {
			// id=0 以外はカートに入れる
			if (! session_is_registered("sescart")) {
				// セッション変数が未定義なら新規に登録
				session_register("sescart");
			}
			
			// 現在のカートデータに今回の商品IDをカンマ区切りで追加
			$cart .= (strlen($cart) == 0 ? "" : ",") . $_GET[id];
			// セッション変数にデータを代入して保存
			$_SESSION[sescart] = $cart;
			
			// 追加したデータを表示
			print "今回カートに入れた商品IDは" . $_GET[id] . "<br><br>";
		}
	}
?&gt;
</code>
</pre>

</div>
</div>
</div>
</section>

<section class="col2">
<div id="post03" class="post">
<a href="#post03"><h2><span>PHPでの表示</span></h2></a>
<div class="post_inner">
<div class="inner">
<div class="php wd_wrap">
<?php
			// 追加したデータを表示
			print "今回カートに入れた商品IDは" . $_GET[id] . "<br><br>";
?>
</div>
</div>
</div>
</div>
</section>

<section class="col2">
<div id="post04" class="post">
<a href="#post04"><h2><span>FORMでの入力</span></h2></a>
<div class="post_inner">
<div class="inner">
<div>
	<table border="1">
    	<tr>
        	<th>商品ID</th>
        	<th>商品名</th>
        	<th><br></th>
        </tr>
        <tr>
        	<td>1</td>
            <td>冷蔵庫 AB-1234</td>
            <td><a href="<?=$_SESSION[PHP_SELF] . "?id=1"?>">カートに入れる</a></td>
        </tr>
        <tr>
        	<td>2</td>
            <td>エアコン AC-99999(w)</td>
            <td><a href="<?=$_SESSION[PHP_SELF] . "?id=2"?>">カートに入れる</a></td>
        </tr>
        <tr>
        	<td>3</td>
            <td>テレビ TV-A3456-k123</td>
            <td><a href="<?=$_SESSION[PHP_SELF] . "?id=3"?>">カートに入れる</a></td>
        </tr>
        <tr>
        	<td>4</td>
            <td>パソコン PC-A99999 Win-98</td>
            <td><a href="<?=$_SESSION[PHP_SELF] . "?id=4"?>">カートに入れる</a></td>
        </tr>
        <tr>
        	<td>5</td>
            <td>洗濯機 SK-TK2424 380L</td>
            <td><a href="<?=$_SESSION[PHP_SELF] . "?id=5"?>">カートに入れる</a></td>
        </tr>
        <tr>
        	<td colspan="3" align="center">
            	<a href="<?=$_SESSION[PHP_SELF] . "?id=0"?>">カートをクリア</a>
            </td>
        </tr>
        <tr>
        	<td colspan="3" align="center">
            	<a href="1-2_02.php#post04">カートの中身を見る</a>
            </td>
        </tr>
    </table>
</div>
</div>
</div>
</div>
</section>


<p class="c_top"><a href="../index.html#13">&nbsp;カテゴリートップへ戻る</a></p>

<section class="bottom clearfix">
<a href="#"><p class="page_top">TOP</p></a>
<div class="share_box">
<p><span>このサイトをシェアする</span>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="webrynote">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script><br>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script></p>
</div>
</section><!--▲.bottom-->
</section><!--▲.content-->

<footer>
<ul>
<li><a href="http://d.hatena.ne.jp/webry/">実践するWEBサイト制作 | webnote</a></li>
<li><a href="http://webry.dousetsu.com/images_deta/">はてなデーターの保管庫 | webrynote</a></li>
<li><a href="http://webrynote.jimdo.com/">動画で確認するscript | FlashとJavaScrip</a></li>
<li><a href="http://webry.dousetsu.com/">実践でカフェオレを俺流においしく作るサイト | カフェ俺流に作る</a></li>
<li><a href="https://twitter.com/webrynote">Twitter</a></li>
<li><a href="https://www.facebook.com/note.webry">Facebook.</a></li>
<li><a href="http://webry.tumblr.com/">Tumblr</a></li>
</ul>


<address>Copyright &copy; 2014 webry&nbsp;-&nbsp;『 webサイト開発 | PHPサンプルサイト 』 All Rights Reserved.</address>
</footer>
</div><!--▲.content_inner-->
</div><!--▲#container-->


</body>

</html>

ソースコード【 HTML 】

[1-2_02.php]

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>webサイト開発 | PHPサンプルサイト</title>
<link href="../css/reset.css" rel="stylesheet" type="text/css" media="screen">

  <!-- CSS for slidesjs.com example -->
  <link rel="stylesheet" href="../css/example.css">
  <link rel="stylesheet" href="../css/font-awesome.min.css">
  <!-- End CSS for slidesjs.com example -->

	<link rel="stylesheet" href="../css/embet.css">

<link href="../css/common.css" rel="stylesheet" type="text/css" media="screen">
<link href="../css/page.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				//******************************************
				//クリックによる開閉
				//******************************************
				//基本的に、ページ内のどこをクリックしても全てのサブメニューを閉じるようにしておく。
				$(document).click(function() { $('#main_menu > li > ul').slideUp() });

				$('#main_menu > li').click(function(ev){
					var sub = $(this).children('ul');
					if ($(sub).is(':hidden')) {
						//今回は、これからサブメニューを開きたい項目をクリックしているので、
						//上記の、全てのサブメニューを閉じるイベントを発火させてはならない。
						//よって、イベントのバブリングを中止する。
						ev.stopPropagation();

						//他に開いているサブメニューを閉じる。
						//開いたままでもよければ、下の1行は必要ない。
						$('#main_menu > li > ul:visible').slideUp();
						$(sub).slideDown();
					}
				});

				//クリックによる開閉の場合、親メニューの"a"要素の機能は必要ないので無効にする。
				$('#main_menu > li > a').click(function(ev) { ev.preventDefault() });
				
			});
		</script>

		<script type="text/javascript">
			jQuery(document).ready(function($) {
				//******************************************
				//クリックによる開閉
				//******************************************
				//基本的に、ページ内のどこをクリックしても全てのサブメニューを閉じるようにしておく。
				$(document).click(function() { $('#main_menu > li > ul').slideUp() });

				$('#main_menu > li').click(function(ev){
					var sub = $(this).children('ul');
					if ($(sub).is(':hidden')) {
						//今回は、これからサブメニューを開きたい項目をクリックしているので、
						//上記の、全てのサブメニューを閉じるイベントを発火させてはならない。
						//よって、イベントのバブリングを中止する。
						ev.stopPropagation();

						//他に開いているサブメニューを閉じる。
						//開いたままでもよければ、下の1行は必要ない。
						$('#main_menu > li > ul:visible').slideUp();
					
						$(sub).slideDown();
					}
				});

				//クリックによる開閉の場合、親メニューの"a"要素の機能は必要ないので無効にする。
				$('#main_menu > li > a').click(function(ev) { ev.preventDefault() });
				
			});
		</script>

		<script type="text/javascript">
			jQuery(document).ready(function($) {
				//******************************************
				//クリックによる開閉
				//******************************************
				//基本的に、ページ内のどこをクリックしても全てのサブメニューを閉じるようにしておく。
				$(document).click(function() { $('#list_menu > li > ul').slideUp() });

				$('#list_menu > li').click(function(ev){
					var sub = $(this).children('ul');
					if ($(sub).is(':hidden')) {
						//今回は、これからサブメニューを開きたい項目をクリックしているので、
						//上記の、全てのサブメニューを閉じるイベントを発火させてはならない。
						//よって、イベントのバブリングを中止する。
						ev.stopPropagation();

						//他に開いているサブメニューを閉じる。
						//開いたままでもよければ、下の1行は必要ない。
						$('#list_menu > li > ul:visible').slideUp();
					
						$(sub).slideDown();
					}
				});

				//クリックによる開閉の場合、親メニューの"a"要素の機能は必要ないので無効にする。
				$('#main_menu > li > a').click(function(ev) { ev.preventDefault() });
				
			});
		</script>


		<style type="text/css">
			#main_menu > li > ul {
				display:none;
				padding: 10px 10px 5px;
				background: rgba(169, 169, 170, 1.0);
				cursor: pointer!important;
			}
		</style>
	</head>
	
<body>

<!--▽#container-->
<div id="container">
<header class="clearfix">
<h1><a href="../index.html"><img src="../images/logo.png" width="75" alt=""></a><span>webサイト開発 | PHPサンプルサイト</span></h1>

<!--▽#menu-->


<ul id="main_menu">
<li><a href=""><img src="../images/menu.png"  width="38px" alt=""></a>

<ul class="menu_home">
<li><span class="menu_title">HOME</span>
<li><a href="#top">TOP</a></li>
</li></ul>

<ul class="menu_link">
<li><span class="menu_title">LINK</span>
<li><a href="http://d.hatena.ne.jp/webry/">実践するWEBサイト制作 | webnote</a></li>
<li><a href="http://webry.dousetsu.com/images_deta/">はてなデーターの保管庫 | webrynote</a></li>
<li><a href="http://webrynote.jimdo.com/"></a>動画で確認するscript | FlashとJavaScrip</li>
<li><a href="http://webry.dousetsu.com/"></a>実践でカフェオレを俺流においしく作るサイト | カフェ俺流に作る</li>
</li></ul>

<ul class="menu_sns">
<li><span class="menu_title">SNS</span>
<li><a href="https://twitter.com/webrynote">Twitter</a></li>
<li><a href="https://www.facebook.com/note.webry">Facebook.</a></li>
<li><a href="http://webry.tumblr.com/">Tumblr</a></li>
</li></ul>

</li>
</ul>
</header>

<!--▽.content-->
<div class="content">

<!--▽.col1-->
<section class="col1">
<h2>セッション処理の応用</h2>
</section><!--▲.col1-->

<!--▽.content_inner-->
<div class="content_inner">

<section class="col2">
<section id="post01" class="col2-1 post">
<a href="#post01"><h2><span class="ita">1-2&nbsp;</span>カートに入れる仕組みを作る(セッション版)</h2></a>
<div class="post_inner">
<p class="p_point"><span class="point">point&nbsp;</span>カートに入れる仕組みを作る(セッション版)</p>
<ul class="list01">
	<li>1-2.php と 1-2_02.php は、セッション機能を使ってショッピングカートの基本的な処理を行う例。</li>
    <li>1-2.php の画面で「カートに入れる」のリンクをクリックすると、その行の商品IDがGETで自分自身に送られる。1-2.php はそのデータを受け取り、現在のセッション変数のデータを取り出した後、今回選択された商品IDをカンマ区切りで追加して、再度同じ変数に保存する。<br>
    一方、「カートの中身を見る」のリンクをクリックすると 1-2_02.php の画面へページ移動する。<br>
    この PHP ファイルでは、カート情報の入ったセッション変数の内容を読み込み、商品データの配列を参照しながら、カートの内容を一覧表示する。</li>
</ul>
</div>
</section><!--▲.col2-1-->

<section class="col-code">
<div id="post02" class="post">
<a href="#post02"><h2><span>PHPのコードを表示</span></h2></a>
<div class="post_inner">
<div class="inner">

<pre>
<code>
&lt;?php 

?&gt;
</code>
</pre>

</div>
</div>
</div>
</section>

<section class="col2">
<div id="post03" class="post">
<a href="#post03"><h2><span>PHPでの表示</span></h2></a>
<div class="post_inner">
<div class="inner">
<div class="php wd_wrap">
<?php
	// セッション開始
	session_start();
	
	if (! session_is_registered("sescart")) {
		// セッション変数が未定義の場合
		$html = "【 現在、カートは殻です 】";
	
	} else {
		// セッション変数のデータを読み込み
		$cart = $_SESSION[sescart];
		
		// 商品名データを配列に代入
		$product = array("冷蔵庫 AB-1234" , "エアコン AC-99999(w)", "テレビ TV-A3456-k123", "パソコン PC-A99999 Win-98", "洗濯機 SK-TK2424 380L");
		
		// 現在のカート内容を列挙
		$html = "【 現在のカートの現状 】<br><br>";
		$cartarray = explode(",", $cart);
		foreach ($cartarray as $data) {
			// 商品IDから商品名を取得してHTML文に追加
			$html .= $product[$data - 1] . "<br>";
		}
	}
?>
</div>
</div>
</div>
</div>
</section>

<section class="col2">
<div id="post04" class="post">
<a href="#post04"><h2><span>FORMでの入力</span></h2></a>
<div class="post_inner">
<div class="inner">
<div>
<?=$html ?>
<br>
<br>
<a href="1-2.php#post04">戻る</a>
</div>
</div>
</div>
</div>
</section>


<p class="c_top"><a href="../index.html#13">&nbsp;カテゴリートップへ戻る</a></p>

<section class="bottom clearfix">
<a href="#"><p class="page_top">TOP</p></a>
<div class="share_box">
<p><span>このサイトをシェアする</span>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="webrynote">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script><br>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script></p>
</div>
</section><!--▲.bottom-->
</section><!--▲.content-->

<footer>
<ul>
<li><a href="http://d.hatena.ne.jp/webry/">実践するWEBサイト制作 | webnote</a></li>
<li><a href="http://webry.dousetsu.com/images_deta/">はてなデーターの保管庫 | webrynote</a></li>
<li><a href="http://webrynote.jimdo.com/">動画で確認するscript | FlashとJavaScrip</a></li>
<li><a href="http://webry.dousetsu.com/">実践でカフェオレを俺流においしく作るサイト | カフェ俺流に作る</a></li>
<li><a href="https://twitter.com/webrynote">Twitter</a></li>
<li><a href="https://www.facebook.com/note.webry">Facebook.</a></li>
<li><a href="http://webry.tumblr.com/">Tumblr</a></li>
</ul>


<address>Copyright &copy; 2014 webry&nbsp;-&nbsp;『 webサイト開発 | PHPサンプルサイト 』 All Rights Reserved.</address>
</footer>
</div><!--▲.content_inner-->
</div><!--▲#container-->


</body>

</html>


追加された外部ファイル





ブラウザで表示


iPhone用画面【 Chrome