ga-07-02

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

<演習2>
2.サイト構成とファイル名の決定

目   次

1.演習2の構成(サンプル素材)

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

3.必要なファイルの準備



1.演習2の構成(サンプル素材)

山好きのホームページ作成をサンプル素材とします。

1.「トップ」ページ
このホームページで最も伝えたいことを書きます。また、興味を持ってもらうために各ページの要約を書きます。

2.「名山ギャラリー」ページ
これまで行って良かった山、これから是非行きたい山を写真ギャラリーという形で紹介します。

3.「お勧めの山」ページ
お勧めの山の紹介をします。

4.「山歩き雑記」ページ
山を歩いて感じたことを書きます。

5.「お問い合わせ」ページ
ご意見、ご質問を書ける「お問い合わせ」ページを設置します。

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

サンプル素材であげた5つの項目をフォルダー名にして、その配下にそれぞれのHTMLファイルを設置します。フォルダ名はフォルダの下の半角英数字を使ってください。下段の図は完成後のファイル関連図です。7個のフォルダーと3個のCSSファイルと9個のHTMLファイルを空ファイルで作成してください。

画像

「名山ギャラリー」と「お勧めの山」と「山歩き雑記」には目次ページを付けました。

  
3.必要なファイルの準備

CSSファイル(3個)とHTMLファイル(1個)と画像ファイル(10個)を準備します。CSSファイルとHTMLファイルは、コピー&ペーストで保存してください。画像ファイルは画像の上にカーソルをもってきて右クリックして「名前を付けて画像を保存」を選択してください。

CSSファイルは、「common-css」フォルダーに保存してください。

a1.枠組みCSS(frame-style-sheet.css)
このファイルは、「演習1」で完成したものです。

CSSコード(frame-style-sheet.css)
@charset "utf-8";
/*--====================================
  共通CSS(枠組みCSS)
   frame-style-sheet.css
--====================================*/
html {
   background-color: lightgray;  
      /*周囲の背景色 薄い灰色#e8e8e8*/ 
}
/*--====================================
      BODY(共通設定) 
--====================================*/
body {
   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;
}
/*--====================================
   ページのタイトル  影付き
--====================================*/
.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: 40%;
  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{
  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;
}
    

a2.部品CSS(module-style-sheet.css)

CSSコード(module-style-sheet.css)
@charset "utf-8";
/*--====================================
  共通CSS(部品CSS)
   module-style-sheet.css
--====================================*/
   
   
    

a3.装飾CSS(decoration-style-sheet.css)
このファイルは、「演習1」で使用したものです。

