icon
icon

BootstrapでCSSを上書きする方法を現役エンジニアが解説【初心者向け】

初心者向けにBootstrapでCSSを上書きする方法について解説しています。Bootstrapを使うことでレスポンシブデザインに対応したサイトを構築することができます。BootstrapでCSSの上書きを行う方法と注意点を覚えましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

BootstrapでCSSを上書きする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

BootstrapでCSSを上書きする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

Bootstrapとは

現在のWebページはパソコン以外のデバイスからの閲覧が多く、6割以上はスマートフォンからの閲覧であると言われています。Webページをデザインする際、スマートフォンなどのモバイル機器のデザインを最初に考えるアプローチを「モバイルファースト」と呼びます。

また画面サイズが異なる複数のデバイスに対応したデザインを「レスポンシブデザイン」と呼びます。レスポンシブデザインに対応したWebページを一から構築するのはとても大変であるため、様々なライブラリが提供されています。それらのライブラリの中で最も広く利用されているのがBootstrapです。

Bootstrap

 

[PR] Webデザインで副業する方法とは

Bootstrapを使ったCSSの上書き方法と注意点

Bootstrapを適用するにはCSSファイルとJavaScriptファイルの読み込みを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sample</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

最新の安定版はv4.5.0です。またBootstrap4はJavaScriptのライブラリであるjQueryを使用します。次期バージョンであるBootstrap5からはjQueryは不要となりますが、現在では読み込みが必須となりますので他のライブラリとの兼ね合いに注意しましょう。jQueryとの関係について、詳しくは公式ドキュメントも参考にしてください。

Bootstrap – はじめに

 

BootstrapでCSSを上書きしてみよう

今回のサンプルプログラムではBootstrapでCSSを上書きする方法について確認します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sample</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
</head>
<body>
  <div class="container">
    <h1 class="border-bottom mt-4 pb-2">Bootstrapを使った例</h1>
    <div class="row">
      <div class="col-md-4">
        <div class="alert alert-success" role="alert">こんにちは!</div>
      </div>
      <div class="col-md-6">
      <form>
        <div class="form-group row">
          <label class="col-2 col-form-label" for="myname">名前</label>
          <div class="col-10">
            <input type="text" class="form-control" name="myname" />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-2 col-form-label" for="mymail">メール</label>
          <div class="col-10">
            <input type="text" class="form-control" name="mymail" />
          </div>
        </div>
      </form>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous" ></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous" ></script>
</body>
</html>

実行結果は以下のとおりです。BootstrapでCSSが上書きされ、きれいなデザインが適用されています。レスポンシブにも対応しています。スマートフォン表示に切り替えて確認してみましょう。

 

まとめ

今回の記事ではBootstrapでCSSを上書きする方法について学習しました。

 

監修してくれたメンター

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門(技術評論社)」。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。