ga-07-09

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

<演習2>
「山歩き雑記」目次ページの作成

目   次

1.「山歩き雑記」
  目次ページの完成画面の画像

2.HTMLコードの修正

3.CSSコードの修正

4.完成画面と完成コード



1.「山歩き雑記」目次ページの完成画面の画像

これは、「山歩き雑記」目次ページの完成画面の画像です。ボタンを押してもジャンプしません。

画像

  
2.HTMLコード( zakki-00-mokuji.html)の修正

zakki-00-mokuji.htmlについては、下記HTMLコードをページタイトルの下に追加してください。

【HTMLファイル】
HTMLコード(zakki-00-mokuji.html)
<!--====================================
        ページ目次
=====================================-->
<div class="f-mokuji"
     style="width: 420px;"> <!-- 目次の幅指定 --> 
    <h3 class="f-mokuji-title">
         目   次
    </h3>
<!--====================================
 1.丹沢での遭難事故は何故起こるか(サンプル)       
=====================================-->
    <a href="zakki-01-sample.html">
        <p><span style="color:black;">
         1.丹沢での遭難事故は何故起こるか(サンプル)</span>
        </p>
    </a>  

    <a href="#navi2">
      <p>2.        省略
      </p>
    </a>

    <a href="#navi3">
      <p>3.        省略   
      </p>
    </a>

    <a href="#navi4">
      <p>4.        省略     
      </p>
    </a>

    <a href="#navi5">
      <p>5.        省略 
      </p>
    </a>

</div>
        
  
3.CSSコードの修正

「山歩き雑記(目次)」では、CSSコードの修正はありません。

  
4. 完成画面と完成コード

1.完成画面

 完成画面は、 ここをクリックしてください。 この画面に戻るときは、ブラウザの戻るボタンを使ってください。

2.完成コード

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>
<!--====================================
        ページ目次
=====================================-->
<div class="f-mokuji"
     style="width: 420px;"> <!-- 目次の幅指定 --> 
    <h3 class="f-mokuji-title">
         目   次
    </h3>
<!--====================================
 1.丹沢での遭難事故は何故起こるか(サンプル)       
=====================================-->
    <a href="zakki-01-sample.html">
        <p><span style="color:black;">
         1.丹沢での遭難事故は何故起こるか(サンプル)</span>
        </p>
    </a>  

    <a href="#navi2">
      <p>2.        省略
      </p>
    </a>

    <a href="#navi3">
      <p>3.        省略   
      </p>
    </a>

    <a href="#navi4">
      <p>4.        省略     
      </p>
    </a>

    <a href="#navi5">
      <p>5.        省略 
      </p>
    </a>

</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>
            
 back
pagetop
 next

お勧めの山
サンプル作成

山歩き雑記
目次作成

山歩き雑記
サンプル作成

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