.net column

.NET開発者のためのブログメディア
Webの開発ツール

【Webフレームワークの種類】画面デザインが簡単にできるBootstrapとは

2019年10月14日

「Bootstrap」とは、Webアプリケーションの画面デザインを作成する際に用いられるWebフレームワークです。
Bootstrapを利用することで、画面デザインの作成が容易になるだけでなく、多くの機能が用意されているので、様々な画面デザインを実現することが可能になります。

PG
Bootstrapを利用すると、どんなことができるのでしょうか?画面の作成が簡単になるのですか?
PM
Bootstrapを使えるようになると、画面デザイン作成の幅が広がりますよ!一緒に確認しましょう。

Bootstrapとは

通常、Webアプリケーションの画面を作成するには、HTMLとCSSを利用します。
CSSで各要素のレイアウトを作成しますが、一から作るとなると時間や手間が掛かってしまいます。

これを解消できるのがBootstrapです。

Bootstrapでは画面のデザインができ上がっている「テンプレート」と呼ばれるファイルを利用できます。画面を一から作成する時と比べて、時間を大きく削減することが可能です。
また、画像やテキストのサイズ、余白の調整などあらかじめ組み込まれている機能が多くあり、画面レイアウトの調整も簡単にできます。

レスポンシブの画面デザインが作成しやすいというメリットもあります。
通常は画面の幅が違う場合、PC用とスマホ用それぞれに対応する、もしくはレスポンシブの画面を作ることが必要になります。

そこで、Bootstrapではレスポンシブ対応のための機能も多く用意されていて、簡単にレスポンシブな画面デザインを作成することができます。

Bootstrapを使うとできること

Bootstrapを使うとできることの中にレスポンシブ対応があります。

その際、以下のようにコードを実装します。

という部分がレスポンシブの書き方になります。

Bootstrapは横を12分割してレイアウトを組み立てます。
col-12と記載することで「12分割全てを使用する」という実装になります。
そのため、以下のようにdivの2つ目は行が変わり2行目に表示されるという形になります。

画面幅を分割せず大きく使用する場合
※画面幅を分割せず大きく使用する場合

もう1つ指定している「col-md-6」という実装は、横幅が768px以上の場合の指定になります。
768px以上の場合は「12分割中、6分割を使用する」という実装です。
つまり、「divの1つ目で6分割を使用」「divの2つ目で6分割を使用」、という実装になり横幅が768px以上のパソコンなどで見ると下記のようになります。

画面幅を半分に分割して使用する場合
※画面幅を半分に分割して使用する場合

先ほどは2行で表示されていたものが1行で表示されています。
横幅が768pxに満たないスマホなどでは、2行で表示されます。
こういったように、横幅に応じてデザインしていくことで、レスポンシブ対応が可能です。

PG
レスポンシブ対応など、Bootstrapでできることはいろいろあるのですね。
PM
Bootstrapを利用するとデザインの実装の幅が広がります。他にも多く機能があるので、利用してみてください!

Bootstrapを利用するとデザインの実装の幅が広がる

BootstrapはWebアプリケーションの画面をデザインする際に、多くの機能が利用できます。
より良い画面デザインを作成することに繋がるため、Bootstrapを利用してみてはいかがでしょうか。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)