前回作ったリンク用のコンテンツを作っていきます。

今回作るパーツは、商品のメイン情報部分とドロップダウン付きタブメニューで商品情報を作ります。

まずは、商品のメイン情報部分を作りましょう。

*-*-* Chapter40 *-*-*

縦書き横書き混在コンテンツを学ぼう

目次

1. 縦書き横書き混在コンテンツを見てみよう
2. ページ内リンクとメイン情報を作ろう
3. 商品のメイン情報を作ってみよう
4. 縦書きタイトルをおしゃれなデザインにする
5. 縦長の画像サイズを変更しよう
6. ページ内リンクの表示位置を変えよう

SAKUWEB さくうぇぶ

縦書き横書き混在コンテンツを見てみよう

今回作るパーツです。

SAKUWEB さくうぇぶ

前回作った「高いところ。」のリンク先として、

1）メイン情報となる「キャットタワー」の紹介部分

2）その下の「商品情報」「サイズ」を作っていきます。

「商品情報」と「サイズ」のパーツは、タブメニューになっていて、サイズをクリックすると表示が変わる仕様になっています。

この方法なら、場所を取らずに多くの情報を伝えることができますね。

ページ内リンクとメイン情報を作ろう

まずは、1番のメイン情報パーツから作りましょう。

デザインを見ると、

タイトル「高いところ。キャットタワー」は縦書きで、

尚且つ「高いところ」と「キャットタワー」は背景色や文字色が反転していますね。

タイトル下の説明文は横書きで、要素を下に配置しています。

また、縦長の画像を用意して、imgフォルダに格納しておいてください。

商品のメイン情報を作ってみよう

以下の手順で作ってみましょう。

1）フル幅のコンテナを作って、ページ内リンクを設置

　id属性は「tower」です。

2）空白カラム付きのカラムを作る。

　※空白カラムを1つ分設ける。

3）その中に2カラム（サイズは同じ）を作る

4）最初のカラムに、タイトルとテキスト、以下の指定した指示を追加

【タイトル】

高いところ。キャットタワー

指示01-　中央寄せ。

指示02-　「高いところ。」「キャットタワー」は別々にスタイルをあてるので、「キャットタワー」に、意味を持たないタグをつける

【テキスト】

ネコは本能的に高いところが好き。<改行>高いところに行く理由は、周囲の状況を把握しやすく、外敵に襲われるリスクが低いことが考えられます。<改行>背の高いキャットタワーを置いて、ネコが安心できる場所をつくってあげましょう。

指示01-　要素を下に配置する

5）もう一つのカラムに画像を挿入し、中央寄せにする

6）レスポンシブも考慮する

それではコードを。

<div id="tower" class="container-fluid mb-5"><div class="col-10 offset-1">
  <div class="row row-cols-1 row-cols-md-2 my-3">
    <div class="col">
      <h2 class="h3 py-5 m-auto">高いところ。<br><span>キャットタワー</span></h2>
      <p class="d-flex align-items-end p-5">ネコは本能的に高いところが好き。<br>&nbsp;<br>高いところに行く理由は、周囲の状況を把握しやすく、外敵に襲われるリスクが低いことが考えられます。<br>&nbsp;<br>背の高いキャットタワーを置いて、ネコが安心できる場所をつくってあげましょう。</p>
    </div>
    <div class="text-center"><img src="../img/tower.webp" alt="キャットタワー"></div>
  </div>
 </div></div>

一番最初のタグにid属性を付与し、値を「tower」にします。

こうすることで、前回作ったリンクをクリックすると、この場所に飛ぶようになります。

2つ同じサイズのカラムなので、「row-cols-1 row-cols-md-2」を適用しています。

ディスクトップは2カラムで、それ以下は1カラムで表示されます。

タイトルの部分は、「キャットタワー」をspanタグで囲んで、後でスタイルを付与します。

テキストの部分は、フレックスを利用して「align-items-end」で要素を下に配置しました。

では、タイトルの装飾と画像サイズを変更していきます。

縦書きタイトルをおしゃれなデザインにする

