ga-07-03

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

<演習2>
3.演習1で作成した skeletonファイルの改良

目   次

1.タイトルとメインナビゲーションの変更

2.目次と項目2~項目5の削除

3.フッターナビゲーションの変更

4.改良したskeletonと
  frame-style-sheet.cssのコード

5.改良したskeletonファイルの
  各ファイルへの置換え

6.各ファイルのタイトルと
  フッターナビゲーションの変更

7.各ファイルの変更後コード


1.タイトルとメインナビゲーションの変更

演習1で作成したskeletonファイルのタイトルとメインナビゲーションの変更を行います。

画像

画像

画像

タイトルとメインナビゲーションを変更します。CSSファイル(frame-style-sheet.css)のコードはメインナビゲーションのコードを置換えてください。HTMLファイル(skeleton.html)のコードは、<!DOCTYPE html>から</header>まで置換えて下さい。 変更箇所は、蛍光ペンを引いてあります。

【CSSファイルコード】 
CSSコード(frame-style-sheet.css)
/*--====================================
      メインナビゲーション 
--====================================*/
.f-main-navi {
  font-size: 18px;
  font-weight: bold;
  width: auto; /*ページ幅一杯に広げる*/
  background-color: darkblue; /*ナビゲーションの背景色*/
}
.f-main-navi-list {
  margin: 0;
  padding: 0;
  text-align: center;
}
.f-main-navi-item {
  display: inline-block; /*横に並べる*/
  padding: 10px 20px; /*上下余白:10px、左右余白:20px*/
  color: white;
}
a:link {
color:white;
text-decoration:none;
}
a:visited {
color:white;
text-decoration:none;
}
a:hover {
color:skyblue;
font-weight:bold;
}
a:active {
color:cyan;
}
/*--====================================
 訪問中のページのnavi色をgoldに変える
--====================================*/
.current a{
color:gold;
}
        
【HTMLファイル】
HTMLコード(skeleton.html)
<!DOCTYPE html>
<!--====================================
     演習-2(複数ページのホームページ)
=====================================-->
<html>
<head>
    <meta charset="utf-8">

     <meta name="viewport"
          content="width=device-width,initial-scale=1">
          
    <title>演習ー2</title> 
     <link rel="stylesheet" 
          href="../common-css/frame-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/module-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/decoration-style-sheet.css">
</head>
<body>
<!--====================================
 ↓↓↓ ヘッダーブロック 始まり ↓↓↓
=====================================--> 
<header>
<!--====================================
      メインタイトル
=====================================--> 
<div class="f-main-title">
    <h1>
        <span>HTML/CSS初心者の為の</span>
        <span>演習-2</span>
        <SPAN>(複数ページの</SPAN>
        <SPAN>ホームページ)</SPAN>
    </h1>
</div>
<!--====================================
      メインナビゲーション
=====================================--> 
<nav class="f-main-navi">
    <ul class="f-main-navi-list">
        <li class="f-main-navi-item">
          <a href="../01-top/index.html">
            トップ</a></li>
       <li class="current f-main-navi-item">
            <a href="../02-gallery/gallery-00-mokuji.html">
            名山ギャラリー</a></li>
        <li class="f-main-navi-item">
            <a href="../03-osusume/osusume-00-mokuji.html">
            お勧めの山</a></li>
        <li class="f-main-navi-item">
            <a href="../04-zakki/zakki-00-mokuji.html">
            山歩き雑記</a></li>
        <li class="f-main-navi-item">
            <a href="../05-toiawase/toiawase.html">
            お問い合わせ</a></li>  
    </ul>
</nav>
<!--====================================
 ↑↑↑ ヘッダーブロック 終わり ↑↑↑
=====================================--> 
</header>
        
ワンポイント

current(css登録済)
訪問中のページのnavi色を変える。

  
2.目次と項目ー1から項目ー5の削除

目次と項目ー1から項目ー5までについて、サブタイトル、文章の表示、画面表示、トップに戻るボタンを含めて、skeleton.htmlから削除します。すなわち、<main>から</main>までのコードの内、ページのタイトルだけを残して削除します。

  
3.フッターナビゲーションの変更

フッターナビゲーションの変更を行います。backボタンが要らない場合、nextボタンが要らない場合の対応を行っています。また、新たにbackボタン、pagetopボタン、nextボタンの飛び先の説明を加えました。

画像

画像

画像

フッターナビゲーションのコードを変更します。CSSファイル(frame-style-sheet.css)のコードは、「ボタン(back/home/next)」全体を置換えてください。新たに、back、home、nextの説明を追加しました。

HTMLファイル(skeleton.html)のコードも、「ボタン(back/home/next)」全体を置換えてください。新たに、back、home、nextの説明を追加しました。

このコードは、「名山ギャラリーの目次」のフッターナビゲーションをサンプルとしています。

【CSSファイル】
CSSコード(frame-style-sheet.css)
/*--====================================
 ボタン(back/home/next)
--====================================*/
.f-bottom-navi-box{
  margin: 0 auto;
  width:385px;
  height:30px;
}
.f-bottom-button {
  overflow: hidden;
  width: 85px;
  height: 30px;
  padding: 0;
  margin: 0 20px;
  border-radius: 5px;
  display: inline-block;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28); 
}
.f-bottom-button a {
  display: block;
  position: relative;
  z-index: 100;
  background: darkblue;
  color: #fff;
  font-size: 16px;
  line-height: 30px;
  text-decoration:none;
}
.f-bottom-button a:hover {
  color:skyblue;
}
.f-icon-back a:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 0;
  height: 0;
  margin-top: -7px;
  border: 7px solid transparent;        
  /*top right bottom を透明化 */ 
  border-right: 7px solid white;
}
.f-icon-next a:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 60px;
  width: 0;
  height: 0;
  margin-top: -7px;
  border: 7px solid transparent;        
  /*top right bottom を透明化  */
  border-left: 7px solid white;
}
/*--====================================
 説明(back/home/next)
--====================================*/
.f-explain-waku{
  display: table;
  width: 380px;
  height: 30px;
  margin: 0 auto;
}
.f-explain-box{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-size: 0.7em;
  font-weight: bold;
  padding: 0px 10px 0px 0px;
}
.f-explain-back{
  color:black;
  width:33%;
}
.f-explain-home{
  color:black;
  width:33%;
}
.f-explain-next{
  color:black;
  width:33%;
}
        
ワンポイント

バックボタン、ページトップボタン、ネクストボタンに飛び先の説明を追加しました。

【HTMLファイル】
HTMLコード(skeleton.html)
<!--====================================
   ボタン(back、home、next)  
=====================================-->
<div class="f-bottom-navi-box">

           <!-- バックボタン消える -->
    <!-- <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;
                visibility: hidden;">
        <a href="../01-top/index.html"> back</a>
    </div> -->

           <!-- バックボタン現れる -->
    <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;">
        <a href="../01-top/index.html"> back</a>
    </div>

    <div class="f-bottom-button f-radius5" 
         style="text-align: center;">
        <a href="#">pagetop</a>
    </div>

            <!-- ネクストボタン消える -->
    <!-- <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;
                visibility: hidden;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>      
    </div> -->

            <!-- ネクストボタン現れる -->
    <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>   
    </div>

</div>
<!--====================================
   説明(back、home、next)  