CSSコード(decoration-style-sheet.css)
/*--====================================
 デコレーション設定(decoration-style-sheet) 
--====================================*/
/*--====================================
        カラーの指定 
--====================================*/
.d-bg-red1 {background-color: #FFE4E1;}
.d-bg-red2 {background-color: #ffcccc;}
.d-bg-red3 {background-color: #ffb6c1;}
.d-bg-red4 {background-color: #ff99cc;}
.d-bg-red5 {background-color: #ff6699;}
.d-bg-red6 {background-color: #ff0000;}

.d-bg-green1 {background-color: #ccffcc;}
.d-bg-green2 {background-color: #90ee90;}
.d-bg-green3 {background-color: #32cd32;}
.d-bg-green4 {background-color: #3cb371;}
.d-bg-green5 {background-color: #008000;}
.d-bg-green6 {background-color: #006400;}

.d-bg-blue1 {background-color: #e0ffff;}
.d-bg-blue2 {background-color: #aeeeee;}
.d-bg-blue3 {background-color: #87ceeb;}
.d-bg-blue4 {background-color: #1e90ff;}
.d-bg-blue5 {background-color: #0066ff;}
.d-bg-blue6 {background-color: #191970;}

.d-bg-yellow1 {background-color: #ffffe0;}
.d-bg-yellow2 {background-color: #fffacd;}
.d-bg-yellow3 {background-color: #ffffbb;}
.d-bg-yellow4 {background-color: #ffff99;}
.d-bg-yellow5 {background-color: #ffff66;}
.d-bg-yellow6 {background-color: #ffff00;}

.d-bg-mono1 {background-color: #ffffff;}
.d-bg-mono2 {background-color: #e8e8e8;}
.d-bg-mono3 {background-color: #d0d0d0;}
.d-bg-mono4 {background-color: #a0a0a0;}
.d-bg-mono5 {background-color: #757575;}
.d-bg-mono6 {background-color: #000000;}

.d-bg-brown1 {background-color: #ffe4c4;}
.d-bg-brown2 {background-color: #ffd700;}
.d-bg-brown3 {background-color: #ff9900;}
.d-bg-brown4 {background-color: #d2691e;}
.d-bg-brown5 {background-color: #b22222;}
.d-bg-brown6 {background-color: #800000;}

.d-bg-mistyrose {background-color: mistyrose;}
.d-bg-pink {background-color: pink;}
.d-bg-red {background-color: red;}
.d-bg-lightyellow {background-color: lightyellow;}
.d-bg-yellow {background-color: yellow;}
.d-bg-gold {background-color: gold;}
.d-bg-orange {background-color: orange;}
.d-bg-tomato {background-color: tomato;}
.d-bg-lightgreen {background-color: lightgreen;}
.d-bg-green {background-color: green;}
.d-bg-darkgreen {background-color: darkgreen;}
.d-bg-lightcyan {background-color: lightcyan;}
.d-bg-lightblue {background-color: lightblue;}
.d-bg-deepskyblue {background-color: deepskyblue;}
.d-bg-blue {background-color: blue;}
.d-bg-darkblue {background-color: darkblue;}
.d-bg-white {background-color: white;}
.d-bg-whitesmoke {background-color: whitesmoke;}
.d-bg-lightgray {background-color: lightgray;}
.d-bg-gray {background-color: gray;}
.d-bg-black {background-color: black;}
.d-bg-paleturquoise {background-color: paleturquoise;}
.d-bg-aliceblue {background-color: aliceblue;}
.d-bg-ivory {background-color: ivory;}
.d-bg-blue1 {background-color: paleturquoise;}
.d-bg-blue2 {background-color: aliceblue;}
.d-bg-yellow1 {background-color: gold;}
.d-bg-yellow2 {background-color: ivory;}
/*--====================================
     文字色の設定 
--====================================*/
.d-mj-black { color: black; }
.d-mj-white { color: white; }
.d-mj-red { color: red; }
.d-mj-darkblue { color: darkblue; }
/*--====================================
     そのた便利な設定 
--====================================*/
.d-inline-block { display: inline-block;}
.d-bold { font-weight: bold; }
.d-center { text-align: center;}
.d-left { text-align: left;}
.d-display-none{display: none}
/*--====================================
  画像サイスの指定(20x~1000px)
--====================================*/
.d-img20 img {max-width: 20px;width: 90%;}
.d-img50 img {max-width: 50px;width: 90%;}
.d-img100 img {max-width: 100px;width: 90%;}
.d-img200 img {max-width: 200px;width: 90%;}
.d-img250 img {max-width: 250px;width: 90%;}
.d-img300 img {max-width: 300px;width: 90%;}
.d-img350 img {max-width: 350px;width: 90%;}
.d-img400 img {max-width: 400px;width: 90%;}
.d-img410 img {max-width: 410px;width: 90%;}
.d-img430 img {max-width: 430px;width: 90%;}
.d-img450 img {max-width: 450px;width: 90%;}
.d-img500 img {max-width: 500px;width: 90%;}
.d-img530 img {max-width: 530px;width: 90%;}
.d-img540 img {max-width: 540px;width: 90%;}
.d-img550 img {max-width: 550px;width: 90%;}
.d-img600 img {max-width: 600px;width: 90%;}
.d-img650 img {max-width: 650px;width: 90%;}
.d-img700 img {max-width: 700px;width: 90%;}
.d-img750 img {max-width: 750px;width: 90%;}
.d-img800 img {max-width: 800px;width: 90%;}
.d-img900 img {max-width: 900px;width: 90%;}
.d-img1000 img {max-width: 1000px;width: 90%;}
/*--====================================
         文字(テキスト)の装飾
          蛍光ペン
--====================================*/
.d-keikoupen{background:
    linear-gradient(transparent 70%,#ff99ab 70%);}
.d-keikoupen-red{background:
    linear-gradient(transparent 70%,#ff99ab 70%);}
.d-keikoupen-blue{background:
    linear-gradient(transparent 70%, #6cf 70%);}
.d-keikoupen-green{background:
    linear-gradient(transparent 70%, #6f6 70%);}
.d-keikoupen-yellow{background:
    linear-gradient(transparent 60%, yellow 60%);}
/*--====================================
         文字(テキスト)の装飾
        背景色を指定する
--====================================*/
.d-haikeishoku-yellow{background-color: yellow}
.d-haikeishoku-pink{background-color: pink}
.d-haikeishoku-cyan{background-color: cyan}
/*--====================================
   改行 1em ~ 20em
--====================================*/
.d-kaigyo-1{height: 1em;}
.d-kaigyo-2{height: 2em;}
.d-kaigyo-3{height: 3em;}
.d-kaigyo-4{height: 4em;}
.d-kaigyo-5{height: 5em;}
.d-kaigyo-6{height: 6em;}
.d-kaigyo-7{height: 7em;}
.d-kaigyo-8{height: 8em;}
.d-kaigyo-9{height: 9em;}
.d-kaigyo-10{height: 10em;}
.d-kaigyo-11{height: 11em;}
.d-kaigyo-12{height: 12em;}
.d-kaigyo-13{height: 13em;}
.d-kaigyo-14{height: 14em;}
.d-kaigyo-15{height: 15em;}
.d-kaigyo-16{height: 16em;}
.d-kaigyo-17{height: 17em;}
.d-kaigyo-18{height: 18em;}
.d-kaigyo-19{height: 19em;}
.d-kaigyo-20{height: 20em;}
/*--====================================
   箇条書き 逆インデント
--====================================*/
.d-kajyougaki-a{text-indent: -2em;
                padding-left: 2em;
    

骨組みHTMLは、「ensyuu-2-html」フォルダーに保存してください。

b.骨組みHTML(skeleton.html)
このファイルは、「演習1」で完成したものです。

HTMLコード(skeleton.html)
<!DOCTYPE html>
<!--====================================
 演習-1(シングルページのホームページ)
=====================================-->
<html>
<head>
    <meta charset="utf-8">
    <title>演習ー1(シングルページのホームページ)</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>演習-1</span>
        <span>シングルページのホームページ</span>
    </h1>
</div>
<!--====================================
      メインナビゲーション
=====================================--> 
<nav class="f-main-navi">
    <ul class="f-main-navi-list">
        <li class="f-main-navi-item">
            <a>ホームページ</a></li>
       <li class="f-main-navi-item">
            <a>内容ー1</a></li>
        <li class="f-main-navi-item">
            <a>内容ー2</a></li>
        <li class="f-main-navi-item">
            <a>内容ー3</a></li>
        <li class="f-main-navi-item">
            <a>お知らせ</a></li>   
    </ul>
</nav>
<!--====================================
 ↑↑↑ ヘッダーブロック 終わり ↑↑↑
=====================================--> 
</header>
<!--====================================
 ↓↓↓ メインブロック 始まり ↓↓↓
=====================================--> 
<main>
<!--====================================
       ページのタイトル
=====================================-->
<div class="f-page-title">    <!-- 影付き -->
        1.内容ー1のタイトル
</div>
<!--====================================
        ページ目次
=====================================-->
<div class="f-mokuji"
     style="width: 325px;"> <!-- 目次の幅指定 --> 
    <h3 class="f-mokuji-title">
         目   次
    </h3>
    
    <a href="#navi1">
          <p>1.内容1のサブタイトル「項目ー1」</p>
    </a>

    <a href="#navi2">
          <p>2.内容1のサブタイトル「項目ー2」</p>
    </a>

    <a href="#navi3">
          <p>3.内容1のサブタイトル「項目ー3」</p>
    </a>

    <a href="#navi4">
          <p>4.内容1のサブタイトル「項目ー4」</p>
    </a>

    <a href="#navi5">
          <p>5.内容1のサブタイトル「項目ー5」</p>
    </a>
</div>
<!--====================================
  1.内容1のサブタイトル「項目ー1」 
=====================================-->
<div id="navi1" class="f-sub-title"> 
    1.内容1のサブタイトル「項目ー1」
</div>
<!--====================================
    サブコンテンツ 
=====================================-->
<div class="f-sub-contents">
    <p>サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。
    </p>
</div>
<!--====================================
  画像の表示  
=====================================-->
<div class="f-image-title">
       【サンプル画像】
</div>

<div class="d-center">
    <p class="d-img300">
        <img src="../etc/fujisan_shikaku.png"
        alt="画像">
    </p>
</div>
<!--====================================
   トップに戻るボタン 
=====================================-->
<div class="f-navi-top-box d-center">
    <div class="f-navi-top-button radius5 
     f-icon-top" 
         style="text-align: center">
         <a href="#">  </a>
    </div>
</div> 
<!--====================================
  2.内容1のサブタイトル「項目ー2」 
=====================================-->
<div id="navi2" class="f-sub-title"> 
    2.内容1のサブタイトル「項目ー2」
</div>
<!--====================================
  文章の表示  
=====================================-->
<div class="f-sub-contents">
    <p>サブタイトル「項目2」の内容です。
      サブタイトル「項目2」の内容です。
      サブタイトル「項目2」の内容です。
      サブタイトル「項目2」の内容です。
      サブタイトル「項目2」の内容です。
      サブタイトル「項目2」の内容です。
      サブタイトル「項目2」の内容です。
      サブタイトル「項目2」の内容です。
      サブタイトル「項目2」の内容です。
      サブタイトル「項目2」の内容です。
    </p>
</div>
<!--====================================
  画像の表示  
=====================================-->
<div class="f-image-title">
           【サンプル画像】
</div>

<div class="d-center">
    <p class="d-img300">
         <img src="../etc/bg_natural_sougen.jpg" 
            alt="画像">
    </p>
</div>
<!--====================================
   トップに戻るボタン 
=====================================-->
<div class="f-navi-top-box d-center">
    <div class="f-navi-top-button radius5 
     f-icon-top" 
         style="text-align: center">
         <a href="#">  </a>
    </div>
</div> 
<!--====================================
  3.内容1のサブタイトル「項目ー3」  
=====================================-->
<div id="navi3" class="f-sub-title"> 
    3.内容1のサブタイトル「項目ー3」
</div>
<!--====================================
  文章の表示  
=====================================-->
<div class="f-sub-contents">
    <p>サブタイトル「項目3」の内容です。
      サブタイトル「項目3」の内容です。
      サブタイトル「項目3」の内容です。
      サブタイトル「項目3」の内容です。
      サブタイトル「項目3」の内容です。
      サブタイトル「項目3」の内容です。
      サブタイトル「項目3」の内容です。
      サブタイトル「項目3」の内容です。
      サブタイトル「項目3」の内容です。
      サブタイトル「項目3」の内容です。
    </p>
</div>
<!--====================================
  画像の表示  
=====================================-->
<div class="f-image-title">
           【サンプル画像】
</div>

<div class="d-center">
    <p class="d-img300">
         <img src="../etc/bg_sanmyaku_alps.jpg" 
            alt="画像">
    </p>
</div>
<!--====================================
   トップに戻るボタン 
=====================================-->
<div class="f-navi-top-box d-center">
    <div class="f-navi-top-button radius5 
     f-icon-top" 
         style="text-align: center">
         <a href="#">  </a>
    </div>
</div> 
<!--====================================
  4.内容1のサブタイトル「項目ー4」  
=====================================-->
<div id="navi4" class="f-sub-title"> 
    4.内容1のサブタイトル「項目ー4」
</div>
<!--====================================
  文章の表示  
=====================================-->
<div class="f-sub-contents">
    <p>サブタイトル「項目4」の内容です。
      サブタイトル「項目4」の内容です。
      サブタイトル「項目4」の内容です。
      サブタイトル「項目4」の内容です。
      サブタイトル「項目4」の内容です。
      サブタイトル「項目4」の内容です。
      サブタイトル「項目4」の内容です。
      サブタイトル「項目4」の内容です。
      サブタイトル「項目4」の内容です。
      サブタイトル「項目4」の内容です。
    </p>
</div>
<!--====================================
  画像の表示  
=====================================-->
<div class="f-image-title">
           【サンプル画像】
</div>

<div class="d-center">
    <p class="d-img300">
         <img src="../etc/dandanbatake.png" 
            alt="画像">
    </p>
</div>
<!--====================================
   トップに戻るボタン 
=====================================-->
<div class="f-navi-top-box d-center">
    <div class="f-navi-top-button radius5 
     f-icon-top" 
         style="text-align: center">
         <a href="#">  </a>
    </div>
</div> 
<!--====================================
  5.内容1のサブタイトル「項目ー5」  
=====================================-->
<div id="navi5" class="f-sub-title"> 
    5.内容1のサブタイトル「項目ー5」
</div>
<!--====================================
  文章の表示  
=====================================-->
<div class="f-sub-contents">
    <p>サブタイトル「項目5」の内容です。
      サブタイトル「項目5」の内容です。
      サブタイトル「項目5」の内容です。
      サブタイトル「項目5」の内容です。
      サブタイトル「項目5」の内容です。
      サブタイトル「項目5」の内容です。
      サブタイトル「項目5」の内容です。
      サブタイトル「項目5」の内容です。
      サブタイトル「項目5」の内容です。
      サブタイトル「項目5」の内容です。
    </p>
    </p>
</div>
<!--====================================
  画像の表示  
=====================================-->
<div class="f-image-title">
           【サンプル画像】
</div>

<div class="d-center">
    <p class="d-img300">
         <img src="../etc/bg_natural_nanohana_batake.jpg" 
            alt="画像">
    </p>
</div>
<!--====================================
   トップに戻るボタン 
=====================================-->
<div class="f-navi-top-box d-center">
    <div class="f-navi-top-button radius5 
     f-icon-top" 
         style="text-align: center">
         <a href="#">  </a>
    </div>
</div> 

<!--====================================
 ↑↑↑ メインブロック 終わり ↑↑↑
=====================================--> 
</main> 
<!--====================================
 ↓↓↓ フッターブロック 始まり ↓↓↓ 
=====================================--> 
<footer>
<!--====================================
   改行 10em  
=====================================-->
<div class="d-kaigyo-10">
</div>  
<!--====================================
   ボタン(back、home、next)  
=====================================-->
<div class="f-bottom-navi-box" 
     style="margin:0 auto;">

    <div class="f-bottom-button f-radius5 f-icon-back" 
         style="text-align: center;">
        <a> 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;">
        <a> next</a>   
    </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>
            

画像ファイルは、タイトルの右に指示したフォルダーに保存してください。

c1.画像1(mountain-01.jpg) ⇒ トップ(01-top)

画像

c2.画像2(fujisan_01.jpg) ⇒ 名山ギャラリー(02-gallery)

画像

c3.画像3(fujisan_02.jpg) ⇒ 名山ギャラリー(02-gallery)

画像

c4.画像4(fujisan_03.jpg) ⇒ 名山ギャラリー(02-gallery)

画像

c5.画像5(fujisan_04.jpg) ⇒ 名山ギャラリー(02-gallery)

画像

c6.画像6(fujisan_05.jpg) ⇒ 名山ギャラリー(02-gallery)

画像

c7.画像7(fujisan_06.jpg) ⇒ 名山ギャラリー(02-gallery)

画像

c8.画像8(tanzawa-fuji.jpg) ⇒ お勧めの山(03-osusume)

画像

c9 画像9(tanzawa-taki.jpg) ⇒ 山歩き雑記(04-zakki)

画像

c10 画像10 (tanzawa-best10.png) ⇒ 山歩き雑記(04-zakki)

画像

演習2を始める
ための準備

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

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

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