ga-04-09

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

9.リンク(linkタグ、aタグ)

目   次

1.絶対パスと相対パスの使い方

2.スタイルシートの読み込み(linkタグ)

3.文中からジャンプする(aタグ)

4.目次から同一ページ内にジャンプする(aタグ&id)

5.ナビゲーションから他ページにジャンプする(aタグ)

  1.絶対パスと相対パスの使い方

パスとは、特定のファイルの場所までの道筋を記述したものです。スタイルシートの読み込みにも、リンク指定にも絶対パスと相対パスを使います。

A.絶対パスの使い方
外部サイトのファイルを読み込む場合は絶対パスを使います。内部ファイルの読み込みにも絶対パスを使うことができます。

絶対パスの書き方
  書き方 : https://ドメイン名/フォルダ/ファイル名

例 文 :  https://yorozuken.net/gamen-02/gamen-02-00/index.html  

B.相対パスの使い方
相対パスでは「表示したいページ」から見て「読み込みたいファイルがどこにあるか」を基準にしてパスを記述します。戻る階層を「../」で表します。2階層戻る場合は「../../」と書きます。戻った階層から順にフォルダ名を書き、最後に目的のファイル名を書きます。

  
  2.スタイルシートの読み込み(linkタグ)

スタイルシート(stylesheet)を読み込むには、HTMLファイルのheadタグの中に以下のように記述します。この例はHTMLファイルとCSSファイルが同じフォルダーにあるという前提です。

     <link rel=”stylesheet” href=”style1.css”>

HTMLファイルとCSSファイルが違うフォルダーにある場合は書き方が違ってきます。下段の図は、当ホームページのリンク関連図を簡略化して表したものです。この関連図を基に相対パスの書き方を解説します。B、C、Ⅾの各ファイルから共通CSSのA1、A2、A3のスタイルシートを読み込むには以下のように記述します。

【サンプルHTMLコード】

    <head>
      <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>
        
【リンク関連図】

画像

  
  3.文中からジャンプする(aタグ)

A.リンクタグ(aタグ)の書き方
リンクボタンにしたい部分(・・・)を<a href="リンク先のパス"> ・・・ </a>ではさみます。リンク先のパスは、相対パスでも絶対パスでも構いません。

B.文中から他ページにジャンプする
前項の「リンク関連図」の[Cファイル]から[Dファイル]に飛ぶのは次のように記述します。

<a href="../layout/layout.html"> ・・・  </a>

前項の「リンク関連図」の[Dファイル]から[Bファイル]に飛ぶのは次のように記述します。

<a href="../../kihon-kihon/mojishoku/ mojishoku.html"> ・・・  </a>


C.文中から外部ページへジャンプする

【サンプル画像】

画像
※これは画像です。押しても飛びません。

【サンプルHTMLコード】
        <p>「Sublime Text」のダウンロードサイトは、
            <a href="https://www.sublimetext.com/3">
                <p style="text-align: center;">
                    <span style="text-decoration: underline;
                                 color:red;">
                          ここをクリックしてください
                    </span>
                </p>
            </a>
        </p>
            


D.同ページのトップにジャンプする

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!--====================================
   トップに戻るボタン 
=====================================-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>トップに戻るボタン 
    </title> 
    <link rel="stylesheet" 
          href="style-1.css">
</head>
<body>
<div style="height: 70em;
       margin:20px;
            text-align: center;
            font-weight: bold">

    <a href="#navi1">
        <p>***トップに戻るボタンにジャンプする***</p>
    </a>

</div>
<div id="navi1" class="f-navi-top-box d-center">
    <div class="f-navi-top-button radius5 
     f-icon-top">
        <a href="#">  
        </a>
    </div>
                     <br>
</div> 
</body>
</html>
        
ワンポイント

a href="#" と指定すると
ページのトップにジャンプする

CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
      トップにも戻るボタン 
--====================================*/   
.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: 30px 30px;
  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: 0px;
  border: 7px solid transparent;        
  border-bottom: 7px solid darkblue;
}
/*--====================================
   カーソルを重ねると色が変わる
--====================================*/
a:hover {color:skyblue;}
/*--====================================
   テキストの中央寄せ
--====================================*/
.d-center{text-align: center;}
        
  
  4.目次から同一ページ内にジャンプする(aタグ&id)

目次から、そのページ内にジャンプさせるには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>
</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>
</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>
    <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;
}
        
  
  5.ナビゲーションから他ページにジャンプする(aタグ)