=====================================-->
<div class="f-explain-waku">

            <!-- バックボタン説明消える -->
    <!-- <div class="f-explain-box f-explain-back"
         style="visibility:hidden;">
        <p>トップ<br>ホームページの紹介</p>
    </div> -->

            <!-- バックボタン説明表れる -->
    <div class="f-explain-box f-explain-back">
        <p>トップ<br>ホームページの紹介</p>
    </div>

    <div class="f-explain-box f-explain-home">
        <p>名山ギャラリー</p>
    </div> 

             <!-- ネクストボタン説明消える -->
    <!-- <div class="f-explain-box f-explain-next"
         style="visibility:hidden;">
        <p>お勧めの山</p>
    </div> -->

             <!-- ネクストボタン説明現れる -->
    <div class="f-explain-box f-explain-next">
        <p>お勧めの山</p>
    </div>

</div>
        
ワンポイント

バックボタンが要らない場合のためにバックボタンとバックボタンの説明を表示するコードと表示しないコードを用意しました。どちらかをコメントアウトで無効にしています。ネクストボタンも同様です。

  
4.改良したskeletonと frame-style-sheet.cssのコード

a.骨組みHTML(skeleton.html)

HTMLコード(skeleton.html)
<!DOCTYPE html>
<!--====================================
     演習-2(複数ページのホームページ)
=====================================-->
<html>
<head>
    <meta charset="utf-8">

     <meta name="viewport"
           content="width=device-width,initial-scale=1">
          
    <title>演習ー2</title> 
     <link rel="stylesheet" 
          href="../common-css/frame-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/module-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/decoration-style-sheet.css">
</head>
<body>
<!--====================================
 ↓↓↓ ヘッダーブロック 始まり ↓↓↓
=====================================--> 
<header>
<!--====================================
      メインタイトル
=====================================--> 
<div class="f-main-title">
    <h1>
        <span>HTML/CSS初心者の為の</span>
        <span>演習-2</span>
        <SPAN>(複数ページの</SPAN>
        <SPAN>ホームページ)</SPAN>
    </h1>
</div>
<!--====================================
      メインナビゲーション
=====================================--> 
<nav class="f-main-navi">
    <ul class="f-main-navi-list">
        <li class="f-main-navi-item">
          <a href="../01-top/index.html">
            トップ</a></li>
       <li class="current f-main-navi-item">
            <a href="../02-gallery/gallery-00-mokuji.html">
            名山ギャラリー</a></li>
        <li class="f-main-navi-item">
            <a href="../03-osusume/osusume-00-mokuji.html">
            お勧めの山</a></li>
        <li class="f-main-navi-item">
            <a href="../04-zakki/zakki-00-mokuji.html">
            山歩き雑記</a></li>
        <li class="f-main-navi-item">
            <a href="../05-toiawase/toiawase.html">
            お問い合わせ</a></li>  
    </ul>
</nav>
<!--====================================
 ↑↑↑ ヘッダーブロック 終わり ↑↑↑
=====================================--> 
</header>
<!--====================================
 ↓↓↓ メインブロック 始まり ↓↓↓
=====================================--> 
<main>
<!--====================================
       ページのタイトル
=====================================-->
<div class="f-page-title">    <!-- 影付き -->
        1.内容ー1のタイトル
</div>
<!--====================================
 ↑↑↑ メインブロック 終わり ↑↑↑
=====================================--> 
</main> 
<!--====================================
 ↓↓↓ フッターブロック 始まり ↓↓↓ 
=====================================--> 
<footer>
<!--====================================
   改行 10em  
=====================================-->
<div class="d-kaigyo-10">
</div>  
<!--====================================
   ボタン(back、home、next)  
=====================================-->
<div class="f-bottom-navi-box">

           <!-- バックボタン消える -->
    <!-- <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;
                visibility: hidden;">
        <a href="../01-top/index.html"> back</a>
    </div> -->

           <!-- バックボタン現れる -->
    <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;">
        <a href="../01-top/index.html"> back</a>
    </div>

    <div class="f-bottom-button f-radius5" 
         style="text-align: center;">
        <a href="#">pagetop</a>
    </div>

            <!-- ネクストボタン消える -->
    <!-- <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;
                visibility: hidden;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>      
    </div> -->

            <!-- ネクストボタン現れる -->
    <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>   
    </div>

</div>
<!--====================================
   説明(back、home、next)  
=====================================-->
<div class="f-explain-waku">

            <!-- バックボタン説明消える -->
    <!-- <div class="f-explain-box f-explain-back"
         style="visibility:hidden;">
        <p>トップ<br>ホームページの紹介</p>
    </div> -->

            <!-- バックボタン説明表れる -->
    <div class="f-explain-box f-explain-back">
        <p>トップ<br>ホームページの紹介</p>
    </div>

    <div class="f-explain-box f-explain-home">
        <p>名山ギャラリー</p>
    </div> 

             <!-- ネクストボタン説明消える -->
    <!-- <div class="f-explain-box f-explain-next"
         style="visibility:hidden;">
        <p>お勧めの山</p>
    </div> -->

             <!-- ネクストボタン説明現れる -->
    <div class="f-explain-box f-explain-next">
        <p>お勧めの山</p>
    </div>

</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
       フッター  
=====================================--> 
<div class="d-center">
    <small>
          Copyright (c)  無料で挫折させない
          ホームページ作成講座
           All Rights Reserved.
    </small>
</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
 ↑↑↑ フッターブロック 終わり ↑↑↑
=====================================--> 
</footer>
</body>
</html>
            

b.枠組みCSS(frame-style-sheet.css)

