Bootstrap縦書きページ内リンクを作ろう

Published on: 2023年6月22日
Category: Bootstrap
Tags: css,html,コード,タグ,ページ内リンク,縦書き
Author: SAKUWEB by Liruu Design

今回は、背景画像の上に、半透明の黒を敷いて縦書きのリンクを設置していきます。

また、今回のリンクは「ページ内リンク」を使います。

ページ内リンクはよく使うので、設定方法を学んでおきましょう。

*-*-* Chapter39 *-*-*

ページ内リンクを学ぼう

ページ内リンクとは？
コンテナとリンクボタンを作ろう
パーツのコンテナとリンクボタンを作ってみましょう。
CSSでリンクの背景を半透明黒に、縦書きリンクを作ろう
cssで背景画像の設置、リンクの縦書きと半透明の黒にしよう
cssで共通の指示がある場合の指定方法
ページ内リンクを作ろう
5つのページ内リンクを作ってみよう

ページ内リンクとは？

今回作るパーツを見ていきます。

背景画像の上に、リンクを設置していますね。

ここのリンクは「ページ内リンク」といって、

該当ページの任意の場所にリンクするというものです。

各ボタンのリンク先は、次回以降に作るコンテンツへのリンクです。

今回は、複数のリンク先を設定していきます。

コンテナとリンクボタンを作ろう

まずは、今回作るパーツのコンテナとリンクボタンを作ってから、

cssで背景画像と縦書きリンクにしていきましょう。

パーツのコンテナとリンクボタンを作ってみましょう。

以下の流れで作ってみてください。

1）コンテナをつくる

2）コンテナに個別クラス名を付ける

サンプルサイトでは「room-link」にしています。

3）カラムを作る

4）5つのリンクを作る

サンプルサイトでは以下の文字列を使っています。

「高いところー」「のぼりたいー」「占領したいー」「テレビが好きー」「植物が好きー」

それではコードを。

<div class="container-fluid room-link pb-5">
  <div class="row">
    <div class="col-10 offset-1 col-sm-8 offset-sm-2">
      <div class="row row-cols-5">
        <div><a href="/">高いところ ー</a></div>
        <div><a href="/">のぼりたい ー</a></div>
        <div><a href="/">占領したい ー</a></div>
        <div><a href="/">テレビが好き ー</a></div>
        <div><a href="/">植物が好き ー</a></div>
      </div>
    </div>
  </div>
</div>

CSSでリンクの背景を半透明黒に、縦書きリンクを作ろう

次に、cssを作っていきます。

cssで背景画像の設置、リンクの縦書きと半透明の黒にしよう

以下の流れでやってみてください。

1）背景画像を設置する

2）リンクを縦書きにする

3）リンクの背景を半透明の黒にする

4）リンクに余白を追加する

それではコードを。

/*　背景画像を設置　*/
.room-link {background: url(../img/room02.webp) no-repeat #d4d2c3 right top / contain;margin-bottom: 10rem;}

/*　リンクを縦書きにする　*/
.writing-v, .room-link a {-ms-writing-mode: tb-rl;writing-mode: vertical-rl;letter-spacing: .3rem;}

/*　背景を半透明黒+テキストを白色　*/
.writing-v, .room-link a {background: rgba(0,0,0,.7);color: white;}

/*　余白を追加　*/
.room-link a {padding: 1rem;}

cssで共通の指示がある場合の指定方法

上記cssのコードの以下2か所。

1-「リンクを縦書きにする」

2-「背景を半透明黒+テキストを白色」の箇所は、

クラスの指定が、「.writing-v, .room-link a」と2つのクラス名が列挙していますね。

以前作った「.writing-v」のコードを見てみましょう。

.writing-v {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  letter-spacing: .3rem;
  background: rgba(0,0,0,.7);
  color: white;
  padding: 2rem;
}

cssでは、共通の指示がある場合、

コードが冗長（じょうちょう）にならないように、クラス名を列挙して簡略化する必要があります。

冗長（じょうちょう）とは、「無駄が多くて長いこと」です。

さらに、cssを細分化しています。

/*　リンクを縦書きにする　*/
.writing-v, .room-link a {-ms-writing-mode: tb-rl;writing-mode: vertical-rl;letter-spacing: .3rem;}

/*　背景を半透明黒+テキストを白色　*/
.writing-v, .room-link a {background: rgba(0,0,0,.7);color: white;}

/*　余白を追加　*/
.room-link a {padding: 1rem;}

これは、このパーツ以外にも同じようでちょっと違う指示を適用する場合など、使い勝手をよくするためです。

もし、「writing-v」と全く同じ指示であれば細分化する必要はありません。

たとえば、縦書きにはしたいけど背景色を半透明ではなく不透明にしたい時や、余白のサイズを変えたい時にこの記述方法を使います。

便利な書き方なので、覚えておきましょう。

ページ内リンクを作ろう

ページ内リンクとは、

同じページ内の特定の場所に移動するリンクのことです。

また、別のページの特定の場所に移動することもできます。

ページのトップに戻るボタンでは、bodyタグにid属性を付与して、

リンクボタンのhref属性に、id属性で指定した値を入れてリンクします。

実際のコードを見てみましょう。

/*　id属性の値に「top」を付与　*/
<body id="top">

/*　href属性の値に「#top」を付与　*/  
<a href="#top">ページのTOPに戻る</a>

bodyタグのid属性に「top」と記述しています。

aタグのhref属性には「#top」となっていますね。

この「#」は「id」の意味で、id属性の値がtopになっている場所にリンクするという意味になります。

ちなみに、別ページの特定の場所にリンクしたいときは、

「#」の前に、ページ名を記述します。

/*　href属性の値に「sample.html#top」を付与　*/ 
<a href="sample.html#top">別ページの特定の場所にリンク</a>

5つのページ内リンクを作ってみよう

ページ内リンクを作ってみてください。

リンク先は次回以降に作りますので、href属性のところだけ作りましょう。

各idの値は任意ですが、サンプルでは以下を使っています。

「高いところー」は、tower

「のぼりたいー」は、wall

「占領したいー」は、chair

「テレビが好きー」は、tv

「植物が好きー」は、plant

それではコードを。

<div><a href="#tower">高いところ ー</a></div>
<div><a href="#wall">のぼりたい ー</a></div>
<div><a href="#chair">占領したい ー</a></div>
<div><a href="#tv">テレビが好き ー</a></div>
<div><a href="#plant">植物が好き ー</a></div>

これでページ内リンクの設置とこのパーツが完成しました。

次回は、リンク先のパーツを作っていきます。