ナビゲーションからジャンプするサンプルを作りました。最初にジャンプ先の[home.html]、[naiyou1.html]、[naiyou2.html]を作成してください。

【サンプル画像】

画像
※内容1と内容2の画像は省略しました。

A1.ジャンプ先:ホーム ・・・[home.html]として保存してください

HTMLコード
<!--====================================
ナビからジャンプ ジャンプ先(home.html) 
=====================================-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ナビからジャンプ ジャンプ先(ホーム)
    </title> 
</head>
<body>
<!--====================================
          ページのタイトル
=====================================-->
<h1 style="text-align: center;"> 
       ナビからジャンプ<br>
       ジャンプ先(ホーム)
</h1>
<!--====================================
       ページの内容
=====================================-->
<div style="max-width:600px;
            width:90%;
            height:400px;
            margin:0 auto;
            line-height: 400px;
            font-size: 20px;
            font-weight: bold;
            border: solid 1px gray;
            text-align: center;
            background-color: cyan"> 
       ナビからジャンプ ジャンプ先(ホーム)
</div>
</body>
</html>
        

A2.ジャンプ先:内容1 ・・・[naiyou1.html]として保存してください

HTMLコード
<!--====================================
ナビからジャンプ ジャンプ先(naiyou1.html) 
=====================================-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ナビからジャンプ ジャンプ先(内容1)
    </title> 
</head>
<body>
<!--====================================
       ページのタイトル
=====================================-->
<h1 style="text-align: center;"> 
       ナビからジャンプ<br>
       ジャンプ先(内容1)
</h1>
<!--====================================
       ページの内容
=====================================-->
<div style="max-width:600px;
            width:90%;
            height:400px;
            margin:0 auto;
            line-height: 400px;
            font-size: 20px;
            font-weight: bold;
            border: solid 1px gray;
            text-align: center;
            background-color: lightyellow"> 
       ナビからジャンプ ジャンプ先(内容1)
</div>
</body>
</html>
        

A3.ジャンプ先:内容2 ・・・[naiyou2.html]として保存してください

HTMLコード
<!--====================================
ナビからジャンプ ジャンプ先(naiyou2.html) 
=====================================-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ナビからジャンプ ジャンプ先(内容2)
    </title> 
</head>
<body>
<!--====================================
       ページのタイトル
=====================================-->
<h1 style="text-align: center;"> 
       ナビからジャンプ<br>
       ジャンプ先(内容2)
</h1>
<!--====================================
       ページの内容
=====================================-->
<div style="max-width:600px;
            width:90%;
            height:400px;
            margin:0 auto;
            line-height: 400px;
            font-size: 20px;
            font-weight: bold;
            border: solid 1px gray;
            text-align: center;
            background-color: lightgreen"> 
       ナビからジャンプ ジャンプ先(内容2)
</div>
</body>
</html>
        

B.本題のナビからジャンプのHTMLのサンプルコードです。
  [navi.html]として保存してください

HTMLコード
<!DOCTYPE html>
<!--====================================
 リンク ナビからジャンプ(navi.html)
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <nav class="navi">
        <ul class="navi-list">
            <li class="navi-item">
                <a href="home.html">ホーム</a>
            </li>
            <li class="navi-item">
                <a href="naiyou1.html">内容1</a>
            </li>
            <li class="navi-item">
                <a href="naiyou2.html">内容2</a>
            </li>
        </ul>
    </nav>
</body>
</html>
        

C.本題のナビからジャンプのCSSのサンプルコードです。
  [style-1.css]として保存してください

CSSコード
@charset "utf-8";
/*--====================================
  ナビからジャンプ(style-1.css) 
--====================================*/
.navi {
  font-size: 18px;
  width: auto;
}
.navi-list {
  text-align: center;
}
.navi-item {
  display: inline-block;
  padding: 5px 10px;
  margin: 10px;
  width:80px;
  font-weight: bold;
  background-color: darkblue;
}
a:link {
  color:white;
  text-decoration:none;
}
a:visited {
  color:white;
  text-decoration:none;
}
a:hover {
  color:skyblue;
}
a:active {
  color:cyan;
}
        
ワンポイント

a:link は、未訪問時の色。
a:visited は、訪問済の色。
a:hover は、カーソルを重ねた時の色。
a:active は、カーソルを押しかけた時の色。
text-decoration:none を指定しないと
アンダーラインが引かれる。 

 back
pagetop
 next

画像の貼付け

リンク
(linkタグ、aタグ)

箇条書き

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