.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. HTML・CSS
  5. 【Webフレームワークの種類】画面デザインが簡単にできるBootstrapとは

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

  • HTML・CSS
公開日時: 　 更新日時:
【Webフレームワークの種類】画面デザインが簡単にできるBootstrapとは
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>
    最新情報や関心のある情報を毎日お届け。 FEnetメールマガジン メルマガ登録はこちらから>>

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

    プログラマー
    Bootstrapを利用すると、どんなことができるのでしょうか？画面の作成が簡単になるのですか？
    プロジェクト
    マネージャー
    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行で表示されます。
    こういったように、横幅に応じてデザインしていくことで、レスポンシブ対応が可能です。

    プログラマー
    レスポンシブ対応など、Bootstrapでできることはいろいろあるのですね。
    プロジェクト
    マネージャー
    Bootstrapを利用するとデザインの実装の幅が広がります。他にも多く機能があるので、利用してみてください！

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

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

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ

    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへ応募する
    会員登録不要! カンタン45秒!

    新着案件New Job

    関連記事Related Posts