サクッとWEBサイトを作る「SAKUWEB(さくうぇぶ)」

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

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

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

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

 

*-*-* Chapter39 *-*-*

ページ内リンクを学ぼう

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

目次

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

 

 

Bootstrap5サンプルサイト
Bootstrap5サンプルサイト 「Catroom」ページ

SAKUWEB さくうぇぶ

 

ページ内リンクとは?

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

Bootstrap5サンプルサイト
CAT Room サンプルサイト

SAKUWEB さくうぇぶ

ページ内リンクの作り方

 

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

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

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

 

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

 

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

 

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

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

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>

 

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

 

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

まとめ

ページ内リンク

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

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

id属性で指定した値を、href属性に付与する

cssコードの細分化

共通の指示がある場合は、クラス名を列挙する

使い勝手のよい細分化の記述方法もある

Recent Post

Category Post

Back To Top