CSSコード(frame-style-sheet.css)
@charset "utf-8";
/*--====================================
  共通CSS(枠組みCSS)
   frame-style-sheet.css
--====================================*/
html {
   background-color: lightgray;  
      /*周囲の背景色 薄い灰色#e8e8e8*/ 
}
/*--====================================
      BODY(共通設定) 
--====================================*/
body {
   width: 800px; 
      /*ページの幅 800px*/
   max-width: 800px; 
      /*ページの幅 800px以上に広がらない*/
   width: 100%; 
      /*ページの幅 画面に応じて縮小する*/
   min-height: 100vh;
      /*ページの最小の高さ*/
   margin: 0 auto; 
      /*上下外部余白:0、中央寄せ*/
   padding: 0; 
      /*内部余白:0*/
   background-color: white; 
      /*ページの背景色 白*/
   word-break:break-all;
      /*文章の改行に規則適用せず*/
   font-family: "游ゴシック", "YuGothic", "メイリオ", 
      meiryo, sans-serif;
      /*フォントの適用順位を指定*/
}
/*--====================================
      メインタイトル 
--====================================*/
.f-main-title {
  background: lightcyan;
  height: auto;
  text-align: center; 
  padding-top: 40px;
  padding-bottom: 40px;
}
.f-main-title h1{
  font-weight: bold;
  letter-spacing: 0.05em;
  color:midnightblue;
  font-size: 0;
}
.f-main-title h1 span{
  display: inline-block;
  font-size: 34px;
}
/*--====================================
      メインナビゲーション 
--====================================*/
.f-main-navi {
  font-size: 18px;
  font-weight: bold;
  width: auto; /*ページ幅一杯に広げる*/
  background-color: darkblue; /*ナビゲーションの背景色*/
}
.f-main-navi-list {
  margin: 0;
  padding: 0;
  text-align: center;
}
.f-main-navi-item {
  display: inline-block; /*横に並べる*/
  padding: 10px 20px; /*上下余白:10px、左右余白:20px*/
  color: white;
}
a:link {
color:white;
text-decoration:none;
}
a:visited {
color:white;
text-decoration:none;
}
a:hover {
color:skyblue;
font-weight:bold;
}
a:active {
color:cyan;
}
/*--====================================
 訪問中のページのnavi色をgoldに変える
--====================================*/
.current a{
color:gold;
}
/*--====================================
   ページのタイトル  影付き
--====================================*/
.f-page-title{ 
  font-size: 30px;
  color: darkblue;
  text-shadow: 3px 3px 5px #aaa;
  text-align: center;
  font-weight: bold;
  padding-top: 40px;
}
/*--====================================
     目    次
--====================================*/
/*目次ボックス*/
.f-mokuji{
  height: auto;
  margin:  40px auto 40px auto;   
  padding: 0PX 20px 20px 20px;
  border: solid 1px gray;
  background-color: ivory;
}
/*目次タイトル*/
.f-mokuji .f-mokuji-title{
  font-size: 24px;
  text-align: center;
  color: black;
}
/*目次 a*/
.f-mokuji a{
  font-size: 18px;
  line-height: 22px;
  font-weight: bold;
  color: black; 
}
/*--====================================
   サブタイトル
--====================================*/
.f-sub-title {
  font-size: 20px;
  font-weight: bold;
  margin-top: 10px;
  margin-left: 5%;
  margin-right: 5%;
  padding-right: 2%;
  padding-left: 2%;
  background: lightcyan;
  border-left: solid 8px pink;
  border-bottom: solid 5px lightgray;
}
/*--====================================
   サブコンテンツ
--====================================*/
.f-sub-contents {
  font-weight: bold; 
  padding-right: 8%;
  padding-left: 8%;
}
/*--====================================
       画像タイトル
--====================================*/
.f-image-title{
  font-size: 20px;
  line-height: 0px;
  padding-top: 20px;
  padding-bottom: 0px;
  font-weight: bold;
  text-align: center;
}
/*--====================================
   ボタン(TOPに戻る)
--====================================*/    
.f-navi-top-box{
  width:500px;
    height:30px;
    border:solid 1px gray;
}
.f-navi-top-button {
  overflow: hidden;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 10px 40
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.28); 
}
.f-navi-top-button a {
  display: block;
  position: relative;
  z-index: 100;
  background: lightcyan;
  color: white;
  font-size: 18px;
  line-height: 30px;
  text-decoration:none;
}
.f-navi-top-button a:hover {
  background-color:skyblue;
}
.f-icon-top a:before {
  display: block;
  content: "";
  position: absolute;
  top: 18%;
  left: 8px;
  width: 0;
  height: 0;
  margin-top: -7px;
  border: 7px solid transparent;        
     /*top right bottom を透明化 */ 
  border-bottom: 7px solid darkblue;
}
/*--====================================
 ボタン(back/home/next)
--====================================*/
.f-bottom-navi-box{
  margin: 0 auto;
  width:385px;
  height:30px;
}
.f-bottom-button {
  overflow: hidden;
  width: 85px;
  height: 30px;
  padding: 0;
  margin: 0 20px;
  border-radius: 5px;
  display: inline-block;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28); 
}
.f-bottom-button a {
  display: block;
  position: relative;
  z-index: 100;
  background: darkblue;
  color: #fff;
  font-size: 16px;
  line-height: 30px;
  text-decoration:none;
}
.f-bottom-button a:hover {
  color:skyblue;
}
.f-icon-back a:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 0;
  height: 0;
  margin-top: -7px;
  border: 7px solid transparent;        /*top right bottom を透明化 */ 
  border-right: 7px solid white;
}
.f-icon-next a:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 60px;
  width: 0;
  height: 0;
  margin-top: -7px;
  border: 7px solid transparent;        /*top right bottom を透明化  */
  border-left: 7px solid white;
}
/*--====================================
 説明(back/home/next)
--====================================*/
.f-explain-waku{
  display: table;
  width: 380px;
  height: 30px;
  margin: 0 auto;
}
.f-explain-box{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-size: 0.7em;
  font-weight: bold;
  padding: 0px 10px 0px 0px;
}
.f-explain-back{
  color:black;
  width:33%;
}
.f-explain-home{
  color:black;
  width:33%;
}
.f-explain-next{
  color:black;
  width:33%;
}
    

c.改良した画面

画像

  
5.改良したskeletonファイルの 各ファイルへの置換え

改良したskeleton.htmlを下図に従って8個のHTMLファイルを置換えて下さい。   

画像

  
6.各ファイルのタイトルと フッターナビゲーションの変更

置換えを行った8個のHTMLファイルのタイトルとメインナビゲーションとフッターナビゲーションの変更を行います。[gallery-00-mokuji.html]の変更をサンプルとして提示するので、他の7個のHTMLファイルも同じ要領で変更して下さい。尚、サンプルページは、各々1個しか用意していないので、戻るボタン(back)と次へのボタン(next)は消して下さい。

画像

【gallery-00-mokuji.htmlファイルの変更(サンプル)】
HTMLコード(gallery-00-mokuji.html)
<!DOCTYPE html>
<!--====================================
     演習-2(名山ギャラリー)
=====================================-->
<html>
<head>
    <meta charset="utf-8">

     <meta name="viewport"
          content="width=device-width,initial-scale=1">
          
    <title>演習ー2(名山ギャラリー)</title> 
     <link rel="stylesheet" 
          href="../common-css/frame-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/module-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/decoration-style-sheet.css">
</head>
<body>
<!--====================================
 ↓↓↓ ヘッダーブロック 始まり ↓↓↓
=====================================--> 
<header>
<!--====================================
      メインタイトル
=====================================--> 
<div class="f-main-title">
    <h1>
       <span>HTML/CSS初心者の為の</span>
        <span>演習-2</span>
        <SPAN>(複数ページの</SPAN>
        <SPAN>ホームページ)</SPAN>
    </h1>
</div>

<!--====================================
      メインナビゲーション
=====================================--> 
<nav class="f-main-navi">
    <ul class="f-main-navi-list">
        <li class="f-main-navi-item">
          <a href="../01-top/index.html">
            トップ</a></li>
       <li class="current f-main-navi-item">
            <a href="../02-gallery/gallery-00-mokuji.html">
            名山ギャラリー</a></li>
        <li class="f-main-navi-item">
            <a href="../03-osusume/osusume-00-mokuji.html">
            お勧めの山</a></li>
        <li class="f-main-navi-item">
            <a href="../04-zakki/zakki-00-mokuji.html">
            山歩き雑記</a></li>
        <li class="f-main-navi-item">
            <a href="../05-toiawase/toiawase.html">
            お問い合わせ</a></li>  
    </ul>
</nav>
<!--====================================
 ↑↑↑ ヘッダーブロック 終わり ↑↑↑
=====================================--> 
</header>
<!--====================================
 ↓↓↓ メインブロック 始まり ↓↓↓
=====================================--> 
<main>
<!--====================================
       ページのタイトル
=====================================-->
<div class="f-page-title">    <!-- 影付き -->
        名山ギャラリー
</div>
<!--====================================
 ↑↑↑ メインブロック 終わり ↑↑↑
=====================================--> 
</main> 
<!--====================================
 ↓↓↓ フッターブロック 始まり ↓↓↓ 
=====================================--> 
<footer>
<!--====================================
   改行 10em  
=====================================-->
<div class="d-kaigyo-10">
</div>  
<!--====================================
   ボタン(back、home、next)  
=====================================-->
<div class="f-bottom-navi-box">

           <!-- バックボタン消える -->
    <!-- <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;
                visibility: hidden;">
        <a href="../01-top/index.html"> back</a>
    </div> -->

           <!-- バックボタン現れる -->
    <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;">
        <a href="../01-top/index.html"> back</a>
    </div>

    <div class="f-bottom-button f-radius5" 
         style="text-align: center;">
        <a href="#">pagetop</a>
    </div>

            <!-- ネクストボタン消える -->
    <!-- <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;
                visibility: hidden;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>      
    </div> -->

            <!-- ネクストボタン現れる -->
    <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>   
    </div>

