6-7-3-2. 当サイトの CSS,HTML,PHP PGM List

1. 当サイトの CSS

特徴 & 変更

@charset "UTF-8";

/*============================================
全般的なスタイル
============================================*/
* {
	margin:0; padding:0; 	/*全要素のマージン・パディングをリセット*/
	line-height:1.5;	/*全要素の行の高さを1.5倍にする*/
	color:#333333;		/*文字色*/

} 
body {
	background-color:#ffffff;	/*ページ全体の背景色*/
	text-align:center;		/*IE6以下でセンタリングするための対策*/
}
div#pagebody {
	width:1024px; margin:5 auto;	/*ページ全体のサイズと内容全体をセンタリング*/
	padding-top: 2px;  
	text-align:left;	/*テキストの配置を左揃えにする*/
	background-image:url("../images/bg_pagebody.gif");	/*内容全体の背景をgifで作成-gifの濃紺色になる*/
	background-repeat:repeat-y;		/*背景画像を縦方向に繰り返す*/
	background-color:#000033;		/*内容全体の背景色 黄色*/
}

/*============================================
ヘッダ
============================================*/
div#header {
	width:1000px; margin: auto;
	padding-bottom: 1px;  
	height:106px;	/*背景画像のサイズに合わせてボックスの高さを指定*/
	background-image:url("../images/arakan01.jpg");	/*ヘッダ部分の背景画像*/
	background-repeat:no-repeat;		/*背景画像を繰り返さない*/
	}
h1 {
	padding:5px 0px 0px 16px;		/*見出し内容の位置調整*/
	font-family:Arial, Helvetica, sans-serif;	/*フォントの種類*/
	font-size: 13px;	 /*フォントのサイズ*/
}
h1 a {text-decoration:none;} 			/*リンクの下線を無くす*/

/*============================================
メインメニュー
============================================*/
ul#menu {
	height:36px; font-weight:bold;
	/* background-color:#800000;	メインメニューバーの背景色 茶色*/
}
li#menu01,li#menu02,li#menu03,li#menu04,li#menu05 {
	float:left;			/*リスト項目を横に並べる*/
	display:inline;			/*リスト項目をインライン表示にする*/
	list-style-type:none;		/*リストマーカー無しにする*/
	background-repeat:no-repeat; 	/*背景画像を繰り返さない*/	
}

/*ボタン01~05にはそれぞれ異なる背景画像を指定する*/
li#menu01 {
	width:224px; height:36px;	/*背景画像に合わせたサイズ指定*/
	background-image:url("../images/bg_menu1.jpg");	/*背景画像*/
}
li#menu02 {
	width:200px; height:36px;	/*背景画像に合わせたサイズ指定*/
	background-image:url("../images/bg_menu2.jpg");	/*背景画像*/
}
li#menu03 {
	width:200px; height:36px;	/*背景画像に合わせたサイズ指定*/
	background-image:url("../images/bg_menu3.jpg");	/*背景画像*/
}
li#menu04 {
	width:200px; height:36px;	/*背景画像に合わせたサイズ指定*/
	background-image:url("../images/bg_menu4.jpg");	/*背景画像*/
}
li#menu05 {
	width:200px; height:36px;	/*背景画像に合わせたサイズ指定*/
	background-image:url("../images/bg_menu5.jpg");	/*背景画像*/
}
ul#menu a {
	display:block;				/*リンクをブロック表示にする*/
	height:36px; padding-top:4px; text-align:center;
	text-decoration:none; 			/*リンクの下線を無くす*/
	font-family:Arial, Helvetica, sans-serif;	/*フォントの種類*/
	font-size: 14px;	 /*フォントのサイズ*/
}

/*============================================
サブメニュー(左カラム)
============================================*/
div#submenu {
	width:224px;			/*幅の指定*/
	margin:10px 10px 10px 25px;	/*位置調整(IE6のバグに注意)*/
	display:inline;			/*IE6のマージン算出のバグ対策*/
	float:left;			/*サブメニューのカラムを左寄せにする*/
}

/*サブメニューのヘッダ部分(余白調整・背景画像・背景色・文字サイズなど)*/
div#submenu_header {
	height:26px; padding:4px 0px 0px 0px;
	background-image:url("../images/bg_submenu_header.gif");
	background-repeat:no-repeat; background-position:top;
	background-color:#00ffff;
	font-family:Arial, Helvetica, sans-serif;	/*フォントの種類*/
	font-size:90%; font-weight:bold; text-align:center;
}

/*サブメニューのボディ部分(余白調整・背景画像・背景色)*/
ul#submenu_body {
	padding-bottom:6px;
	background-image:url("../images/bg_submenu_footer.gif");
	background-repeat:no-repeat; background-position:bottom;
	background-color:#ffffff;
}
ul#submenu_body li {
	font-family:Arial, Helvetica, sans-serif;	/*フォントの種類*/
	font-size:85%;			/*文字サイズを90%にする*/
	list-style-type:none;		/*リストマーカー無しにする*/
	display:inline;			/*リスト項目をインライン表示にする*/
}
ul#submenu_body li a {
	display:block;			/*リンクをブロック表示にする*/
	margin:0px 4px 0px 0px;		/*サブメニュー項目のマージン*/
	padding:2px 0px 2px 20px;	/*サブメニュー項目のパディング*/
	background-color:#eeeeee;	/*サブメニュー項目の背景色*/
	text-decoration:none;		/*リンクの下線を無くす*/
}
ul#submenu_body li a:hover {
	background-color:#ffffff;	/*リンクにマウスが乗ったら色を変える*/
}

