ga-05-j7

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

【 HTML/CSS逆引き辞典 】
目次から同ページ内に ジャンプする

目次から、そのページ内にジャンプさせるにはid属性を使います。class属性はページ内で何度でも使用できるのに対しid属性はページ内で1回しか利用できません。この特性を利用して目次に利用します。呼び出すときはid名の頭に[#]を付けます。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!--====================================
 目次から同ページ内にジャンプする(サンプル)
=====================================-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>目次から同ページ内にジャンプする(サンプル)
    </title> 
    <link rel="stylesheet" 
          href="style-1.css">
</head>
 
<body>
<!--====================================
       ページのタイトル
=====================================-->
<div class="f-page-title">    <!-- 影付き -->
       目次から同ページ内にジャンプする<br>(サンプル)
</div>
<!--====================================
        目     次
=====================================-->
<div class="f-mokuji"
     style="width: 260px;"> <!-- 目次の幅指定 --> 
    <h3 class="f-mokuji-title">
         目   次
    </h3>
    
    <a href="#navi1">
        <p>1.文字色を変更する</p>
    </a>

    <a href="#navi2">
        <p>2.文字の太さを変更する</p>
    </a>

    <a href="#navi3">
        <p>3.文字のサイズを指定する</p>
    </a>
</div>
<!--====================================
   改行 30px  
=====================================-->
<div style="height: 30px">
</div>  
<!--====================================
  1.文字色を変更する
=====================================-->
<div id="navi1"; class="f-sub-title"> 
    1.文字色を変更する
</div>
<div style="text-align: center">
    <p>文字色変更の内容</p>
    <p>文字色変更の内容</p>
    <p>文字色変更の内容</p>
    <p>文字色変更の内容</p>
    <p>文字色変更の内容</p>
    <p>文字色変更の内容</p>
    <p>文字色変更の内容</p>
    <p>文字色変更の内容</p>
</div>
<!--====================================
     2.文字の太さを変更する
=====================================-->
<div id="navi2"; class="f-sub-title"> 
    2.文字の太さを変更する 
</div>
<div style="text-align: center">
    <p>文字の太さを変更する内容</p>
    <p>文字の太さを変更する内容</p>
    <p>文字の太さを変更する内容</p>
    <p>文字の太さを変更する内容</p>
    <p>文字の太さを変更する内容</p>
    <p>文字の太さを変更する内容</p>
    <p>文字の太さを変更する内容</p>
    <p>文字の太さを変更する内容</p>
</div>   
<!--====================================
   3.文字のサイズを指定する  
=====================================-->
<div id="navi3"; class="f-sub-title"> 
    3.文字のサイズを指定する 
</div>
<div style="text-align: center">
    <p>文字のサイズを指定する内容</p>
    <p>文字のサイズを指定する内容</p>
    <p>文字のサイズを指定する内容</p>
    <p>文字のサイズを指定する内容</p>
    <p>文字のサイズを指定する内容</p>
    <p>文字のサイズを指定する内容</p>
    <p>文字のサイズを指定する内容</p>
    <p>文字のサイズを指定する内容</p>
</div> 
<!--====================================
   改行 30px  
=====================================-->
<div style="height: 30px">
</div>  
<!--====================================
       フッター  
=====================================--> 
<div style="text-align: center">
    <small>
          Copyright (c)  無料で挫折させない
          ホームページ作成講座
           All Rights Reserved.
    </small>
</div>
<!--====================================
   改行 100px  
=====================================-->
    <div style="height: 100px">
    </div>  
</body>
</html>
        
CSSコード(style-1.css)
/*--==================================== 
  目次から同ページにジャンプするサンプル
--====================================*/
@charset "utf-8";
/*--====================================
      BODY(共通設定) 
--====================================*/
body{font-weight: bold;
          width: 100%;
     max-width: 800px;
     margin:0 auto;
}
/*--====================================
   ページのタイトル
--====================================*/
.f-page-title{ 
  font-size: 30px;
  color: darkblue;
  text-shadow: 3px 3px 5px #aaa;
  text-align: center;
  padding: 40px;
}
/*--====================================
     目    次
--====================================*/
/*目次ボックス*/
.f-mokuji{
  height: auto;
  margin:  0 auto;   
  padding: 0PX 20px 20px 20px;
  border: solid 1px lightgray;
  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-left: 30px;
  margin-right:30px;
  padding: 0.4em 0.5em;
  background: lightcyan;
  border-left: solid 8px pink;
  border-bottom: solid 5px lightgray;
}
        
 back
pagetop
 next

文中から外部ページに
ジャンプする

目次から同ページ内に
ジャンプする

ナビゲーションから
他ページに
ジャンプする

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