ga-06-04

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

<演習1>
4.ホームページ構築のステップ

目   次

1.ホームページ画面の初期設定

2.メインタイトルの設置

3.メインナビゲーションの設置

4.ページタイトルの設置

5.ページ目次の設置

6.サブタイトルの設置

7.サブコンテンツ(文章)の設置

8.サブコンテンツ(画像)の設置

9.サブコンテンツのコピー

10.トップに戻るボタンの設置

11.フッターナビゲーションの設置

12.フッターの設置


1.ホームページ画面の初期設定

ホームページ画面の初期設定を行います。CSSファイル(frame-style-sheet.css)のhtmlタグにブラウザの背景色、bodyタグにホームページの幅と背景色、他を設定します。HTMLファイル(skeleton.html)には、headerタグ、mainタグ、footerタグを設置します。今回に限り、両ファイルを下段の内容で置き替えてください。次項から追加でお願いします。両ファイルを設置し終わった後、skeleton.htmlファイルをダブルクリックするとブラウザに初期画面が表示されます。

【CSSファイル 置替えコード】
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: lightyellow; 
      /*ページの背景色 薄い黄色*/
   word-break:break-all;
      /*文章の改行に規則適用せず*/
   font-family: "游ゴシック", "YuGothic", "メイリオ", 
      meiryo, sans-serif;
      /*フォントの適用順位を指定*/
}
        
ワンポイント

「html」に背景色を指定していない場合は、「body」の背景色が画面一杯に広がる。

ワンポイント

min-height: 100vh;
vh:ビューポート(画面サイズ)の高さに対する割合。100vhは画面の高さと同じ(100%)を表す

【HTMLファイル 置替えコード】
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>
<!--====================================
 ↑↑↑ ヘッダーブロック 終わり ↑↑↑
=====================================--> 
</header>
<!--====================================
 ↓↓↓ メインブロック 始まり ↓↓↓
=====================================--> 
<main>
<!--====================================
 ↑↑↑ メインブロック 終わり ↑↑↑
=====================================--> 
</main> 
<!--====================================
 ↓↓↓ フッターブロック 始まり ↓↓↓ 
=====================================--> 
<footer>
<!--====================================
 ↑↑↑ フッターブロック 終わり ↑↑↑
=====================================--> 
</footer>
</body>
</html>
        
ワンポイント

「link」の設置方法は、「基本の基本」-「9.リンク」ー「2.スタイルシートの読み込み(linkタグ)」を参照。  

【実行結果】

画像

  
2.メインタイトルの設置

メインタイトルを追加します。CSSファイル(frame-style-sheet.css)のコードは最下段に追加してください。HTMLファイル(skeleton.html)のコードは「header」タグの下に追加してください。

【CSSファイル 追加コード】
CSSコード(frame-style-sheet.css)
/*--====================================
      メインタイトル 
--====================================*/
.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;
}
        
ワンポイント

inline要素を横に並べると謎の空白ができる。その対策として親要素に「font-size:0」を指定して、子の要素に「font-size:34px」を指定する。

【HTMLファイル 追加コード】
HTMLコード(skeleton.html)
<!--====================================
      メインタイトル
=====================================--> 
<div class="f-main-title">
    <h1>
        <span>HTML/CSS初心者の為の</span>
        <span>演習-1</span>
        <span>シングルページのホームページ</span>
    </h1>
</div>
       
【実行結果】

画像


  
3.メインナビゲーションの設置

メインナビゲーションを追加します。CSSファイル(frame-style-sheet.css)のコードは最下段に追加してください。HTMLファイル(skeleton.html)のコードは「メインタイトル」の下に追加してください。 各内容へのジャンプは「演習ー2」で行います。 

【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;
}
        
【HTMLファイル 追加コード】
HTMLコード(skeleton.html)
<!--====================================
      メインナビゲーション
=====================================--> 
<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>
       
【実行結果】

画像

※ページの背景色を薄黄色から白に変更しました。上段のCSSコードには反映していません。。CSSファイル(frame-style-sheet.css)のBODY(共通設定)で、「background-color: white;」と変更してください。

  
4.ページタイトルの設置

ページのタイトルを追加します。CSSファイル(frame-style-sheet.css)のコードは最下段に追加してください。HTMLファイル(skeleton.html)のコードは「main」タグの下に追加してください。

【CSSファイル 追加コード】
CSSコード(frame-style-sheet.css)
/*--====================================
   ページのタイトル  影付き
--====================================*/
.f-page-title{ 
  font-size: 30px;
  color: darkblue;
  text-shadow: 3px 3px 5px #aaa;
  text-align: center;
  font-weight: bold;
  padding-top: 40px;
}
        
ワンポイント

text-shadow: 3px 3px 5px #aaa;
右へ3px、下へ3px、ぼかし5px、影の色:灰色

【HTMLファイル 追加コード】
HTMLコード(skeleton.html)
<!--====================================
       ページのタイトル
=====================================-->
<div class="f-page-title">    <!-- 影付き -->
        1.内容ー1のタイトル
</div>
       
【実行結果】

画像


  
5.ページ目次の設置

ページ目次を追加します。CSSファイル(frame-style-sheet.css)のコードは最下段に追加してください。HTMLファイル(skeleton.html)のコードは「ページのタイトル」の下に追加してください。

【CSSファイル 追加コード】
CSSコード(frame-style-sheet.css)
/*--====================================
     目    次
--====================================*/
/*目次ボックス*/
.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; 
}
        
