ga-07-10

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

<演習2>
「山歩き雑記」 サンプルページの作成

目   次

1.「山歩き雑記」
  サンプルページ完成画面の画像

2.HTMLコードの修正

3.CSSコードの修正

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



1.「お勧めの山」サンプルページ完成画面の画像

これは、「お勧めの山」サンプルページの完成画面の画像です。ボタンを押してもジャンプしません。

画像
画像

  
2.HTMLコードの修正

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

【HTMLファイル】
HTMLコード(zakki-01-sample.html)
<!--====================================
  文章の表示  
====================================-->
<div class="f-sub-contents">
    <p>私は、丹沢山地の麓に住んでいて、丹沢の
    山々には100回以上登っている。この時お世話に
    なったのが「丹沢写真館」というホームページで、正規の
    登山ルート以外にバリエーションルートが詳しく記述されて
    いる登山地図を何時も利用させてもらっていた。
    久しぶりに「丹沢写真館」を訪問すると、「仲間が次々と
    転落死して以来、丹沢に入るのを見合わせていました。
    しばらくは内容を縮小して継続することにしました。」との
    記述があった。他人事では無いと思い、丹沢での遭難
    事故について考えてみた。
    </p>
<!--====================================
  画像の表示  
=====================================-->
    <div class="f-image-title">
           【丹沢の大滝】
    </div>
    <div class="d-center">
        <p class="d-img600">
            <img src="tanzawa-taki.jpg" 
            alt="画像">
        </p>
    </div>
<!--====================================
  文章の表示  
=====================================-->
<p>丹沢山地は東西約50km、南北約30kmで主に
神奈川県に位置している。わずかに西側の一部が山梨県と
静岡県にかかっている。主な山は以下の通りである。
3,000メートル級の日本アルプス等と比較すると大した
標高ではない。
</p>

<!--====================================
  画像の表示  
=====================================-->
    <div class="d-center">
        <p class="d-img500">
            <img src="tanzawa-best10.png" 
            alt="画像">
        </p>
    </div>
<!--====================================
  文章の表示  
=====================================-->
    <p>神奈川県警察のホームページ「登山を楽しく
    安全に 山岳遭難防止」を見ると「平成30年中、
    神奈川県内の山岳遭難は132件159人で過去最高値と
    なりました。発生の態様別で最も多かったのは道迷い60人、
    次いで滑(転)落30人、疲労25人、転倒24人と続き、
    その他としては病気や夜間装備の不備による行動不能等
    が挙げられます。」と記載されている。
    </p>
    <p>丹沢山地の特徴は沢が多いことである。
    沢登りを目的に丹沢に来る人も多い。多くの沢は滝の
    連続で、専門の装備をした専門家でないと登ることも
    下ることも難しい。
    </p>
    <p>道迷いでの遭難は登りではほとんど発生しない。
    登りは体力が余っている、登れなくなったら引き返すし、
    怪しい道も登れば正規の登山道または尾根道に出られる。
    しかし、下りの場合、疲れ切った身体で道に迷ったと
    思っても引き返す気力が湧かず突き進んでの遭難が多い
    のではないか。無理して崖を下りると登り返せなくなる。
    沢に出たと思ったら上にも下にも滝があって動きが
    取れなくなる。その結果、無理をして遭難することが
    推定される。
    </p>

    <p class="d-center">~~~~~~~~~ 後 書 き ~~~~~~~~~
    </p>

    <p>山では道に迷うことは必ず発生すると想定して、
    登山地図とコンパスを必ず持っていかなければならない。
    道に迷ったと思ったときは、引き返すことが原則である。
    少なくとも通っていない道を下ってはならない。
    これは自分に言い聞かせている言葉である。
    </p>

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

CSSコードの対かはありません。

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

1.完成画面

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

