個人ページの作成例

趣味のページ

趣味のページとして、写真を並べて紹介するページを作成します。

テーブルを使ったレイアウト

写真をテーブルを使って並べ、タイトルも付けます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>趣味のページ</title>
<style type="text/css">
h1 {
	font-size: 18px;
	font-weight: bold;
	color: #993300;
	background-color: #FF9933;
	border-style: solid;
	width: 300px;
	padding: 5px;
	border-left-width: 10px;
	border-color: #993300;
}
th {
	color: #FF9933;
	background-color: #993300;
	font-size: 12px;
}
</style>
</head>

<body>
<h1>趣味のページ</h1>
<hr>

<p>このページでは趣味に関して○○○○○○○○○○○○○○○○○○○○○○○<br>
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</p>
<p>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br>
○○○○○○○○○○○○○○○</p>

<table border="2" cellspacing="2" cellpadding="0">
  <tr>
    <th>ノイシュヴァンシュタイン城</th>
    <th>フィレンツェの町並み</th>
    <th>モンマルトルの遠景</th>
    <th>ルーブル美術館</th>
  </tr>
  <tr>
    <td><a href="photo/001.jpg"><img src="photo/001s.jpg" width="160" height="120"></a></td>
    <td><a href="photo/002.jpg"><img src="photo/002s.jpg" width="160" height="120"></a></td>
    <td><a href="photo/003.jpg"><img src="photo/003s.jpg" width="160" height="120"></a></td>
    <td><a href="photo/004.jpg"><img src="photo/004s.jpg" width="160" height="120"></a></td>
  </tr>
  <tr>
    <th>エッフェル塔</th>
    <th>モンサンミッシェル</th>
    <th>ヴェルサイユ宮殿</th>
    <th>コロッセオ</th>
  </tr>
  <tr>
    <td><a href="photo/005.jpg"><img src="photo/005s.jpg" width="160" height="120"></a></td>
    <td><a href="photo/006.jpg"><img src="photo/006s.jpg" width="160" height="120"></a></td>
    <td><a href="photo/007.jpg"><img src="photo/007s.jpg" width="160" height="120"></a></td>
    <td><a href="photo/008.jpg"><img src="photo/008s.jpg" width="160" height="120"></a></td>
  </tr>
  <tr>
    <th>ピサの斜塔</th>
    <th>モアイ像</th>
    <th>凱旋門</th>
    <th>ユングフラウ</th>
  </tr>
  <tr>
    <td><a href="photo/009.jpg"><img src="photo/009s.jpg" width="160" height="120"></a></td>
    <td><a href="photo/010.jpg"><img src="photo/010s.jpg" width="160" height="120"></a></td>
    <td><a href="photo/011.jpg"><img src="photo/011s.jpg" width="160" height="120"></a></td>
    <td><a href="photo/012.jpg"><img src="photo/012s.jpg" width="160" height="120"></a></td>
  </tr>
</table>

<p>写真をクリックすると大きな写真を見ることができます。</p>

<hr>
<p align="center"><a href="index.html">戻る</a></p>
</body>
</html>

テーブル内の写真をクリックすると大きく写真だけを開いて表示します。

写真をJavaScriptで開く

写真を単純にリンクで開くと、ページを戻る必要があります。
今度は、スクリプトを使って別ウィンドウで開いてみます。写真をクリックするとウィンドウは閉じられます。

リンクの部分はスクリプトの呼び出し命令に入れ換えます。

実例02

body内にスクリプトを記述します。邪魔にならない下の方が良いでしょう。

<script type="text/javascript">
<!--
function openWin(wIMG) {
	//画像を取得
	myImg = new Image();
	myImg.src = wIMG;

	wName = "Photo";
	
	//画像サイズの取得(FireFoxでは正常に取得できない)
	wWidth = myImg.width;
	wHeight = myImg.height;

	//FireFox用対策（取得できない場合にウィンドウサイズを固定）
	if(!(wWidth > 0)) {wWidth = 640;}
	if(!(wHeight > 0)) {wHeight = 480;}

	//ウィンドウを開く
	nWin = window.open("",wName,"width=" + wWidth + ",height=" + wHeight);

	//ウィンドウを生成
	nWin.document.open();
	nWin.document.write("<html><head>");
	nWin.document.write("<title>" + wName + "</title></head>");
	nWin.document.writeln("<body leftmargin='0' topmargin='0' marginwidth='0' marginheight='0'>");
	nWin.document.write("<a href='javascript:window.close()'><img src='" + wIMG + "' border='0' width='" + wWidth + "' height='" + wHeight + "'></a>"); 
	nWin.document.write("</body></html>");
	nWin.document.close();

	//IE用の調整
	nWin.resizeBy(wWidth-nWin.document.body.clientWidth,wHeight-nWin.document.body.clientHeight);
	
	//FireFox用の調整
	nWin.innerWidth = wWidth;
	nWin.innerHeight = wHeight;

	//新しいウィンドウを前に
	nWin.focus();
}
-->
</script>

次のページへ

戻る