ga-07-04

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

<演習2>
4.「トップ」ページの作成

目   次

1.「トップページ」完成画面の画像

2.HTMLコードの修正

3.CSSコードの修正

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



1.「トップページ」完成画面の画像

これは、トップページの完成画面の画像です。ボタンを押してもジャンプしません。

画像
画像

背景画像にタイトルを貼り付けます。その後にホームページの紹介文を 追加します。

  
2.HTMLコードの修正

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

【HTMLファイル】
HTMLコード(index.html)
<!--====================================
       画像&タイトル表示
=====================================-->
<div class="f-gazo-box" 
     style=" background: url(mountain-01.jpg)
             no-repeat;
             background-size: cover">
    <div class="f-gazo-box-title">
        <span>生涯かけて歩きたい</span>
        <span>山好きのホームページ</span>
    </div>
</div>
<div class="d-center"> 
    <small> 【出典】 pixabay</small>
</div>
<!--====================================
      ホームページの紹介
=====================================-->
<div class="f-sub-contents">
    <p class="d-kajyougaki-a">
      1.名山ギャラリー<br>
      名山ギャラリーの紹介。名山ギャラリーの紹介。
      名山ギャラリーの紹介。名山ギャラリーの紹介。
      名山ギャラリーの紹介。名山ギャラリーの紹介。
      名山ギャラリーの紹介。名山ギャラリーの紹介。
      名山ギャラリーの紹介。
    </p>

    <p class="d-kajyougaki-a">
      2.お勧めの山<br>
      お勧めの山の紹介。お勧めの山の紹介。
      お勧めの山の紹介。お勧めの山の紹介。
      お勧めの山の紹介。お勧めの山の紹介。
      お勧めの山の紹介。お勧めの山の紹介。
      お勧めの山の紹介。お勧めの山の紹介。
    </p>

    <p class="d-kajyougaki-a">
      3.山歩き雑記<br>
      山歩き雑記の紹介。山歩き雑記の紹介。
      山歩き雑記の紹介。山歩き雑記の紹介。
      山歩き雑記の紹介。山歩き雑記の紹介。
      山歩き雑記の紹介。山歩き雑記の紹介。
      山歩き雑記の紹介。山歩き雑記の紹介。
    </p>

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

frame-style-sheet.cssについては、CSSコードの最後に追加してください。

【CSSファイル】
CSSコード(frame-style-sheet.css)
/*=====================================
  背景画像に文字を重ねる(レスポンシブ)
--====================================*/
.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;
}
        
4. 完成画面と完成コード

1.完成画面

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

2.完成コード

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: 1000px;
      /*ページの最小の高さ*/
   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: 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;
}
    
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>
<!--====================================
       画像&タイトル表示
=====================================-->
<div class="f-gazo-box" 
     style=" background: url(mountain-01.jpg)
             no-repeat;
             background-size: cover">
    <div class="f-gazo-box-title">
        <span>生涯かけて歩きたい</span>
        <span>山好きのホームページ</span>
    </div>
</div>
<div class="d-center"> 
    <small> 【出典】 pixabay</small>
</div>
<!--====================================
      ホームページの紹介
=====================================-->
<div class="f-sub-contents">
    <p class="d-kajyougaki-a">
      1.名山ギャラリー<br>
      名山ギャラリーの紹介。名山ギャラリーの紹介。
      名山ギャラリーの紹介。名山ギャラリーの紹介。
      名山ギャラリーの紹介。名山ギャラリーの紹介。
      名山ギャラリーの紹介。名山ギャラリーの紹介。
      名山ギャラリーの紹介。
    </p>

    <p class="d-kajyougaki-a">
      2.お勧めの山<br>
      お勧めの山の紹介。お勧めの山の紹介。
      お勧めの山の紹介。お勧めの山の紹介。
      お勧めの山の紹介。お勧めの山の紹介。
      お勧めの山の紹介。お勧めの山の紹介。
      お勧めの山の紹介。お勧めの山の紹介。
    </p>

    <p class="d-kajyougaki-a">
      3.山歩き雑記<br>
      山歩き雑記の紹介。山歩き雑記の紹介。
      山歩き雑記の紹介。山歩き雑記の紹介。
      山歩き雑記の紹介。山歩き雑記の紹介。
      山歩き雑記の紹介。山歩き雑記の紹介。
      山歩き雑記の紹介。山歩き雑記の紹介。
    </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="../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>
            
 back
pagetop
 next

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

トップページ
の作成

名山ギャラリー
目次の作成

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