Chap20-4.5 ページトップリンク

Chap20-4.5 ページトップリンク

Chap20 デザイン設計

ページトップリンクの作成に必要なファイルと作成手順です。

猫カフェトップページに、ページの先頭に戻るリンクを追加してみましょう。
基本は、コピーペーストで簡単に作成できます。

Contents
  1. ファイルをDLする
  2. 作成手順

ファイルをDLする

Master
Master

jsファイルは「jsフォルダ」へ、cssファイルは「cssフォルダ」へ保存してください

pagetop-link.jsをDL
pagetop-link.cssをDL

nyanroom

index.html

room.html

js

pagetop-link.js（DLしたファイル）

drawer.js

css

pagetop-link.css（DLしたファイル）

index.css（使用するファイル）

layout.css

destyle.css

drawer.css

images

btn_top.png（使用する画像ファイル）

btn_top2.png（使用する画像ファイル）

bg_0.png（使用する画像ファイル）

illust_6.png（使用する画像ファイル）

作成手順

DLしたファイルをHTMLへリンクする

CSSファイルは、index.cssの<link>の下へ貼り付けます。

    <title>保護猫カフェ/にゃんルーム</title>
    <link href="css/destyle.css" rel="stylesheet">
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/drawer.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <link href="css/pagetop-link.css" rel="stylesheet">

jsファイルは、</body>の上に貼り付けます。

    <footer>
        <p>2022 © TOU-WEB</p>
    </footer>
    <script src="js/drawer.js"></script>
    <script src="js/pagetop-link.js"></script>
</body>
jQueryライブラリをCDNでリンクする
    <title>保護猫カフェ/にゃんルーム</title>
    <link href="css/destyle.css" rel="stylesheet">
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/drawer.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
Master
Master

ドロワーメニューでjQueryライブラリはリンク済みですね

リンク先（到着場所・移動先）にid名で目印をつける
動画内容と若干違います！

動画の説明ではこの作業はありませんが、講座内のページ内リンクで説明した内容に従って、追加しました。（但し、この作業をしなくても機能します）

ページの先頭に戻るアンカーリンクをクリックすると<main>に移動するように、目印となるid名を追加します。

    <main id="top">
        <h1>にゃんルームは<br>あなたと猫だけのくつろぎスペース</h1>
Master
Master

あまり深く考えなくてもいいですが、このid=”top”を他のタグの場所に追加しても、その場所へはリンクしません。今回のid名の追加は、ページ内リンクの復習として追加しています。

</main>の上に<a>リンクを追加する

<footer>の上に、ページの先頭に戻るためのアンカーリンク<a>を追加します。

        <!-- ページトップのリンク追加 -->
        <p id="page-top"><a href="#top"><span>Page Top</span></a></p>
    </main>
    <footer>
        <p>2022 © TOU-WEB</p>
    </footer>
Master
Master

<p>のid名「page-top」が、jQueryプラグインでリンク先の場所を決めるようになっています。。
ページ内リンクでは、移動先に特定の場所に目印となるid名が必要でしたが、それをjQueryでコントロールしているということですね。
要は#topとid=”top”が無くても機能する、ということになります。

pagetop-link.cssでボタンの表示を設定する

この作業は確認になります。
ボタンの画像を変えたいときは、この場所で設定してください。

/*ボタンの画像*/
#page-top a {
    /*aタグの形状*/
    display: block;
    width: 100px;
    height: 100px;
    color: #333;
    text-align: center;
    text-decoration: none;
    font-size:0.6rem;
    text-transform: uppercase; 
    background-image: url("../images/btn_top.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80% auto;
}
Master
Master

クリックする前のボタンの設定です。
ボタンを変えるときは、background系のプロパティに注意しましょう。
5,6行目はボタンを表示するボックスサイズ、7〜10行目はアンカーテキストの設定です。

#page-top.floatAnime a{
    width: 100px;
    height: 130px;
    background: url("../images/btn_top2.png") ;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    animation: floatAnime 2s linear infinite;
    opacity: 0;
}
Master
Master

クリックした後のボタンの設定です。
ボタンを変えるときは、background系のプロパティに注意しましょう。
1,2行目はボタンを表示するボックスサイズの設定です。

index.cssで背景画像の表示を設定する

子連れの猫の画像を背景画像で表示します。

#cont-1>div,
#cont-3>div,
#cont-5>div{
    background-color: rgb(255,240,235);
        background-image: url(../images/bg_0.png);/*背景追加*/
        background-repeat: no-repeat;
        padding: 40px 0;
}
#cont-2>div,
#cont-4>div{
    background-color: rgb(255,255,255);
        background-image: url(../images/bg_0.png);/*背景追加*/
        background-repeat: no-repeat;
        padding: 40px 0;
}
Master
Master

スマートフォン用の場所に追加して、PC用にも継承させます。
background-positionは、表示する場所によって違うので、ここには記述していません。

背景画像の配置場所を調整する

コンテンツごとに違う背景画像の場所を調整します。

/*背景の配置場所*/
#cont-1>div{
    background-position: 0 100%;
}
#cont-2>div{
    background-position: 25% 100% ;
}
#cont-3>div{
    background-position: 50% 100%;
}
#cont-4>div{
    background-position: 75% 100%;
}
#cont-5>div{
    background-image: url(../images/illust_6.png);
    background-position: 97% 100%;
}
Master
Master

background-positionの値は「横方向 縦方向」の順番で記述します。
#cont-5の最後のコンテンツは背景画像が違うので、上書きしておきましょう。