ga-05-j8

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

【 HTML/CSS逆引き辞典 】
ナビゲーションから他ページに ジャンプする

ナビゲーションからジャンプするサンプルを作りました。最初にジャンプ先の[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

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

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

HTMLだけで作った
テーブルのサンプル

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