前回縦書き用のスタイルを作りましたね。

今回は「高いところ。」と「キャットタワー」に別々のスタイルを適用して、おしゃれな感じにしていきます。

前回作った縦書きスタイルでは、文字色を白色に、半透明の黒を背景に入れました。

これと同じスタイルなのが「高いところ。」の部分です。

これにテキストサイズを小さくする指定を追加していきます。

対して、「キャットタワー」は、文字色が黒色で、背景も白色ですね。

それでは、まず個別のクラスを付与して、スタイルを充てていきましょう。

個別のクラス「writing-vw」を付与します。

<h2 class="writing-vw h3 py-5 m-auto">高いところ。<br><span>キャットタワー</span></h2>

cssでスタイルを作ります。

/* 縦書きにする */
.writing-v,.writing-vw {-ms-writing-mode: tb-rl;writing-mode: vertical-rl;letter-spacing: .3rem;}
/* 「キャットタワー」の文字色と背景色を指定 */
.writing-v,.writing-vw span {background: rgba(0,0,0,.7);color: white;}
/* 「高いところ」の文字色と背景色を指定 */
.writing-vw {background: rgba(255,255,255,.8);color: black;}
/* 「キャットタワー」のフォントサイズ他を指定 */
.writing-vw span {font-size: .8rem;padding: .5rem;line-height:5rem}

「キャットタワー」の部分は、フォントサイズや余白、「line-height」でテキストの行間を指定して、バランスをとっています。

「高いところ」は文字色と背景色を追加で指定しました。

これで完成です。

縦長の画像サイズを変更しよう

縦長の画像を利用する時は、レスポンシブに注意が必要です。

ディスクトップで最適サイズでも、スマホでは大きすぎたりその逆もあります。

サイズを制御するために、Bootstrapに用意されている「h-75」（幅75%）も利用できますが、せっかくなのでcssで高さを指定していきましょう。

まず該当部分のhtmlを見ましょう。

<div class="text-center"><img src="../img/tower.webp" alt="キャットタワー"></div>

指示の仕方はいくつかあります。

1）「container-fluid」の個別クラスを付けて、中の全カラムに同じスタイルを適用する

2）divタグに個別クラスに適用する

今回は1番の方法でスタイルをあてます。

ただし、この方法は「全カラムに同じスタイルが適用」されるため、

もしもう一枚小さい画像を使いたい場合は、2番と併用する必要がありますので注意が必要です。

それでは、「container-fluid」の個別クラスを付けていきます。

<div id="tower" class="container-fluid goods-info mb-5">

「goods-info」を付与したので、cssでスタイルをあてましょう。

.goods-info img {max-height:650px;}

「max-height」は、高さの最大サイズを指定します。

今回は「650px」を指定しましたので、

レスポンシブで650px以下にはなりますが、

画像が650px以上になることはありません。

これで良いサイズ感になりましたね。

ページ内リンクの表示位置を変えよう

ページ内リンク+固定ナビゲーションを利用している場合は注意が必要です。

実際に「高いところ。」をクリックすると、指定場所に飛びますが、コンテンツ頭ではなく途中に移動してしまいます。

これは、固定ナビゲーションがページ最前面に表示されているため、

ナビゲーションの高さ分をズラして移動させないと、

「何も指定していない場合」のように文字が切れてしまいます。

そのため、「固定ナビの高さ分」の位置を移動させる必要があります。

cssを利用すれば、解決できるのでやっていきましょう。

ではコードを。

#tower,#wall,#chair,#tv,#plant {display: inline-block; padding-top: 80px; margin-top: -80px;}

以下のことをやっています。

paddingで、上に80pxの余白を空けます。

marginで、paddingで空けた80pxの余白を相殺します。

ネガティブマージンを使って、本当は余白があるけど見た目的にはその余白がキャンセルされているので、位置を移動に調整することができます。

この方法以外にも「::before」の疑似要素を使った方法もありますので、気になる方は調べてみてください。

これで1番が完了したので、次回は2番のドロップダウン付タブメニューを作っていきます。