/*============================================
コンテンツ(中央と右の2カラム全体)
============================================*/
div#content {
	width:720px; margin:10px 10px 10px 0px;	/*幅の指定と位置調整*/
	float:left;				/*2カラム全体を右寄せにする*/
}

/*============================================
ニュース(中央カラム)
============================================*/
div#news {
	width:570px; margin-left:5px; padding-top:7px; /*ニュースタイトルの幅の指定と位置調整*/
	float:left;					/*カラムを左寄せにする*/
	background-image:url("../images/bar_news.gif");	/*中央カラムの背景画像*/
	background-repeat:no-repeat;			/*背景画像を繰り返さない*/
	text-align:left;
}

/*見出し・段落・水平線のスタイル指定*/
h2 {
	font-family:Arial, Helvetica, sans-serif;	/*フォントの種類*/
	margin-bottom:10px; padding-left:25px;
	font-size:100%; border-bottom:solid 1px #cccccc;
	background-image:url("../images/icon.gif");
	background-repeat:no-repeat; background-position:left center;
}
h3 {font-family:Arial, Helvetica, sans-serif; font-size:90%; margin:10px 0px 10px 30px;}
p {font-family:Arial, Helvetica, sans-serif; font-size:80%; margin:0px 0px 5px 35px; text-indent:10px;}
hr {height:1px; border:solid 1px #cccccc; margin-bottom:30px;}
div#news a {
	text-decoration:none; 			/*リンクの下線を無くす*/
}
div#news_Lowerleft {
	float:left;					/*カラムを左寄せにする*/
	padding-right: 20px;		/*右にパディングを設定*/
}

/*============================================
ピックアップ(右カラム)
============================================*/
div#pickup {
	width:140px; margin-left:5px; padding-top:7px; /*幅の指定と位置調整*/
	float:left;				/*カラムを右寄せにする*/
	background-image:url("../images/bar_pickup.gif");	/*右カラムの背景画像*/
	background-repeat:no-repeat;		 /*背景画像を繰り返さない*/
	text-align:left;
	font-size:90%;			/*フォントサイズを90%にする*/
}
div#pickup ul {
	margin-left:10px; 		/*左マージンを10px空ける*/
	font-family:Arial, Helvetica, sans-serif;	/*フォントの種類*/
	font-size:80%;			/*フォントサイズを90%にする*/
	text-align:left;
}
div#pickup li {
	list-style-type:none; 		/*リストマーカー無しにする*/
	line-height:1.8;		/*行の高さを1.8倍にする*/
	margin:0px 4px 0px 0px;		/*サブメニュー項目のマージン*/
	padding:6px 0px 4px 2px;	/*サブメニュー項目のパディング*/
}
div#pickup a {
	text-decoration:none; 			/*リンクの下線を無くす*/
}
div#pickup li a:hover {
	background-color:#e0ffff;	/*リンクにマウスが乗ったら色を変える*/
}

/*============================================
フッタ
============================================*/
div#footer {
	height:36px; text-align:center;
	clear:both;					/*回り込みを解除する*/
	background-image:url("../images/bg_footer.jpg");	/*フッタ部分の背景画像*/
	background-repeat:no-repeat;			/*背景画像を繰り返さない*/
	background-color:#cccccc;			/*フッタ部分の背景色*/
}
address {
	font-style:normal;			 /*フォントスタイルを標準にする*/
	font-size:small;			 /*フォントサイズを小さくする*/
	padding:5px 0px 5px 0px;		 /*要素内容の位置調整*/
}

2. 当サイトの HTML

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="./css/cyclelife.css" />
<title>バイク</title>
</head>