</div>
<!--====================================
   説明(back、home、next)  
=====================================-->
<div class="f-explain-waku">

            <!-- バックボタン説明消える -->
    <!-- <div class="f-explain-box f-explain-back"
         style="visibility:hidden;">
        <p>トップ<br>ホームページの紹介</p>
    </div> -->

            <!-- バックボタン説明表れる -->
    <div class="f-explain-box f-explain-back">
        <p>トップ<br>ホームページの紹介</p>
    </div>

    <div class="f-explain-box f-explain-home">
        <p>名山ギャラリー</p>
    </div> 

             <!-- ネクストボタン説明消える -->
    <!-- <div class="f-explain-box f-explain-next"
         style="visibility:hidden;">
        <p>お勧めの山</p>
    </div> -->

             <!-- ネクストボタン説明現れる -->
    <div class="f-explain-box f-explain-next">
        <p>お勧めの山</p>
    </div>

</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
       フッター  
=====================================--> 
<div class="d-center">
    <small>
          Copyright (c)  無料で挫折させない
          ホームページ作成講座
           All Rights Reserved.
    </small>
</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
 ↑↑↑ フッターブロック 終わり ↑↑↑
=====================================--> 
</footer>
</body>
</html>
        
ワンポイント

タイトルの変更
(名山ギャラリー)と追加します。  

ワンポイント

current(css登録済)
訪問中のページのnavi色を変える。

7.各ファイルの変更後コード

改良したhtmlファイルは下記をクリックして下さい。

a.トップ(index.html)

HTMLコード(index.html)
<!DOCTYPE html>
<!--====================================
 演習-2(トップ ホームページの紹介)
=====================================-->
<html>
<head>
    <meta charset="utf-8">

     <meta name="viewport"
          content="width=device-width,initial-scale=1">
          
    <title>演習ー2(トップ ホームページの紹介)</title> 
     <link rel="stylesheet" 
          href="../common-css/frame-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/module-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/decoration-style-sheet.css">
</head>
<body>
<!--====================================
 ↓↓↓ ヘッダーブロック 始まり ↓↓↓
=====================================--> 
<header>
<!--====================================
      メインタイトル
=====================================--> 
<div class="f-main-title">
    <h1>
        <span>HTML/CSS初心者の為の</span>
        <span>演習-2</span>
        <SPAN>(複数ページの</SPAN>
        <SPAN>ホームページ)</SPAN>
    </h1>
</div>
<!--====================================
      メインナビゲーション
=====================================--> 
<nav class="f-main-navi">
    <ul class="f-main-navi-list">
        <li class="current f-main-navi-item">
          <a href="../01-top/index.html">
            トップ</a></li>
       <li class="f-main-navi-item">
            <a href="../02-gallery/gallery-00-mokuji.html">
            名山ギャラリー</a></li>
        <li class="f-main-navi-item">
            <a href="../03-osusume/osusume-00-mokuji.html">
            お勧めの山</a></li>
        <li class="f-main-navi-item">
            <a href="../04-zakki/zakki-00-mokuji.html">
            山歩き雑記</a></li>
        <li class="f-main-navi-item">
            <a href="../05-toiawase/toiawase.html">
            お問い合わせ</a></li>  
    </ul>
</nav>
<!--====================================
 ↑↑↑ ヘッダーブロック 終わり ↑↑↑
=====================================--> 
</header>
<!--====================================
 ↓↓↓ メインブロック 始まり ↓↓↓
=====================================--> 
<main>
<!--====================================
       ページのタイトル
=====================================-->
<div class="f-page-title">    <!-- 影付き -->
        トップ<br>ホームページの紹介
</div>
<!--====================================
 ↑↑↑ メインブロック 終わり ↑↑↑
=====================================--> 
</main> 
<!--====================================
 ↓↓↓ フッターブロック 始まり ↓↓↓ 
=====================================--> 
<footer>
<!--====================================
   改行 10em  
=====================================-->
<div class="d-kaigyo-10">
</div>  
<!--====================================
   ボタン(back、home、next)  
=====================================-->
<div class="f-bottom-navi-box">

           <!-- バックボタン消える -->
    <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;
                visibility: hidden;">
        <a href="../01-top/index.html"> back</a>
    </div>

           <!-- バックボタン現れる -->
    <!-- <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;">
        <a href="../01-top/index.html"> back</a>
    </div> -->

    <div class="f-bottom-button f-radius5" 
         style="text-align: center;">
        <a href="#">pagetop</a>
    </div>

            <!-- ネクストボタン消える -->
    <!-- <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;
                visibility: hidden;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>      
    </div> -->

            <!-- ネクストボタン現れる -->
    <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;">
        <a href="../02-gallery/gallery-00-mokuji.html"> next</a>   
    </div>

</div>
<!--====================================
   説明(back、home、next)  
=====================================-->
<div class="f-explain-waku">

            <!-- バックボタン説明消える -->
    <div class="f-explain-box f-explain-back"
         style="visibility:hidden;">
        <p>トップ<br>ホームページの紹介</p>
    </div>

            <!-- バックボタン説明表れる -->
    <!-- <div class="f-explain-box f-explain-back">
        <p>トップ<br>ホームページの紹介</p>
    </div> -->

    <div class="f-explain-box f-explain-home">
        <p>トップ<br>ホームページの紹介</p>
    </div> 

             <!-- ネクストボタン説明消える -->
    <!-- <div class="f-explain-box f-explain-next"
         style="visibility:hidden;">
        <p>お勧めの山</p>
    </div> -->

             <!-- ネクストボタン説明現れる -->
    <div class="f-explain-box f-explain-next">
        <p>名山ギャラリー</p>
    </div>

</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
       フッター  
=====================================--> 
<div class="d-center">
    <small>
          Copyright (c)  無料で挫折させない
          ホームページ作成講座
           All Rights Reserved.
    </small>
</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
 ↑↑↑ フッターブロック 終わり ↑↑↑
=====================================--> 
</footer>
</body>
</html>
            

b.名山ギャラリー(目次)(gallery-00-mokuji.html)

HTMLコード(gallery-00-mokuji.html)
<!DOCTYPE html>
<!--====================================
演習-2(名山ギャラリー)
=====================================-->
<html>
<head>
    <meta charset="utf-8">

     <meta name="viewport"
          content="width=device-width,initial-scale=1">
          
    <title>演習ー2(名山ギャラリー)</title> 
     <link rel="stylesheet" 
          href="../common-css/frame-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/module-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/decoration-style-sheet.css">
</head>
<body>
<!--====================================
 ↓↓↓ ヘッダーブロック 始まり ↓↓↓
=====================================--> 
<header>
<!--====================================
      メインタイトル
=====================================--> 
<div class="f-main-title">
    <h1>
       <span>HTML/CSS初心者の為の</span>
        <span>演習-2</span>
        <SPAN>(複数ページの</SPAN>
        <SPAN>ホームページ)</SPAN>
    </h1>
</div>

<!--====================================
      メインナビゲーション
=====================================--> 
<nav class="f-main-navi">
    <ul class="f-main-navi-list">
        <li class="f-main-navi-item">
          <a href="../01-top/index.html">
            トップ</a></li>
       <li class="current f-main-navi-item">
            <a href="../02-gallery/gallery-00-mokuji.html">
            名山ギャラリー</a></li>
        <li class="f-main-navi-item">
            <a href="../03-osusume/osusume-00-mokuji.html">
            お勧めの山</a></li>
        <li class="f-main-navi-item">
            <a href="../04-zakki/zakki-00-mokuji.html">
            山歩き雑記</a></li>
        <li class="f-main-navi-item">
            <a href="../05-toiawase/toiawase.html">
            お問い合わせ</a></li>  
    </ul>
