ネプラスのテックブログ。ネットワーク、クラウド、サーバなどのITインフラ情報を中心に発信中。

  1. ネプラス インフラエンジニア採用
  2. テックマガジン
  3. テクノロジー
  4. Bootstrap4の解説総合14選|レスポンシブデザインの作り方も紹介

Bootstrap4の解説総合14選|レスポンシブデザインの作り方も紹介

  • テクノロジー
  • プログラミング
公開日時:   更新日時:
Bootstrap4の解説総合14選|レスポンシブデザインの作り方も紹介
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>

    Bootstrap4でのレスポンシブデザインについて


    レスポンシブデザインとは、画面の幅に応じてレイアウトが自動的に変わるデザインのことを指します。BootstrapはHTML、CSS、JavaScriptから構成されたWEBフレームワークで、Bootstrap4を利用すれば簡単にレスポンシブデザインのWebページを作成できます。

    本記事ではBootstrap4でのレスポンシブデザインについてご紹介していきますので、ぜひ参考にしてみてはいかがでしょうか。

    出典:Bootstrap5で高速に
    参照:https://getbootstrap.jp/

    Bootstrap4で知っておくべきこと3つ


    Bootstrap4を利用する場合、基本的に押さえておかなければいけない基本知識があります。ここではBootstrap4で知っておくべきこと3つをご紹介しますので、ぜひ参考にしてみてください。

    1:画面サイズと画面の名前

    Bootstrap4には利用用途ごとに分けられた画面幅と名前があります。たとえば、デスクトップPCなどの画面で利用するWebコンテンツであれば、画面サイズは1200px以上、サイズの名前は「xl」となります。

    画面サイズ 画面の名前
    576px
    576px以上 sm
    768px以上 md
    992px以上 lg
    1200px以上 xl

    2:ブレークポイントとは

    ブレークポイントとは、レスポンシブなレイアウトを作成する際にどの画面幅でレイアウトを変えるのかという基準になるものです。

    Bootstrap4の場合は「554px」「768px」「992px」「1200px」という4つのブレークポイントが存在し、さらにその間の区間として「xs」「sm」「md」「lg」「xl」が存在します。

    3:スタイル定義はモバイルが優先

    Bootstrap4はモバイル優先でスタイル定義されるようになっています。そのため、コードは「画面サイズA以上ならスタイルBになる」といった書き方でコーディングを行うことになります。

    Bootstrap4におけるグリッドシステムの解説4つ


    Bootstrap4には、Bootstrap3以前からグリッドシステムという概念が存在します。グリッドシステムを利用することで、より詳細なレイアウトコントロールが可能となります。

    ここではBootstrap4におけるグリッドシステムについて解説していきますので、ぜひ参考にしてみてください。

    出典:https://getbootstrap.com/docs/4.1/layout/grid/
    参照:Grid system

    1:グリッドシステムはガイドラインのこと

    Bootstrap4のグリッドシステムでは一連のコンテナや行、列を使用して、コンテンツのレイアウトを行うことができます。

    Bootstrapでは画面の幅を12本のグリッドに分割しており、スマートフォンでWebページを見た場合は上下分割、パソコンで見た場合はコンテンツを広めにするなど、グリッドシステムによって細かいレイアウト設定が可能です。

    2:6つの幅があるコンテナクラス(.container)

    「.container」は画面全体を示すコンテナクラスです。コンテナの最大幅は、「なし(auto)」「576px」「720px」「940px」「1140px」「container-fluid(画面幅全体)」の6種類から設定することができます。

    画面サイズごとに設定を変更するにはメディアクエリを使う

    メディアクエリ(CSS Media Query)とは、「指定した画面幅以上の時に適用するスタイル」を設定できるものです。メディアクエリは「@media (min-width: 544px)」のように指定します。

    3:行のクラスであるロー(.row)

    グリッドシステムでは、行のクラスである「.row」を使用してWebコンテンツのレイアウト設定や配置などを行います。たとえば、コンテナを構成する場合、rowはコンテナを構成する行を設定できます。

    4:列のクラスであるカラム(.col)

    グリッドシステムでは、列のクラスである「.col」を使用してWebコンテンツのレイアウト設定や配置などを行います。たとえば、コンテナを構成する場合、colは縦列であるカラムになります。

    レスポンシブ化するにはカラムの書き方が重要

    レスポンシブなレイアウトの作成には、それぞれの画面幅でいくつのカラムを使用したボックスにするかという設定を行うことになります。

    必要に応じて異なるクラスを複数指定することで、スマホなら1カラム、デスクトップパソコンなら4カラムといったレイアウトの設定が可能です。

    カラムを入れ子にする場合のコードの書き方

    入れ子にする場合、以下のように記述します。

    Bootstrap4におけるテーブルの作り方4つ


    Bootstrap4でテーブルを作成する場合、どのような方法で作成すればよいのでしょうか。ここではBootstrap4におけるテーブルの作り方4つをご紹介しますので、ぜひ参考にしてみてください。

    1:基本のテーブルクラスの作り方

    基本のテーブルクラスは、「<table class=””table””></table>」のように「table」にtableクラスをつける形になります。

    2:レスポンシブテーブルの作り方

    レスポンシブテーブルを作成する場合、tableタグを「table-responsive」で囲みましょう。

    3:テーブル内の文章を折り返さないレスポンシブテーブルの作り方

    文章を折り返したくない場合は、セルの前に「text-nowrap」をつけることでその行を折り返さなくなります。

    4:ブレークポイントを設けたレスポンシブテーブルの作り方

    ブレークポイントを設けたレスポンシブテーブルを作成する場合は、tableタグを「table-responsive-{-sm|-md|-lg|-xl}で囲みましょう。

    Bootstrap4におけるナビゲーションバーの作り方3つ


    Bootstrap4でナビゲーションバーを作成する場合、どのような方法で作成すればよいのでしょうか。ここではBootstrap4におけるナビゲーションバーの作り方3つをご紹介しますので、ぜひ参考にしてみてください。

    1:基本的のナビゲーションバーの作り方

    基本的なナビゲーションバーを作成する場合、「Navbar」を使用します。Navbarはnav要素の中に「ボタン」と「メニュー」を入れた構成になります。

    2:ロゴをつけたナビゲーションバーの作り方

    ロゴをつけたナビゲーションバーを作成する場合、画像ソースを追加しましょう。

    レスポンシブの無効化


    Bootstrap4でのレスポンシブの無効化について紹介します。

    style=””min-width: 1000px; max-width: 1000px;””をしていることで、レスポンシブを無効化できます。

    Bootstrap4を使ってレスポンシブデザインのページを作ろう


    レスポンシブとは、画面の幅に応じてレイアウトが動的に変わることです。

    ぜひこの記事でご紹介したBootstrap4でのレスポンシブデザインやグリッドシステム、Bootstrap4におけるテーブルやナビゲーションバーの作り方などを参考に、Bootstrap4を使用してレスポンシブページを作成してみてはいかがでしょうか。

    FEnetを運営しているネプラス株式会社はサービス開始から10年以上
    『エンジニアの生涯価値の向上』をミッションに掲げ、
    多くのインフラエンジニア・ネットワークエンジニアの就業を支援してきました。
    ネプラス株式会社ロゴ

    ネプラス株式会社はこんな会社です

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

    秋葉原オフィスイメージ
    • インフラ業界に特化

      インフラ業界に特化

      ネットワーク・サーバー・データベース等、ITインフラ業界に特化。Cisco Systemsプレミアパートナーをはじめ各種ベンダーのパートナー企業です。

      業界を知り尽くしているからこそ大手の取引先企業、経験豊富なエンジニアに選ばれています。

    • 正社員なのにフリーランスのような働き方

      正社員なのにフリーランスのような働き方

      正社員の方でも希望を聞いたうえでプロジェクトをアサインさせていただいており、フリーランスのような働き方が可能。帰社日もありません。

      プロジェクト終了後もすぐに次の案件をご紹介させていただきますのでご安心ください。

    • 大手直取引の高額案件

      大手直取引の高額案件

      案件のほとんどが大手SIerやエンドユーザーからの直取引のためエンジニアの皆様へに高く還元できています。

      Ciscoをはじめ、Juniper、Azure、Linux、AWS等インフラに特化した常時300件以上の案件があります。

    • スキルアップ支援

      スキルアップ支援

      不要なコストを削減し、その分エンジニアの方へのスキルアップ支援(ネットワーク機器貸出、合格時の受験費用支給など)や給与で還元しています。

      受験費用例)CCNP,CCIE:6-20万円、JNCIS:3-4万円、AWS:1-3万円など

      ※業務に関連する一定の資格のみ。各種条件がありますので詳しくは担当者へにお尋ねください。

    • 現給与を保証します!

      100%現給与保証

      前職の給与保証しており、昨年度は100%の方が給与アップを実現。収入面の不安がある方でも安心して入社していただけます。

      ※適用にはインフラエンジニアの業務経験1年以上、等一定の条件がございます。

    • インセンティブ制度

      インセンティブ制度

      ネットワーク機器の販売・レンタル事業等、売上に貢献いただいた方にはインセンティブをお支払いしています。

      取引先企業とエンジニア側、双方にメリットがあり大変好評をいただいています。

    • 社会保険・福利厚生

      社会保険・福利厚生

      社員の方は、社会保険を完備。健康保険は業界内で最も評価の高い「関東ITソフトウェア健康保険組合」です。

      さらに様々なサービスをお得に利用できるベネフィットステーションにも加入いただきます。

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

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

      ネプラスは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

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

    ネプラス株式会社に興味を持った方へ

    ネプラス株式会社では、インフラエンジニアを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    オンライン面接も随時受付中。ぜひお気軽にご応募ください。

    ネプラス株式会社へのご応募はこちら↓
    ネプラス株式会社へのご応募はこちら↓

    新着案件New Job