【HTMLファイル 追加コード】
HTMLコード(skeleton.html)
<!--====================================
        ページ目次
=====================================-->
<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>
       
ワンポイント

「基本の基本」-「9.リンク」ー「4.目次から同一ページ内にジャンプする」を参照願います。  

【実行結果】

画像


  
6.サブタイトルの設置

サブタイトルを追加します。CSSファイル(frame-style-sheet.css)のコードは最下段に追加してください。HTMLファイル(skeleton.html)のコードは「目次」の下に追加してください。  

【CSSファイル 追加コード】
CSSコード(frame-style-sheet.css)
/*--====================================
   サブタイトル
--====================================*/
.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;
}
        
【HTMLファイル 追加コード】
HTMLコード(skeleton.html)
<!--====================================
  1.内容1のサブタイトル「項目ー1」 
=====================================-->
<div id="navi1" class="f-sub-title"> 
    1.内容1のサブタイトル「項目ー1」
</div>
       
【実行結果】

画像


  
7.サブコンテンツ(文章)の設置

サブコンテンツ(文章)を追加します。CSSファイル(frame-style-sheet.css)のコードは最下段に追加してください。HTMLファイル(skeleton.html)のコードは「1.内容1のサブタイトル(項目ー1)」の下に追加してください。

【CSSファイル 追加コード】
CSSコード(frame-style-sheet.css)
/*--====================================
   サブコンテンツ
--====================================*/
.f-sub-contents {
  font-weight: bold; 
  padding-right: 8%;
  padding-left: 8%;
}
        
【HTMLファイル 追加コード】
HTMLコード(skeleton.html)
<!--====================================
    サブコンテンツ 
=====================================-->
<div class="f-sub-contents">
    <p>サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。 
    サブタイトル「項目1」の内容です。
    </p>
</div>
       
【実行結果】

画像


  
8.サブコンテンツ(画像)の設置

サブコンテンツ(画像)を追加します。CSSファイル(frame-style-sheet.css)のコードは最下段に追加してください。HTMLファイル(skeleton.html)のコードは「H.サブコンテンツ(文章)」の下に追加してください。

【CSSファイル 追加コード】
CSSコード(frame-style-sheet.css)
/*--====================================
       画像タイトル
--====================================*/
.f-image-title{
  font-size: 20px;
  line-height: 0px;
  padding-top: 20px;
  padding-bottom: 0px;
  font-weight: bold;
  text-align: center;
}
        
【HTMLファイル 追加コード】
HTMLコード(skeleton.html)
<!--====================================
  画像の表示  
=====================================-->
<div class="f-image-title">
       【サンプル画像】
</div>

<div class="d-center">
    <p class="d-img300">
        <img src="../etc/fujisan_shikaku.png"
        alt="画像">
    </p>
</div>
       
【実行結果】

画像


  
9.サブコンテンツのコピー

サブコンテンツを4回コピーし、項目名と画像を変えました。HTMLファイル(skeleton.html)のコードを「サブコンテンツ」の下に追加してください。

【CSSファイル 追加コード】 ・・・・ 今回はありません

【HTMLファイル 追加コード】
HTMLコード(skeleton.html)
<!--====================================
  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>
<!--====================================
  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>
<!--====================================
  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>
<!--====================================
  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>
       
【実行結果】

画像

※内容1のサブタイトル「項目ー1」から内容1のサブタイトル「項目ー4」までは省略しました。  


  
10.トップに戻るボタンの設置

トップに戻るボタンを設置します。CSSファイル(frame-style-sheet.css)のコードは最下段に追加してください。HTMLファイル(skeleton.html)のコードは「項目ー1」から「項目-5」の各々の最後に追加してください。

【CSSファイル 追加コード】
CSSコード(frame-style-sheet.css)
/*--====================================
   ボタン(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: 40%;
  left: 8px;
  width: 0;
  height: 0;
  margin-top: -7px;
  border: 7px solid transparent;        
     /*top right bottom を透明化 */ 
  border-bottom: 7px solid darkblue;
}
        
【HTMLファイル 追加コード】
HTMLコード(skeleton.html)
<!--====================================
   トップに戻るボタン 
=====================================-->
<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> 

       
ワンポイント

「a href]に「#」を指定することによってページのトップに飛びます。

【実行結果】

画像


  
11.フッターナビゲーションの設置

フッターナビゲーションを追加します。CSSファイル(frame-style-sheet.css)のコードは最下段に追加してください。HTMLファイル(skeleton.html)のコードは「footer」タグの後ろに追加してください。

【CSSファイル 追加コード】
CSSコード(frame-style-sheet.css)
/*--====================================
 ボタン(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;
}       
ワンポイント

左向きの三角形を作成しています。 ボーダーによる三角形の作成を参照してください。  

ワンポイント

右向きの三角形を作成しています。

【HTMLファイル 追加コード】
HTMLコード(skeleton.html)
<!--====================================
   改行 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>
       
【実行結果】

画像


  
12.フッターの設置

フッターを追加します。HTMLファイル(skeleton.html)のコードは「フッターナビゲーション」の下に追加してください。 CSSファイルの追加はありません。

【HTMLファイル 追加コード】
HTMLコード(skeleton.html)
<!--====================================
   改行 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>  
       
【実行結果】

画像

 back
pagetop
 next

演習1のレイアウトと
ファイルの準備

ホームページ構築
のステップ

完成画面とコード

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