</nav>
<!--====================================
 ↑↑↑ ヘッダーブロック 終わり ↑↑↑
=====================================--> 
</header>
<!--====================================
 ↓↓↓ メインブロック 始まり ↓↓↓
=====================================--> 
<main>
<!--====================================
       ページのタイトル
=====================================-->
<div class="f-page-title">    <!-- 影付き -->
        名山ギャラリー
</div>
<!--====================================
 ↑↑↑ メインブロック 終わり ↑↑↑
=====================================--> 
</main> 
<!--====================================
 ↓↓↓ フッターブロック 始まり ↓↓↓ 
=====================================--> 
<footer>
<!--====================================
   改行 10em  
=====================================-->
<div class="d-kaigyo-10">
</div>  
<!--====================================
   ボタン(back、home、next)  
=====================================-->
<div class="f-bottom-navi-box">

           <!-- バックボタン消える -->
    <!-- <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;
                visibility: hidden;">
        <a href="../01-top/index.html"> back</a>
    </div> -->

           <!-- バックボタン現れる -->
    <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;">
        <a href="../01-top/index.html"> back</a>
    </div>

    <div class="f-bottom-button f-radius5" 
         style="text-align: center;">
        <a href="#">pagetop</a>
    </div>

            <!-- ネクストボタン消える -->
    <!-- <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;
                visibility: hidden;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>      
    </div> -->

            <!-- ネクストボタン現れる -->
    <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>   
    </div>

</div>
<!--====================================
   説明(back、home、next)  
=====================================-->
<div class="f-explain-waku">

            <!-- バックボタン説明消える -->
    <!-- <div class="f-explain-box f-explain-back"
         style="visibility:hidden;">
        <p>トップ<br>ホームページの紹介</p>
    </div> -->

            <!-- バックボタン説明表れる -->
    <div class="f-explain-box f-explain-back">
        <p>トップ<br>ホームページの紹介</p>
    </div>

    <div class="f-explain-box f-explain-home">
        <p>名山ギャラリー</p>
    </div> 

             <!-- ネクストボタン説明消える -->
    <!-- <div class="f-explain-box f-explain-next"
         style="visibility:hidden;">
        <p>お勧めの山</p>
    </div> -->

             <!-- ネクストボタン説明現れる -->
    <div class="f-explain-box f-explain-next">
        <p>お勧めの山</p>
    </div>

</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
       フッター  
=====================================--> 
<div class="d-center">
    <small>
          Copyright (c)  無料で挫折させない
          ホームページ作成講座
           All Rights Reserved.
    </small>
</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
 ↑↑↑ フッターブロック 終わり ↑↑↑
=====================================--> 
</footer>
</body>
</html>
            

c.名山ギャラリー(サンプル1)(gallery-01-sample.html)

HTMLコード(gallery-01-sample.html)
<!DOCTYPE html>
<!--====================================
     演習-2(名山ギャラリー)
=====================================-->
<html>
<head>
    <meta charset="utf-8">

     <meta name="viewport"
          content="width=device-width,initial-scale=1">
          
    <title>演習ー2(名山ギャラリー)</title> 
     <link rel="stylesheet" 
          href="../common-css/frame-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/module-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/decoration-style-sheet.css">
</head>
<body>
<!--====================================
    ↓↓↓ ヘッダーブロック 始まり ↓↓↓
=====================================--> 
<header>
<!--====================================
      メインタイトル
=====================================--> 
<div class="f-main-title">
    <h1>
       <span>HTML/CSS初心者の為の</span>
        <span>演習-2</span>
        <SPAN>(複数ページの</SPAN>
        <SPAN>ホームページ)</SPAN>
    </h1>
</div>

<!--====================================
      メインナビゲーション
=====================================--> 
<nav class="f-main-navi">
    <ul class="f-main-navi-list">
        <li class="f-main-navi-item">
          <a href="../01-top/index.html">
            トップ</a></li>
       <li class="current f-main-navi-item">
            <a href="../02-gallery/gallery-00-mokuji.html">
            名山ギャラリー</a></li>
        <li class="f-main-navi-item">
            <a href="../03-osusume/osusume-00-mokuji.html">
            お勧めの山</a></li>
        <li class="f-main-navi-item">
            <a href="../04-zakki/zakki-00-mokuji.html">
            山歩き雑記</a></li>
        <li class="f-main-navi-item">
            <a href="../05-toiawase/toiawase.html">
            お問い合わせ</a></li>  
    </ul>
</nav>
<!--====================================
   ↑↑↑ ヘッダーブロック 終わり ↑↑↑
=====================================--> 
</header>
<!--====================================
 ↓↓↓ メインブロック 始まり ↓↓↓
=====================================--> 
<main>
<!--====================================
       ページのタイトル
=====================================-->
<div class="f-page-title">    <!-- 影付き -->
        <サンプル><br>
        1.日本一の富士山
</div>
<!--====================================
 ↑↑↑ メインブロック 終わり ↑↑↑
=====================================--> 
</main> 
<!--====================================
 ↓↓↓ フッターブロック 始まり ↓↓↓ 
=====================================--> 
<footer>
<!--====================================
   改行 10em  
=====================================-->
<div class="d-kaigyo-10">
</div>  
<!--====================================
   ボタン(back、home、next)  
=====================================-->
<div class="f-bottom-navi-box">

           <!-- バックボタン消える -->
    <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;
                visibility: hidden;">
        <a href="../01-top/index.html"> back</a>
    </div>

           <!-- バックボタン現れる -->
    <!-- <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;">
        <a href="../01-top/index.html"> back</a>
    </div> -->

    <div class="f-bottom-button f-radius5" 
         style="text-align: center;">
        <a href="#">pagetop</a>
    </div>

            <!-- ネクストボタン消える -->
    <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;
                visibility: hidden;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>      
    </div>

            <!-- ネクストボタン現れる -->
   <!--  <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>   
    </div> -->

</div>
<!--====================================
   説明(back、home、next)  
=====================================-->
<div class="f-explain-waku">

            <!-- バックボタン説明消える -->
    <div class="f-explain-box f-explain-back"
         style="visibility:hidden;">
        <p>トップ<br>ホームページの紹介</p>
    </div>

            <!-- バックボタン説明表れる -->
    <!-- <div class="f-explain-box f-explain-back">
        <p>トップ<br>ホームページの紹介</p>
    </div> -->

    <div class="f-explain-box f-explain-home">
        <p><サンプル><BR>
           1.日本一の富士山</p>
    </div> 

             <!-- ネクストボタン説明消える -->
    <div class="f-explain-box f-explain-next"
         style="visibility:hidden;">
        <p>お勧めの山</p>
    </div>

             <!-- ネクストボタン説明現れる -->
    <!-- <div class="f-explain-box f-explain-next">
        <p>お勧めの山</p>
    </div> -->

</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
       フッター  
=====================================--> 
<div class="d-center">
    <small>
          Copyright (c)  無料で挫折させない
          ホームページ作成講座
           All Rights Reserved.
    </small>
</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
 ↑↑↑ フッターブロック 終わり ↑↑↑
=====================================--> 
</footer>
</body>
</html>
            

d.お勧め(目次)(osusume-00-mokuji.html)

HTMLコード(osusume-00-mokuji.html)
<!DOCTYPE html>
<!--====================================
     演習-2(お勧めの山)
