PHP乱数を扱う０３ - 実践するWEBサイト制作

画像をランダムに表示する

srand関数　rand関数

画像ファイルをランダムに表示する
ファイル名の１桁の数値部分を乱数で生成することにより、画像ファイルをランダムに生成している

【書式】

<?php
	// 乱数ジェネレーターを初期化
	srand(microtime() * 1000000);
	
	// ５つの画像ファイルを表示するループ
	for ($cnt = 1; $cnt <= 5; $cnt++) {
		// 1〜9の乱数を生成
		$imagefile = rand(1, 9);
		// 生成された乱数から画像ファイルを組み立てる
		$imagefile = "image" . $imagefile . ".gif";
		// HTMLのIMGタグで画像ファイルを出力
		print "<img src='images/$imagefile' hspace='2'>";
	}
?>

ソースコード

ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="keywords" content="数値の処理">
<meta name="description" content="PHP,数値の処理">
<meta name="viewport" content="width=device-width"> 
<title>数値の処理</title>
<link rel="stylesheet" href="css/style.css" media="all">
<!-- IE対策 -->
<!--[if ite IE 9]>
<script src="http://html5shiv.googlecode.com/svn/ttunk/html5.js"></script>
<![endif]-->

<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<style>
  article,aside,dialog,figure,footer,header,
  hgroup,menu,nav,section{display: block;}
</style>
</head>

<body>


<header>
	<h1>乱数を扱う</h1>
</header>

<article>
<h1>画像をランダムに表示する</h1>
	<div class="clearfix">
		<p class="point"><span class="p">P</span>oint</p>
<h2 class="post">srand関数　rand関数<span class="f_col_def"> 画像ファイルをランダムに表示する</span></h2>
	<p class="post_p">ファイル名の１桁の数値部分を乱数で生成することにより、画像ファイルをランダムに生成している。</p>
	</div>

<section class="sec01">
	<h2>&lt;&nbsp;ブラウザでの表示&nbsp;&gt;</h2>
	<div class="sec01_php">
<?php
	// 乱数ジェネレーターを初期化
	srand(microtime() * 1000000);
	
	// ５つの画像ファイルを表示するループ
	for ($cnt = 1; $cnt <= 5; $cnt++) {
		// 1〜9の乱数を生成
		$imagefile = rand(1, 9);
		// 生成された乱数から画像ファイルを組み立てる
		$imagefile = "image" . $imagefile . ".gif";
		// HTMLのIMGタグで画像ファイルを出力
		print "<img src='images/$imagefile' hspace='2'>";
	}
?>
	</div>
</section>

</article>

<footer>
<h3>PHPスクリプトの基本</h3>
	<small>Copyright&copy; 2013 webry All Rights Reserved.</small>
</footer>

</body>
</html>

ソースコード【 CSS 】

@charset "utf-8";

/* resetcss */
html,body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset {

    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-family:
      "ヒラギノ角ゴ Pro W3",
      "Hiragino Kaku Gothic Pro",
      "Hiragino Kaku Gothic Pro W3",
      "メイリオ",
      Meiryo,
      Osaka,
      "ＭＳ Ｐゴシック",
			"MS PGothic",
      sans-serif;
      }

    a {
     text-decoration: none;
    }
 
     ul, ol {
      list-style-type: none;
     }	
	  
    img {
      border: 0;
	  vertical-align: bottom;
    }

.clearfix:after {
  content: ""; 
  display: block; 
  clear: both;}

/* ▼font */
.f_weight {font-weight: bold;}
/* ▲font */

body {
	width: 960px;
	margin: 0 auto;
	color: #333;}

header {
	text-align: center;
	padding: 24px 50px 18px;
	background-color: #36F;
	border-radius: 18px / 18px;
	color: #fff;}

header h1 {
	border-bottom: 5px dotted #fff;}

.f_col_def {
	font-size: 86%;
	color: #333;}

article  {
	width: 91%;
	margin: 0 auto;}

article h1 {
	margin: 30px 0 18px;
	padding: 2px 0 0 0.5em;
	border: 1px solid #39F;
	border-left: 20px solid #36F;}

.point {
	line-height: 1.0;
	font-family: 'Maven Pro', Helverica, Arial, sans-serif;
	float: left;
	background-color: #F60;
	padding: 12px 26px;
	border-radius: 55px / 48px;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	color: #fff;}

.point .p {
	display: block;
	font-size: 32px;
	line-height: 1.0;}

h2.post {
	margin: 0 0 6px 30px;
	padding: 0 0 3px 70px;
	font-weight: bold;
	border-bottom: 1px solid #aaa;
	color:#F00;}

.post_p {
	padding: 0 0 0 100px;
	line-height: 1.2;}

footer {
	line-height: 0.8;
	text-align: center;
	padding: 5px 0;
	background-color: #36F;
	border-radius: 6px / 6px;
	color: #fff;
	overflow: hidden;}

/* ▼.sec01 */
.sec01 {margin-top: 30px;}
.sec01 h2 {
	font-size: 15px;
	line-height: 1.0;
	color: #983A48;}
.sec01_php {
	margin-bottom: 30px;
	padding: 20px 15px;
	border: 2px dotted #3FF;
	background-color: #ECF9FF;}
/* ▲.sec01 */

footer {
	margin-top: 45px;}

footer h3 {
	font-size: 12px;}

/* ▼.table1 */
.table1 {
	width: auto;
	margin: 45px auto 0;
	border: 2px #000 solid;
	border-collapse: collapse;
}
.table1 th, .table1 td {
	border: 1px #000 solid;
	padding: 5px 16px;
}
.table1 th {
	background-color: #BFCBFF;}
.th_wid_7 {width: 7em;}
/* ▲.table1 */

.p_top {
	margin-top: 30px;}

.p_bottom {
	margin-bottom: 30px;}

/* ▼section .sec02 */
.sec02 h2 {
	font-size: 18px;
	margin-top: 30px;
	padding: 0 0 0 14px;
	background-color:  #36F;
	color: #fff;}
.f_weight {font-weight: bold;}
.sec02 p {
	padding: 12px 24px;
	background-color: #D7DEFF;}
.sec02 .inner {
	width: auto;
	padding-left: 42px;
	background-color: #D7DEFF; }
/* ▲section .sec02 */

/* ▼section .sec03 */
.sec03 {
	margin-top: 25px;}
.sec03 h3 {
	font-size: 16px;
	padding: 0 0 0 8px;}
.svg_circle {
	position: relative;
	top: 3px;
	left: -8px;}
.sec03 p {
	text-indent: 1em;
	padding: 5px 16px;}
.sec03 h4 {
	font-size: 14px;
	text-indent: 1.6em;
	margin-top: 12px;
	line-height: 1.0;}
.sec03 dl{
	line-height: 1.0;
	margin: 0 20px 20px;
	padding: 5px 0;
	border: 2px dotted #F9393F;}
.sec03 dt {
	float: left;
	width: 15em;
	padding-left: 1em;
	font-weight: bold;
	clear: both;}
.sec03 dd {
	margin-left: 15em;}
/* ▲section .sec03 */

/* ▼.sec_p */
.sec_p {padding: 5px 15px;}
.sec_p p {line-height: 1.3; border-bottom: 2px dotted #996F70; margin-bottom: 14px;}
.sec_p p + p {margin-bottom: 0;}
/* ▲.sec_p */