Bootstrapオフキャンバスの幅と高さを自由に調整する完全ガイド！初心者でもわかるカスタムCSS入門

幅と高さの調整：カスタムCSSでサイズを最適にする方法

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapのオフキャンバスって、横から出てくるメニューですよね？でも大きさを変えられなくて困っています。」

先生

「そうですね。オフキャンバスは初期設定だと幅や高さが決まっていますが、CSSを使えば自由に調整できます。」

生徒

「CSSって難しそうです…。パソコンもあまり触ったことがなくて。」

先生

「大丈夫です。画用紙の大きさを決めるような感覚で考えると、とても分かりやすいですよ。」

1. Bootstrapのオフキャンバスとは何か

Bootstrapのオフキャンバスとは、画面の外に隠れていて、ボタンを押すと横や下からスライドして表示されるパネルのことです。スマートフォンのメニュー画面を想像すると分かりやすいです。最初は見えませんが、必要なときだけ登場します。

この仕組みを使うことで、画面をすっきり保ちながら情報を表示できます。Bootstrap5では標準機能として用意されており、特別な知識がなくても使える点が魅力です。

2. 幅と高さが最初から決まっている理由

オフキャンバスの幅や高さは、誰でも使いやすいように、あらかじめ無難なサイズが設定されています。これは、既製品のノートが最初から標準サイズで売られているのと同じ考え方です。

しかし、サイトの内容によっては「もう少し広くしたい」「高さを小さくしたい」と感じることがあります。そのときに活躍するのがカスタムCSSです。

3. カスタムCSSとは何か

カスタムCSSとは、自分で追加するデザインのルールのことです。CSSは、色や大きさ、配置を決めるための仕組みで、家でいうとインテリアの配置を決める設計図のような存在です。

Bootstrapは便利な家具セットのようなものですが、カスタムCSSを使えば、自分の好みに合わせて配置を変えられます。

4. 幅を調整する基本的な方法

まずは横から出てくるオフキャンバスの幅を変更してみましょう。幅は「どれくらい横に広げるか」を決めるものです。パーセントを使うと、画面の大きさに合わせて自動で調整されます。


<style>
	.offcanvas-custom {
	    width: 50%;
	}
</style>

<div class="offcanvas offcanvas-start offcanvas-custom">
    <div class="offcanvas-body">
        横幅を半分にしたオフキャンバス
    </div>
</div>

ブラウザ表示

この例では、画面の半分の幅でオフキャンバスが表示されます。定規で半分の位置を測るような感覚で考えると理解しやすいです。

5. 高さを調整する基本的な方法

下から出てくるオフキャンバスの場合は、高さを調整できます。高さとは、どれくらい縦に伸びるかという意味です。引き出しの深さを決めるイメージです。


<style>
	.offcanvas-bottom-custom {
	    height: 40%;
	}
</style>

<div class="offcanvas offcanvas-bottom offcanvas-bottom-custom">
    <div class="offcanvas-body">
        高さを調整したオフキャンバス
    </div>
</div>

ブラウザ表示

高さをパーセントで指定することで、画面の大きさが変わってもバランスを保てます。

6. 最大幅と最大高さを使った調整

幅や高さを固定すると、大きな画面では広すぎたり、小さな画面では狭すぎたりすることがあります。そこで便利なのが最大幅と最大高さです。これは「ここまでは大きくしていい」という上限を決める考え方です。


<style>
	.offcanvas-limit {
	    width: 80%;
	    max-width: 400px;
	}
</style>

<div class="offcanvas offcanvas-start offcanvas-limit">
    <div class="offcanvas-body">
        最大幅を設定したオフキャンバス
    </div>
</div>

ブラウザ表示

これにより、どんな画面でも読みやすいサイズを保てます。

7. スマートフォンを意識したサイズ調整

スマートフォンでは画面が小さいため、オフキャンバスが大きすぎると使いにくくなります。そのため、端末に合わせてサイズを考えることが大切です。


<style>
	@media (max-width: 576px) {
	    .offcanvas-custom {
	        width: 80%;
	    }
	}
</style>

<div class="offcanvas offcanvas-start offcanvas-custom">
    <div class="offcanvas-body">
        スマートフォン向け調整
    </div>
</div>

ブラウザ表示

これは、画面が小さいときだけ別のルールを適用する方法です。

8. よくある失敗と注意点

サイズを大きくしすぎると、メイン画面がほとんど見えなくなることがあります。また、小さくしすぎると文字が読みにくくなります。ちょうどよいサイズを探すことが大切です。

まずは少しずつ数字を変えて、実際に画面を見ながら調整するのがおすすめです。これは、料理で味見をしながら調味料を足す感覚と似ています。

まとめ

ここまで、Bootstrapのオフキャンバスについて、基本的な考え方から幅や高さの調整方法、さらにスマートフォンを意識した調整や注意点までを順番に見てきました。オフキャンバスは、画面を有効に使いながら必要な情報を表示できる便利な仕組みであり、WebサイトやWebアプリケーションの使いやすさを大きく向上させてくれます。

特に重要なのは、Bootstrapで用意されている標準のオフキャンバスをそのまま使うだけでなく、CSSを追加することで自分のサイトに合ったサイズへ調整できる点です。幅や高さをパーセントで指定すれば画面サイズに応じて柔軟に変化し、最大幅や最大高さを設定すれば、大きな画面でも小さな画面でも読みやすさを保てます。これは、パソコン、タブレット、スマートフォンなど、さまざまな端末で閲覧される現代のWebサイトにとって、とても大切な考え方です。

また、メディアクエリを使った調整により、スマートフォンのような小さな画面ではオフキャンバスを少し広めに表示し、操作しやすくすることもできます。このように、BootstrapとカスタムCSSを組み合わせることで、初心者の方でも段階的に理解しながら、実用的なデザインを作れるようになります。

オフキャンバスのサイズ調整は、難しい専門知識が必要な作業ではありません。数字を少し変えて画面を確認しながら調整することで、自然と感覚が身についていきます。最初は小さな変更でも構いません。実際に動かし、見て、試すことで、HTMLとCSSの理解も深まっていきます。

まとめとしてのサンプルプログラム

最後に、この記事で学んだ内容をまとめた、シンプルで分かりやすいオフキャンバスのサンプルを確認してみましょう。幅をパーセントで指定し、最大幅を設定することで、どの画面サイズでも使いやすいオフキャンバスになっています。


<style>
	.offcanvas-summary {
	    width: 70%;
	    max-width: 360px;
	}
</style>

<div class="offcanvas offcanvas-start offcanvas-summary">
    <div class="offcanvas-body">
        まとめ用のオフキャンバスです
    </div>
</div>

ブラウザ表示

このように、classを追加してCSSで幅や最大幅を指定するだけで、オフキャンバスの見た目と使いやすさは大きく変わります。Bootstrapのクラス構造を活かしつつ、自分なりの調整を加えることが、デザインの第一歩です。

先生と生徒の振り返り会話

生徒

「最初はオフキャンバスの大きさは変えられないものだと思っていました。でも、CSSを少し書くだけで自由に調整できるんですね。」

先生

「その通りです。Bootstrapは便利な土台を用意してくれていますが、CSSを追加することで自分の目的に合わせた形にできます。」

生徒

「幅をパーセントで指定したり、最大幅を決めたりする考え方も、例え話のおかげでイメージしやすかったです。」

先生

「イメージできることが大切ですね。数字を変えながら画面を見ることで、自然と感覚が身についていきます。」

生徒