=====================================-->
<html>
<head>
    <meta charset="utf-8">

     <meta name="viewport"
          content="width=device-width,initial-scale=1">
          
    <title>演習ー2(お勧めの山)</title> 
     <link rel="stylesheet" 
          href="../common-css/frame-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/module-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/decoration-style-sheet.css">
</head>
<body>
<!--====================================
    ↓↓↓ ヘッダーブロック 始まり ↓↓↓
=====================================--> 
<header>
<!--====================================
      メインタイトル
=====================================--> 
<div class="f-main-title">
    <h1>
        <span>HTML/CSS初心者の為の</span>
        <span>演習-2</span>
        <SPAN>(複数ページの</SPAN>
        <SPAN>ホームページ)</SPAN>
    </h1>
</div>
<!--====================================
      メインナビゲーション
=====================================--> 
<nav class="f-main-navi">
    <ul class="f-main-navi-list">
        <li class="f-main-navi-item">
          <a href="../01-top/index.html">
            トップ</a></li>
       <li class="f-main-navi-item">
            <a href="../02-gallery/gallery-00-mokuji.html">
            名山ギャラリー</a></li>
        <li class="current f-main-navi-item">
            <a href="../03-osusume/osusume-00-mokuji.html">
            お勧めの山</a></li>
        <li class="f-main-navi-item">
            <a href="../04-zakki/zakki-00-mokuji.html">
            山歩き雑記</a></li>
        <li class="f-main-navi-item">
            <a href="../05-toiawase/toiawase.html">
            お問い合わせ</a></li>  
    </ul>
</nav>
<!--====================================
   ↑↑↑ ヘッダーブロック 終わり ↑↑↑
=====================================--> 
</header>
<!--====================================
 ↓↓↓ メインブロック 始まり ↓↓↓
=====================================--> 
<main>
<!--====================================
       ページのタイトル
=====================================-->
<div class="f-page-title">    <!-- 影付き -->
        お勧めの山
</div>
<!--====================================
 ↑↑↑ メインブロック 終わり ↑↑↑
=====================================--> 
</main> 
<!--====================================
 ↓↓↓ フッターブロック 始まり ↓↓↓ 
=====================================--> 
<footer>
<!--====================================
   改行 10em  
=====================================-->
<div class="d-kaigyo-10">
</div>  
<!--====================================
   ボタン(back、home、next)  
=====================================-->
<div class="f-bottom-navi-box">

           <!-- バックボタン消える -->
    <!-- <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;
                visibility: hidden;">
        <a href="../01-top/index.html"> back</a>
    </div> -->

           <!-- バックボタン現れる -->
    <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;">
        <a href="../02-gallery/gallery-00-mokuji.html"> back</a>
    </div>

    <div class="f-bottom-button f-radius5" 
         style="text-align: center;">
        <a href="#">pagetop</a>
    </div>

            <!-- ネクストボタン消える -->
    <!-- <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;
                visibility: hidden;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>      
    </div> -->

            <!-- ネクストボタン現れる -->
    <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;">
        <a href="../04-zakki/zakki-00-mokuji.html"> next</a>   
    </div>

</div>
<!--====================================
   説明(back、home、next)  
=====================================-->
<div class="f-explain-waku">

            <!-- バックボタン説明消える -->
    <!-- <div class="f-explain-box f-explain-back"
         style="visibility:hidden;">
        <p>トップ<br>ホームページの紹介</p>
    </div> -->

            <!-- バックボタン説明表れる -->
    <div class="f-explain-box f-explain-back">
        <p>名山ギャラリー</p>
    </div>

    <div class="f-explain-box f-explain-home">
        <p>お勧めの山</p>
    </div> 

             <!-- ネクストボタン説明消える -->
    <!-- <div class="f-explain-box f-explain-next"
         style="visibility:hidden;">
        <p>お勧めの山</p>
    </div> -->

             <!-- ネクストボタン説明現れる -->
    <div class="f-explain-box f-explain-next">
        <p>山歩き雑記</p>
    </div>

</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
       フッター  
=====================================--> 
<div class="d-center">
    <small>
          Copyright (c)  無料で挫折させない
          ホームページ作成講座
           All Rights Reserved.
    </small>
</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
 ↑↑↑ フッターブロック 終わり ↑↑↑
=====================================--> 
</footer>
</body>
</html>
           

e.お勧め(サンプル1)(osusume-01-sample.html)

HTMLコード(osusume-01-sample.html)
<!DOCTYPE html>
<!--====================================
     演習-2(<サンプル>お勧めの山)
=====================================-->
<html>
<head>
    <meta charset="utf-8">

     <meta name="viewport"
          content="width=device-width,initial-scale=1">
          
    <title>演習ー2(<サンプル>お勧めの山)</title> 
     <link rel="stylesheet" 
          href="../common-css/frame-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/module-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/decoration-style-sheet.css">
</head>
<body>
<!--====================================
    ↓↓↓ ヘッダーブロック 始まり ↓↓↓
=====================================--> 
<header>
<!--====================================
      メインタイトル
=====================================--> 
<div class="f-main-title">
    <h1>
        <span>HTML/CSS初心者の為の</span>
        <span>演習-2</span>
        <SPAN>(複数ページの</SPAN>
        <SPAN>ホームページ)</SPAN>
    </h1>
</div>
<!--====================================
      メインナビゲーション
=====================================--> 
<nav class="f-main-navi">
    <ul class="f-main-navi-list">
        <li class="f-main-navi-item">
          <a href="../01-top/index.html">
            トップ</a></li>
       <li class="f-main-navi-item">
            <a href="../02-gallery/gallery-00-mokuji.html">
            名山ギャラリー</a></li>
        <li class="current f-main-navi-item">
            <a href="../03-osusume/osusume-00-mokuji.html">
            お勧めの山</a></li>
        <li class="f-main-navi-item">
            <a href="../04-zakki/zakki-00-mokuji.html">
            山歩き雑記</a></li>
        <li class="f-main-navi-item">
            <a href="../05-toiawase/toiawase.html">
            お問い合わせ</a></li>  
    </ul>
</nav>
<!--====================================
   ↑↑↑ ヘッダーブロック 終わり ↑↑↑
=====================================--> 
</header>
<!--====================================
 ↓↓↓ メインブロック 始まり ↓↓↓
=====================================--> 
<main>
<!--====================================
       ページのタイトル
=====================================-->
<div class="f-page-title">    <!-- 影付き -->
        <サンプル><br>
         1.心に残った丹沢山から見えた富士山
</div>
<!--====================================
 ↑↑↑ メインブロック 終わり ↑↑↑
=====================================--> 
</main> 
<!--====================================
 ↓↓↓ フッターブロック 始まり ↓↓↓ 
=====================================--> 
<footer>
<!--====================================
   改行 10em  
=====================================-->
<div class="d-kaigyo-10">
</div>  
<!--====================================
   ボタン(back、home、next)  
=====================================-->
<div class="f-bottom-navi-box">

           <!-- バックボタン消える -->
    <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;
                visibility: hidden;">
        <a href="../01-top/index.html"> back</a>
    </div>

           <!-- バックボタン現れる -->
    <!-- <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;">
        <a href="../01-top/index.html"> back</a>
    </div> -->

    <div class="f-bottom-button f-radius5" 
         style="text-align: center;">
        <a href="#">pagetop</a>
    </div>

            <!-- ネクストボタン消える -->
    <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;
                visibility: hidden;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>      
    </div>

            <!-- ネクストボタン現れる -->
    <!-- <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>   
    </div> -->