<body>
<div id="pagebody">

	<!-- ヘッダ -->
	<div id="header"><h1><a href="index.html">軽量化・ポジショニング、走るより機材の組み付け・セッティングに没頭。<br />
  ヒルクライム中毒になり、峠走破に目的が移るも肉体の破壊に勝てず。<br />
  最近、やっと走りを楽しむことができるようになった。<br />山の上でのおにぎりがうまい。</a></h1></div>
	
	<!-- メインメニュー -->
	<ul id="menu">
		<li id="menu01"><a href="11kaidouwoyuku.html">街道をゆく</a></li>
		<li id="menu02"><a href="21jitensyako-su.html">自転車コース</a></li>
		<li id="menu03"><a href="31bike.html">バイク</a></li>
		<li id="menu04"><a href="41densikousaku.html">電子工作</a></li>
		<li id="menu05"><a href="51forum.html">フォーラム</a></li>
	</ul>

	<!-- サブメニュー(左カラム) -->
	<div id="submenu">
		<div id="submenu_header">愛用バイクとパーツ</div>
		<ul id="submenu_body">
			<li><a href="./03bike/11-00rando.html" target="inner_gamen">B-1 ランドナー</a></li>
			<li><a href="./03bike/21-00minivelo.html" target="inner_gamen">B-2 ミニベロ</a></li>
			<li><a href="./03bike/31-00road.html" target="inner_gamen">B-3 ロードバイク</a></li>
			
			<li><a href="./03bike/51-00saddle.html" target="inner_gamen">P-1 サドル&nbsp;Saddle</a></li>
			<li><a href="./03bike/61-00pedal.html" target="inner_gamen">P-2 ペダル&nbsp;Pedal</a></li>
			<li><a href="./03bike/41-00wheel.html" target="inner_gamen">P-3 ホイール&nbsp;Wheel</a></li>
			<li><a href="./03bike/71-00handle.html" target="inner_gamen">P-4 ハンドルバー</a></li>
		</ul>
	</div>

	<!-- コンテンツ(中央と右の2カラム) -->
	<div id="content">
		<!-- ニュース(中央カラム) -->
		
		<iframe seamless frameborder="no" src="32bikecon.php" name="inner_gamen" width="740" height="100%">
    	このページでは、インラインフレームを使用しています。
        対応しているブラウザで表示願います。
    	</iframe>
		
	</div>

	<!-- フッタ -->
	<div id="footer"><address>Copyright (c) f2f All Rights Reserved.</address></div>

</div>
</body>
</html>

3. 当サイトの PHP

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="./css/cyclelife.css" />
<style type="text/css">
<!--
.table2 {
 	border-collapse: collapse;
 	border-color: #000000;
  	width: 526px;
	}
.table2 th {
 	background-color: #e0ffff;
 	width: 160px;
 	height: 15px;
 	font-size: 11px;
 	color: #000000;
 	text-align: center;
 	font-weight: normal;
	}
.table2 td {
 	background-color: #FFFFFF;
 	width: 170px;
 	height: 13px;
 	font-size: 11px;
 	color: magenta;
 	text-align: center;
	}
-->
</style>
<title>自転車コースのコンテンツ</title>
<script type="text/javascript" src="./js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./js/lightbox.js"></script> 
<link rel="stylesheet" href="./css/lightbox.css" type="text/css" media="screen" />
</head>

<body>

	<!-- コンテンツ(中央と右の2カラム) -->
	<div id="content">
		<!-- ニュース(中央カラム) -->
		<div id="news">
			<h2>~関西を中心とした自転車コース~ に関するページ</h2>
				<p>走行したことのあるコースを、街道をゆくの自転車コースと重複しない範囲で、府県別に掲載しています。<br />
				 1日100㎞以上走ることを目標にコースを作成していましたが、コース内の名所・旧跡、
				或は、美味しいレストランに寄る『取材』を考えると、30㎞~50㎞ぐらいが最適と分かり、段々距離が短くなっています。<br />
				 ロングライドより、ポタリングの参考にして頂ければ幸いです。</p>
				<p>
				<table class="table2" border="1" cellspacing="0" cellpadding="0">
					<tr>
					<td>走りたくないコース その1</td>
					<td>走りたくないコース その2</td>
					</tr>
				</table>
				<div style="position:relative; top:0px; left: 36px;">
				<a href="images/road_aero.jpg" rel="lightbox[kawachimiti]" title="road_aero">
				<img src="images/road_aero.jpg" width="260" height="143" /></a>
				<a href="images/road_mountain.jpg" rel="lightbox[kawachimiti]" title="road_mountain">
				<img src="images/road_mountain.jpg" width="260" height="143" /></a></div></p>
				<p>※ 各コースのタイトルをクリックすると、 Google Map に移動します。
				地図及び画像そのものをクリックすると、拡大表示になると同時に、前後にコマ送り出来ます。<br />
				<?php require "counter221.php" ?></p>
			<hr />
			<h3>最近追加したコース!!</h3>
				<p>2014.11.11 26-016 京都府南丹市 美山周回</p>
				<p>2014.11.06 GARMIN-VIRBを取り付けてから、コースで写真を撮ることが激減しました。</p><br />
			<hr />
			
		</div>
		<!-- ピックアップ(右カラム) -->
		<div id="pickup">
			<h2>ピックアップ</h2>
			<ul>
				<li><a href="./02jiko-su/20-01tizusakusei.html">コース地図の作り方</a></li>
				<li><a href="./02jiko-su/20-02rinkou1.html">輪行方法</a></li>
				<li><a href="./02jiko-su/20-03rinkoubag.html">輪行用バッグ</a></li>
				<li><a href="./02jiko-su/20-04backpack.html">バックパック</a></li>
				<li><a href="./02jiko-su/20-05bagrui.html">自転車用バッグ</a></li>
				<li><a href="./02jiko-su/20-06virb.html">GARMIN VIRB の活用</a></li>
			</ul>
		</div>
	</div>


</body>
</html>



スポンサー リンク





開発ノウハウ等


スポンサー リンク


スポンサー リンク