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 サドル Saddle</a></li>
<li><a href="./03bike/61-00pedal.html" target="inner_gamen">P-2 ペダル Pedal</a></li>
<li><a href="./03bike/41-00wheel.html" target="inner_gamen">P-3 ホイール 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 />
１日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>
開発ノウハウ等
- ● 画面構成と
コンテンツの表示 - ● 画面種類と表示要領
- ● 当サイトの
CSS,HTML,PHP - ------------------------------
- ● Tableの使い方
（文字間の空白表示） - ● アクセスカウンター
設置要領 - ● ページトップへ戻る
jQuery ボタンの設置 - ● SyntaxHighlighter
ソースコードの掲載 - ● gif アニメーションの
作り方 - ● リストの作り方
- ● 区切り線の表示
-
▶ GPSデータを地図に
描画しサイトに表示 - ● Excel（エクセル）を
サイトに貼る方法 -
▶ 写真の撮影場所を
地図上で特定する - ------------------------------
- ● 環境の構築要領
- ● ホームページの
作り方ノウハウ集へ - ● 画面構成と
表示要領へ - ------------------------------
- ● 電子工作Topページへ
- ------------------------------