</div>
<!--====================================
   説明(back、home、next)  
=====================================-->
<div class="f-explain-waku">

            <!-- バックボタン説明消える -->
    <div class="f-explain-box f-explain-back"
         style="visibility:hidden;">
        <p>トップ<br>ホームページの紹介</p>
    </div>

            <!-- バックボタン説明表れる -->
    <!-- <div class="f-explain-box f-explain-back">
        <p>トップ<br>ホームページの紹介</p>
    </div> -->

    <div class="f-explain-box f-explain-home">
         <p><サンプル><BR>
           1.心に残った丹沢山<BR>から見えた富士山</p>
    </div> 

             <!-- ネクストボタン説明消える -->
    <div class="f-explain-box f-explain-next"
         style="visibility:hidden;">
        <p>お勧めの山</p>
    </div>

             <!-- ネクストボタン説明現れる -->
    <!-- <div class="f-explain-box f-explain-next">
        <p>お勧めの山</p>
    </div> -->

</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
       フッター  
=====================================--> 
<div class="d-center">
    <small>
          Copyright (c)  無料で挫折させない
          ホームページ作成講座
           All Rights Reserved.
    </small>
</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
 ↑↑↑ フッターブロック 終わり ↑↑↑
=====================================--> 
</footer>
</body>
</html>
            

f.雑記(目次)(zakki-00-mokuji.html)

HTMLコード(zakki-00-mokuji.html)
<!DOCTYPE html>
<!--====================================
     演習-2(山歩き雑記)
=====================================-->
<html>
<head>
    <meta charset="utf-8">

     <meta name="viewport"
          content="width=device-width,initial-scale=1">
          
    <title>山歩き雑記</title> 
     <link rel="stylesheet" 
          href="../common-css/frame-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/module-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/decoration-style-sheet.css">
</head>
<body>
<!--====================================
    ↓↓↓ ヘッダーブロック 始まり ↓↓↓
=====================================--> 
<header>
<!--====================================
      メインタイトル
=====================================--> 
<div class="f-main-title">
    <h1>
        <span>HTML/CSS初心者の為の</span>
        <span>演習-2</span>
        <SPAN>(複数ページの</SPAN>
        <SPAN>ホームページ)</SPAN>
    </h1>
</div>
<!--====================================
      メインナビゲーション
=====================================--> 
<nav class="f-main-navi">
    <ul class="f-main-navi-list">
        <li class="f-main-navi-item">
          <a href="../01-top/index.html">
            トップ</a></li>
       <li class="f-main-navi-item">
            <a href="../02-gallery/gallery-00-mokuji.html">
            名山ギャラリー</a></li>
        <li class="f-main-navi-item">
            <a href="../03-osusume/osusume-00-mokuji.html">
            お勧めの山</a></li>
        <li class="current f-main-navi-item">
            <a href="../04-zakki/zakki-00-mokuji.html">
            山歩き雑記</a></li>
        <li class="f-main-navi-item">
            <a href="../05-toiawase/toiawase.html">
            お問い合わせ</a></li>  
    </ul>
</nav>
<!--====================================
   ↑↑↑ ヘッダーブロック 終わり ↑↑↑
=====================================--> 
</header>
<!--====================================
 ↓↓↓ メインブロック 始まり ↓↓↓
=====================================--> 
<main>
<!--====================================
       ページのタイトル
=====================================-->
<div class="f-page-title">    <!-- 影付き -->
        山歩き雑記
</div>
<!--====================================
 ↑↑↑ メインブロック 終わり ↑↑↑
=====================================--> 
</main> 
<!--====================================
 ↓↓↓ フッターブロック 始まり ↓↓↓ 
=====================================--> 
<footer>
<!--====================================
   改行 10em  
=====================================-->
<div class="d-kaigyo-10">
</div>  
<!--====================================
   ボタン(back、home、next)  
=====================================-->
<div class="f-bottom-navi-box">

           <!-- バックボタン消える -->
    <!-- <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;
                visibility: hidden;">
        <a href="../01-top/index.html"> back</a>
    </div> -->

           <!-- バックボタン現れる -->
    <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;">
        <a href="../03-osusume/osusume-00-mokuji.html"> back</a>
    </div>

    <div class="f-bottom-button f-radius5" 
         style="text-align: center;">
        <a href="#">pagetop</a>
    </div>

            <!-- ネクストボタン消える -->
    <!-- <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;
                visibility: hidden;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>      
    </div> -->

            <!-- ネクストボタン現れる -->
    <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;">
        <a href="../05-toiawase/toiawase.html"> next</a>   
    </div>

</div>
<!--====================================
   説明(back、home、next)  
=====================================-->
<div class="f-explain-waku">

            <!-- バックボタン説明消える -->
    <!-- <div class="f-explain-box f-explain-back"
         style="visibility:hidden;">
        <p>トップ<br>ホームページの紹介</p>
    </div> -->

            <!-- バックボタン説明表れる -->
    <div class="f-explain-box f-explain-back">
        <p>お勧めの山</p>
    </div>

    <div class="f-explain-box f-explain-home">
        <p>山歩き雑記</p>
    </div> 

             <!-- ネクストボタン説明消える -->
    <!-- <div class="f-explain-box f-explain-next"
         style="visibility:hidden;">
        <p>お勧めの山</p>
    </div> -->

             <!-- ネクストボタン説明現れる -->
    <div class="f-explain-box f-explain-next">
        <p>お問い合わせ</p>
    </div>

</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
       フッター  
=====================================--> 
<div class="d-center">
    <small>
          Copyright (c)  無料で挫折させない
          ホームページ作成講座
           All Rights Reserved.
    </small>
</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
 ↑↑↑ フッターブロック 終わり ↑↑↑
=====================================--> 
</footer>
</body>
</html>
            

g.雑記(サンプル1)(zakki-01-sample.html)

HTMLコード(zakki-01-sample.html)
<!DOCTYPE html>
<!--====================================
     演習-2(山歩き雑記)
=====================================-->
<html>
<head>
    <meta charset="utf-8">

     <meta name="viewport"
          content="width=device-width,initial-scale=1">
          
    <title>山歩き雑記</title> 
     <link rel="stylesheet" 
          href="../common-css/frame-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/module-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/decoration-style-sheet.css">
</head>
<body>
<!--====================================
    ↓↓↓ ヘッダーブロック 始まり ↓↓↓
=====================================--> 
<header>
<!--====================================
      メインタイトル
=====================================--> 
<div class="f-main-title">
    <h1>
        <span>HTML/CSS初心者の為の</span>
        <span>演習-2</span>
        <SPAN>(複数ページの</SPAN>
        <SPAN>ホームページ)</SPAN>
    </h1>
</div>
<!--====================================
      メインナビゲーション
=====================================--> 
<nav class="f-main-navi">
    <ul class="f-main-navi-list">
        <li class="f-main-navi-item">
          <a href="../01-top/index.html">
            トップ</a></li>
       <li class="f-main-navi-item">
            <a href="../02-gallery/gallery-00-mokuji.html">
            名山ギャラリー</a></li>
        <li class="f-main-navi-item">
            <a href="../03-osusume/osusume-00-mokuji.html">
            お勧めの山</a></li>
        <li class="current f-main-navi-item">
            <a href="../04-zakki/zakki-00-mokuji.html">
            山歩き雑記</a></li>
        <li class="f-main-navi-item">
            <a href="../05-toiawase/toiawase.html">
            お問い合わせ</a></li>  
    </ul>
</nav>
<!--====================================
   ↑↑↑ ヘッダーブロック 終わり ↑↑↑