2.完成コード

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 40px;
  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:500px;
  height:30px;
}
.f-bottom-button {
  overflow: hidden;
  width: 100px;
  height: 30px;
  padding: 0;
  margin: 0 30px;
  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: 18px;
  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;        
  border-right: 7px solid white;
}
.f-icon-next a:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 75px;
  width: 0;
  height: 0;
  margin-top: -7px;
  border: 7px solid transparent;       
  border-left: 7px solid white;
}
/*--====================================
 説明(back/home/next)
--====================================*/
.f-explain-waku{
  display: table;
  width: 500px;
  height: 30px;
  margin: 0 auto;
}
.f-explain-box{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-size: 0.8em;
  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%;
}
/*=====================================
  背景画像に文字を重ねる(レスポンシブ)
--====================================*/
.f-gazo-box {
  width: 100%;
  padding-top: 66.6%;
  position: relative;
  margin-top: 2em;
  top: 0;
  left: 0;
}
.f-gazo-box .f-gazo-box-title {
  position: absolute;
  top: 10%;
  width: 100%;
  font-size: 46px;
  line-height: 1.5em;
  letter-spacing:0.2em;
  color: #fff;
  text-align: center;
  font-weight: bold;
}
/* SP向けの設定 */
@media screen and (max-width: 600px) {
  .f-gazo-box .f-gazo-box-title {
   font-size: 32px;
   letter-spacing:0.0em;
  }
}
.f-gazo-box span{
  display:inline-block;
}
/*--====================================
    ギャラリー
--====================================*/
/* コンテナの幅は800px固定、空きは左右均等 */
.f-container {
  max-width: 800px;
  margin: 0 auto;
}

/* ギャラリー */
.f-gallery {
  width: 95%;
  margin: 0 auto;
}

.f-photobox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.f-photobox div {
  flex-basis: 200px;
  margin-bottom: 20px;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 3px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 2px #829797;
}

/*.photobox div:hover {
  opacity: 0.5;
}*/

.f-photobox div:hover {
  background-color: skyblue;
}
    
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>
<!--====================================
  文章の表示  
====================================-->
<div class="f-sub-contents">
    <p>私は、丹沢山地の麓に住んでいて、丹沢の山々には100回以上登っている。この時お世話になったのが「丹沢写真館」というホームページで、正規の登山ルート以外にバリエーションルートが詳しく記述されている登山地図を何時も利用させてもらっていた。久しぶりに「丹沢写真館」を訪問すると、「仲間が次々と転落死して以来、丹沢に入るのを見合わせていました。しばらくは内容を縮小して継続することにしました。」との記述があった。他人事では無いと思い、丹沢での遭難事故について考えてみた。
    </p>
<!--====================================
  画像の表示  
=====================================-->
    <div class="f-image-title">
           【丹沢の大滝】
    </div>
    <div class="d-center">
        <p class="d-img600">
            <img src="tanzawa-taki.jpg" 
            alt="画像">
        </p>
    </div>
<!--====================================
  文章の表示  
=====================================-->
<p>丹沢山地は東西約50km、南北約30kmで主に神奈川県に位置している。わずかに西側の一部が山梨県と静岡県にかかっている。主な山は以下の通りである。3,000メートル級の日本アルプス等と比較すると大した標高ではない。
</p>

<!--====================================
  画像の表示  
=====================================-->
    <div class="d-center">
        <p class="d-img500">
            <img src="tanzawa-best10.png" 
            alt="画像">
        </p>
    </div>
<!--====================================
  文章の表示  
=====================================-->
    <p>神奈川県警察のホームページ「登山を楽しく安全に 山岳遭難防止」を見ると「平成30年中、神奈川県内の山岳遭難は132件159人で過去最高値となりました。発生の態様別で最も多かったのは道迷い60人、次いで滑(転)落30人、疲労25人、転倒24人と続き、その他としては病気や夜間装備の不備による行動不能等が挙げられます。」と記載されている。
    </p>
    <p>丹沢山地の特徴は沢が多いことである。沢登りを目的に丹沢に来る人も多い。多くの沢は滝の連続で、専門の装備をした専門家でないと登ることも下ることも難しい。
    </p>
    <p>道迷いでの遭難は登りではほとんど発生しない。登りは体力が余っている、登れなくなったら引き返すし、怪しい道も登れば正規の登山道または尾根道に出られる。しかし、下りの場合、疲れ切った身体で道に迷ったと思っても引き返す気力が湧かず突き進んでの遭難が多いのではないか。無理して崖を下りると登り返せなくなる。沢に出たと思ったら上にも下にも滝があって動きが取れなくなる。その結果、無理をして遭難することが想定される。
    </p>

    <p class="d-center">~~~~~~~~~ 後 書 き ~~~~~~~~~
    </p>

    <p>山では道に迷うことは必ず発生すると想定して、登山地図とコンパスを必ず持っていかなければならない。道に迷ったと思ったときは、引き返すことが原則である。少なくとも通っていない道を下ってはならない。これは自分に言い聞かせている言葉である。
    </p>

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

山歩き雑記
目次作成

山歩き雑記
サンプル作成

お問い合わせ
作成

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