Angular+bootstrapでレスポンシブにスタイルを制御する方法

画面幅に合わせてフォントサイズを変えたりコンポーネントの表示非表示を切り替えたりといったちょっとしたスタイル操作の方法をBootstrapで行う方法を紹介します。

スポンサーリンク

はじめに

今回使用した環境はこちらになります。AngularのスタイルはSassを選択しています。

  • Angular : 10.1.6
  • ng-bootstrap : 8.0.4

ドキュメントコピペじゃ動かない

まず画面幅に応じてスタイルを変更するためにはbreakpointというラップトップやタブレット、スマホなどの画面幅の区切りに使われる画面幅の値をうまく利用する必要があります。

Bootstrapのドキュメントを見ると、レスポンシブ対応のクラスの記述が下のように記載されています。(ng-bootstrap v8はbootstrap4.5に対応しています)

概要(Overview)
レイアウトのコンポーネントやオプションには, コンテナ, グリッドシステム, フレキシブルオブジェクト, レスポンシブクラス が組み込まれています。
getbootstrap.jp
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

@includeはmixinというスタイルの集まりを他の場所から利用できるようにするSassの機能を使うための宣言です。ここではmedia-breakpoint-up(sm)の利用を宣言しているので、ドキュメントを確認すると、sm(576px)以上の画面幅においてスタイルを適用すると宣言しているわけです。

つまり、このスタイルシートは576px以上の画面幅で.custom-classが付与された要素に作用します。

しかし試しにこの記述をそのままコピーして利用したいコンポーネントのスタイルシート(.scss)に貼り付けてもSassError: Undefined mixinと表示されます。

bootstrap-gridをインポートする必要あり

Undefined mixinつまり、media-breakpoint-up(sm)というmixinが定義されていないのです。なのでこれが定義されているスタイルをインポートする必要があるのでした。ということで、レスポンシブスタイルを利用したいスタイルシートに次のインポート文を宣言します。

@import "~bootstrap/scss/bootstrap-grid.scss";

@include media-breakpoint-up(sm) {
  .test {
    display: none;
  }
}

するとコンパイルは通って正常に動作します。試しに動かしてみましょう。Angularのapp.htmlに次のようなシンプルな要素を表示させます。

<div class="test"><p>this is test</p></div>

対応するスタイルシートapp.scssには上で書いた.testクラスを定義します。

するとこのように画面が576pxを超えると.testクラスが有効となりpタグが表示されなくなることを確かめることができました。

スポンサーリンク

コメント