=====================================--> 
</header>
<!--====================================
 ↓↓↓ メインブロック 始まり ↓↓↓
=====================================--> 
<main>
<!--====================================
       ページのタイトル
=====================================-->
<div class="f-page-title">    <!-- 影付き -->
        <サンプル><br>
        1.丹沢での遭難事故は何故起こるか
</div>
<!--====================================
 ↑↑↑ メインブロック 終わり ↑↑↑
=====================================--> 
</main> 
<!--====================================
 ↓↓↓ フッターブロック 始まり ↓↓↓ 
=====================================--> 
<footer>
<!--====================================
   改行 10em  
=====================================-->
<div class="d-kaigyo-10">
</div>  
<!--====================================
   ボタン(back、home、next)  
=====================================-->
<div class="f-bottom-navi-box">

           <!-- バックボタン消える -->
    <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;
                visibility: hidden;">
        <a href="../01-top/index.html"> back</a>
    </div>

           <!-- バックボタン現れる -->
   <!--  <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;">
        <a href="../03-osusume/osusume-00-mokuji.html"> back</a>
    </div> -->

    <div class="f-bottom-button f-radius5" 
         style="text-align: center;">
        <a href="#">pagetop</a>
    </div>

            <!-- ネクストボタン消える -->
    <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;
                visibility: hidden;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>      
    </div>

            <!-- ネクストボタン現れる -->
    <!-- <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;">
        <a href="../05-toiawase/toiawase.html"> next</a>   
    </div> -->

</div>
<!--====================================
   説明(back、home、next)  
=====================================-->
<div class="f-explain-waku">

            <!-- バックボタン説明消える -->
    <div class="f-explain-box f-explain-back"
         style="visibility:hidden;">
        <p>山歩き雑記</p>
    </div>

            <!-- バックボタン説明表れる -->
   <!--  <div class="f-explain-box f-explain-back">
        <p>お勧めの山</p>
    </div> -->

    <div class="f-explain-box f-explain-home">
         <p><サンプル><BR>
          1.丹沢山での遭難<BR>事故は何故起こるか</p>
    </div> 

             <!-- ネクストボタン説明消える -->
    <div class="f-explain-box f-explain-next"
         style="visibility:hidden;">
        <p>山歩き雑記</p>
    </div>

             <!-- ネクストボタン説明現れる -->
   <!--  <div class="f-explain-box f-explain-next">
        <p>問合せ</p>
    </div> -->

</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
       フッター  
=====================================--> 
<div class="d-center">
    <small>
          Copyright (c)  無料で挫折させない
          ホームページ作成講座
           All Rights Reserved.
    </small>
</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
 ↑↑↑ フッターブロック 終わり ↑↑↑
=====================================--> 
</footer>
</body>
</html>
            

h.問合せ(toiawase.html)

HTMLコード(toiawase.html)
<!DOCTYPE html>
<!--====================================
     演習-2(お問い合わせ)
=====================================-->
<html>
<head>
    <meta charset="utf-8">

     <meta name="viewport"
          content="width=device-width,initial-scale=1">
          
    <title>演習ー2(お問い合わせ)</title> 
     <link rel="stylesheet" 
          href="../common-css/frame-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/module-style-sheet.css">
    <link rel="stylesheet" 
          href="../common-css/decoration-style-sheet.css">
</head>
<body>
<!--====================================
    ↓↓↓ ヘッダーブロック 始まり ↓↓↓
=====================================--> 
<header>
<!--====================================
      メインタイトル
=====================================--> 
<div class="f-main-title">
    <h1>
        <span>HTML/CSS初心者の為の</span>
        <span>演習-2</span>
        <SPAN>(複数ページの</SPAN>
        <SPAN>ホームページ)</SPAN>
    </h1>
</div>
<!--====================================
      メインナビゲーション
=====================================--> 
<nav class="f-main-navi">
    <ul class="f-main-navi-list">
        <li class="f-main-navi-item">
          <a href="../01-top/index.html">
            トップ</a></li>
       <li class="f-main-navi-item">
            <a href="../02-gallery/gallery-00-mokuji.html">
            名山ギャラリー</a></li>
        <li class="f-main-navi-item">
            <a href="../03-osusume/osusume-00-mokuji.html">
            お勧めの山</a></li>
        <li class="f-main-navi-item">
            <a href="../04-zakki/zakki-00-mokuji.html">
            山歩き雑記</a></li>
        <li class="current f-main-navi-item">
            <a href="../05-toiawase/toiawase.html">
            お問い合わせ</a></li>  
    </ul>
</nav>
<!--====================================
   ↑↑↑ ヘッダーブロック 終わり ↑↑↑
=====================================--> 
</header>
<!--====================================
 ↓↓↓ メインブロック 始まり ↓↓↓
=====================================--> 
<main>
<!--====================================
       ページのタイトル
=====================================-->
<div class="f-page-title">    <!-- 影付き -->
        お問い合わせ
</div>
<!--====================================
 ↑↑↑ メインブロック 終わり ↑↑↑
=====================================--> 
</main> 
<!--====================================
 ↓↓↓ フッターブロック 始まり ↓↓↓ 
=====================================--> 
<footer>
<!--====================================
   改行 10em  
=====================================-->
<div class="d-kaigyo-10">
</div>  
<!--====================================
   ボタン(back、home、next)  
=====================================-->
<div class="f-bottom-navi-box">

           <!-- バックボタン消える -->
    <!-- <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;
                visibility: hidden;">
        <a href="../01-top/index.html"> back</a>
    </div> -->

           <!-- バックボタン現れる -->
    <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;">
        <a href="../04-zakki/zakki-00-mokuji.html"> back</a>
    </div>

    <div class="f-bottom-button f-radius5" 
         style="text-align: center;">
        <a href="#">pagetop</a>
    </div>

            <!-- ネクストボタン消える -->
    <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;
                visibility: hidden;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>      
    </div>

            <!-- ネクストボタン現れる -->
   <!--  <div class="f-bottom-button  f-radius5  
                f-icon-next" 
         style="text-align: left;">
        <a href="../03-osusume/osusume-00-mokuji.html"> next</a>   
    </div> -->

</div>
<!--====================================
   説明(back、home、next)  
=====================================-->
<div class="f-explain-waku">

            <!-- バックボタン説明消える -->
    <!-- <div class="f-explain-box f-explain-back"
         style="visibility:hidden;">
        <p>トップ<br>ホームページの紹介</p>
    </div> -->

            <!-- バックボタン説明表れる -->
    <div class="f-explain-box f-explain-back">
        <p>山歩き雑記</p>
    </div>

    <div class="f-explain-box f-explain-home">
        <p>お問い合わせ</p>
    </div> 

             <!-- ネクストボタン説明消える -->
    <div class="f-explain-box f-explain-next"
         style="visibility:hidden;">
        <p>お勧めの山</p>
    </div>

             <!-- ネクストボタン説明現れる -->
    <!-- <div class="f-explain-box f-explain-next">
        <p>お勧めの山</p>
    </div> -->

</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
       フッター  
=====================================--> 
<div class="d-center">
    <small>
          Copyright (c)  無料で挫折させない
          ホームページ作成講座
           All Rights Reserved.
    </small>
</div>
<!--====================================
   改行 5em  
=====================================-->
<div class="d-kaigyo-5">
</div>  
<!--====================================
 ↑↑↑ フッターブロック 終わり ↑↑↑
=====================================--> 
</footer>
</body>
</html>
            
 back
pagetop
 next

サイト構成と
ファイル名の決定

演習1で作成した
skeletonファイル
の改良

トップページの作成

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken