TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS BootstrapでCSSを上書きする方法を現役エンジニアが解説【初心者向け】
icon
icon
CSS

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サイトを公開できる、オンラインブートキャンプを開催しています。

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

記事を検索

関連するキーワード

関連する記事

CSSでページ内リンクのアンカーをスタイルする方法を現役エンジニアが解説【初心者向け】

CSSでページ内リンクのアンカーをスタイルする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

CSSだけでif文のような条件分岐を実装する方法を現役エンジニアが解説【初心者向け】

CSSだけでif文のような条件分岐を実装する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

CSSでサイズ可変の正方形の描き方を現役エンジニアが解説【初心者向け】

CSSでサイズ可変の正方形の描き方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSにつ...
CSS

CSSでコメントアウトを書く方法【初心者向け】

CSSでコメントアウトする方法について解説しています。 Cloud9のエディターなどでは、Macであれば「command」+「/」、Windowsであれば...
CSS

スタイルシート言語SassでCSSを書く方法を現役エンジニアが解説【初心者向け】

スタイルシート言語SassでCSSを書く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

三角ジェネレータを応用してCSSで矢印を作る方法を現役エンジニアが解説【初心者向け】

三角ジェネレータを応用してCSSで矢印を作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

あわせてよく読まれている記事

Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】

独学でHTML/CSSを勉強してもデザインがいまいち…という経験はないでしょうか。そんなときに便利なBootstrapの使い方を初心者向けに解説します。   HTML/CSSがわからない方も読むことができますが、HTMLの書き方、CSSの書き方は理解しておいた方がスムーズに読み進めることができるでしょう。 なお、今回はBootstrapのバージョン「3.3.5」を使用します。   本記事は、オンライン完結のBootstrap講座のカリキュラムをもとに執筆しています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   大石ゆかり 田島メンター！！Bootstrapというのは何ですか〜？ 田島悠介 Bootstrapはレスポンシブデザインに対応したフロントエンドのフレームワークだよ。 大石ゆかり フロントエンドというとHTML・CSS・JavaScriptですか？ 田島悠介 そうだね。シンプルな指示でグリッドシステムを使用できたり、本格的なフォームやボタンを作成できたりと非常に便利なんだ。基本の使い方を見てみよう。   目次 本記事では、Bootstrapの基礎をおさえた上で、よく使う、グリッドシステム、テーブル、ボタン、フォームの具体的な使い方を順番に紹介します。 Bootstrapとは Bootstrapを使う準備 グリッドシステムの使い方 テーブルの使い方 ボタンの使い方 フォームの使い方 Bootstrapとは BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。 もともとTwitter社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていましたが、現在では「Bootstrap」のみで呼ばれるようになっています。   Bootstrapを使うメリット Bootstrapを使うメリットとして、レスポンシブWebデザインに対応しているという点があります。通常、スマートフォンやタブレットなど個別に対応するスタイルを作っていると大変手間がかかります。BootstrapはCSS3のメディアクエリを使用しているので、ブラウザの横幅サイズを判断基準として、レイアウトデザインを柔軟に調整することが可能です。   このページから確認できますが、バージョン3.3.5ではこちらのブラウザに対応しています。 この際の注意点ですが、Internet Explorer 7以下とFirefox 3.6以下はサポートされません。これは、CSS3メディアクエリがサポートされていないブラウザだからです。     [PR] Webデザインで副業する学習方法を動画で公開中Bootstrapを使う準備 実際にBootstrapを使う前の準備が必要ですので、まずはこちらに着手しましょう。PCだけあればすぐに準備できます。   Bootstrapを使用するには、BootstrapとjQuery（JavaScriptのライブラリ）を読み込む必要があります。読み込みの方法は下記の2パターンです。 ソースをダウンロードして、ローカルに配置して読み込む すでにホストされているファイルをインターネット経由で読み込む 今回は、前者の方法を紹介します。   ダウンロードするには、BootstrapのTOPページにアクセスしましょう。 「Download Bootstrap」のボタンをクリックしてください。   次に表示されるページで、左にある「Download Bootstrap」をクリックするとダウンロードが始まります。   ダウンロードしたZIPファイルを解凍すると、「css」、「js」、「fonts」の3つのフォルダがあることがわかるはずです。   続いてHTMLファイルを用意しましょう。Bootstrapのページにもテンプレートが用意されていますが、コメントアウトが日本語の方がわかりやすいと思いますので、TechAcademyで用意しています。こちらのコードをコピーして「index.html」としてHTMLファイルを作成してください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Sample</title> <!-- BootstrapのCSS読み込み --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery読み込み -->
Bootstrap

Laravelでformを使う方法【初心者向け】現役エンジニアが解説

今回は、Laravel のFormを利用してフォームの作成を行っていきます。 LaravelのFormを利用することで、ブラウザ画面からフォームを利用してデータを送信することが可能になります。 実務でもWebアプリケーションを開発する際、ユーザーがデータをフォーム入力して、データベースに登録する処理はよく利用しますので、非常に実践的な内容になっています。 目次 Formとは Formの例 Laravelとは Laravel の始め方 tinker の使い方 Mysqlの設定 Mysqlの利用 Laravelの処理 Laravel Collectiveの使い方   Formとは WebアプリケーションでFormというと、企業ページへのお問い合わせフォームであったり、SNSの投稿フォームだったり、多岐にわたり多用されます。 このFormという単語ですが、初学者の頃は、Fromと混同しやすくタイプミスが発生する点に注意していただくと、学習がスムーズです。   今回は、LaravelのライブラリであるLaravel CollectiveというライブラリのFormファサードを利用して実装していきます。 Formファサードとはデザインパターンで言うところの、複数のクラスを利用する上で窓口となるクラスを利用して、依存関係を含めシンプルに処理を実装することができる仕組みです。 デザインパターンというのは、プログラミングのアルゴリズムを定型化することで、誰でも高品質な処理を実装することができる考え方です。   アルゴリズムというのは、プログラミングの処理の流れです。 例えば、子供の頃、迷路の本などで入り口から出口までなぞり書きしたことがあるかと思います。 入り口から出口まで後戻りせず、一筆書きで迷路をクリアする処理をアルゴリズムとイメージすると良いかもしれません。   クラスとは、あるオブジェクトの設計図です。 オブジェクトを作るためには設計図を設計した上で、設計図に基づいてオブジェクトの作成が必要です。   オブジェクトとは、クラスという設計図から生成される製品です。 家を例にすると、家という製品（オブジェクト）は、柱や壁や電気や水道やガスなどいろいろな部品によって、クラスという設計図に基づいて構成されています。 つまり、家の設計図がクラスで、実際の家がオブジェクトというイメージになります。   そして、実際の製品をインスタンスと呼びます。 これは、生成する家が全く同じクラス（設計図）に基づくオブジェクト（製品）であっても、インスタンス（田中様の家）、インスタンス（鈴木様の家）というように、生成後は別の意味を持った家になるためです。 家の設計図であるクラスを利用して、様々な家を集積するようなWebアプリケーションを実装する場合、家というクラスだけでなく、車というクラスや、お店というクラスもあるかもしれません。 どの家とどの車が同じ所有者で、その所有者はお店も所有しているのか、お店を利用するだけなのか、というようにクラス同士が連動して動作する場合、最終的なWebアプリケーションがクラスでごちゃごちゃになりかねません。 そこで、Formファサードのような依存関係をシンプルに実装してくれる機能を利用していくと、実務でも保守のしやすい素敵なアプリケーションを実装可能になります。   [PR] Webデザインで副業する学習方法を動画で公開中Formの例 今回は次のようなFormタグを利用します。 Form::model Form::modelで、モデルデータと連動しながらForm処理を開始します。 そうでない場合は、Form::openを利用することができます。   Form::label Form::labelで、ラベルの生成処理をします。   Form::text Form::textで、テキストボックスの生成処理をします。   Form::submit Form::submitで、送信表示の生成処理をします。   Form::close Form::closeで、Formタグの実装を終了します。   今回利用するFormタグ以外にも、たくさんのFormタグが存在するので、Laravel Collectiveの公式ページを参考にしていただくと良いですよ。 LaravelCollective | HTML v6.x   Laravelとは Laravelとは、PHPでWebアプリケーションを開発する際、セキュリティも高く、効率的な開発をすることができるフレームワークです。 フレームワークとは、Web開発における共通処理であるライブラリを呼び出すことで、効率的にWebアプリケーションを開発することができるツールです。 ライブラリとは、よく利用する便利な処理をまとめて実装しているプログラムです。 同じような処理をしているライブラリが、世界中に存在するため、どのライブラリを呼び出し利用するかはプログラマーが考えて決定します。   Laravel の始め方 今回解説する実装環境は、PHP7.2系とLaravel6系とMySQL5.6系です。 MySQLの最新バージョンはMySQL8系ですが、実行環境の都合でMySQL5.6系ですので、基本的にはMySQL8系でも同じ考え方をしていただくと良いです。 今回はcomposerコマンドを利用して、techacademyというプロジェクト名で、Laravel6.x系最新版で立ち上げます。 ^6.0 と書けば、バージョン6.xの最新版が選択されます。   コマンド composer create-project --prefer-dist laravel/laravel techacademy ^6.0 Laravelのインストール方法やcomposerのインストール・使い方についてはこちらの記事を参考にしてみてください。   Laravelのバージョン Laravelの現在の最新バージョンはLaravel8です。 しかし、Laravel6を利用するのは、Laravel6がLTSというバージョンだからです。 LTSとは、長期に渡りサポートされるバージョンを意味します。 最終的なサポート期間がLaravel6のほうがLaravel8よりも長いため、実務ではLaravel6を利用することが多いです。 バージョン 公開日 セキュリティサポート 8.0 2020年9月8日 2021年9月8日まで 7.0 2020年3月3日 2021年3月3日まで 6.0 2019年9月3日 2022年9月3日まで   tinker の使い方 Laravelでは php artisan tinker というコマンドを実行すると、Laravelの機能を実行するREPLが起動します。 REPLとは対話型コマンドでアプリケーションを操作する方法です。   tinkerの起動方法 コマンドラインで次のコマンドを入力するとtinkerが起動します。 php artisan tinker   tinkerの終了方法 REPLの実行中は、行頭に>>>が表示されています。 その状態でexitと入力することでtinkerを終了することができます。 >> exit   MySQLの設定 いくつかMySQLの設定が必要です。 代表的な設定を抜粋して解説します。   config/database.php 設定内容 'default' => env('DB_CONNECTION', 'mysql'), 解説 ここでは、MySQLを利用するという指定をしています。   .env 設定内容 DB_DATABASE=techacademy 解説 ここではtechacademyというデータベースを利用する指定をしています。   MySQLの利用 MySQLの起動 コマンド sudo service mysql start sudo mysql -u root 解説 MySQLが未起動の場合、sudo service mysql startでMySQLを起動します。 sudo mysql -u rootでMySQLにログインします。 今回は学習用なので、ユーザー名がrootでパスワードがないパターンのログインコマンドです。 実務で利用する場合は、任意のログイン情報を設定していただく必要がございます。   techacademyデータベースを作成 コマンド CREATE DATABASE `techacademy`; 解説 MySQLにログイン後CREATE DATABASE `techacademy`;というコマンドを実行することで、techacademyというデータベースを作成することができます。   Laravelの処理 Laravel側で実装する代表的な処理を抜粋して解説します。   tinkerでデータベース接続を確認する方法 コマンド php artisan tinker >>>DB::reconnect(); 解説 php artisan tinkerというコマンドを実行することでtinkerを利用します。 tinkerを利用しているREPLの状態は、行頭に>>>が表示されている状態です。 その状態で、DB::reconnect();を実行します。 無事データベースへの接続が完了していれば、次のような表示がされます。 => IlluminateDatabaseMySqlConnection {#683}   マイグレーションファイルの作成と実行 マイグレーションファイルとは、テーブルの作成・削除、カラムの追加・削除に関するデータベースのテーブル管理を行うファイルです。 コマンド php artisan make:migration create_techacademy_table --create=techacademies php
PHP

横並びにもできる！Bootstrapで作るform(フォーム)の作り方

今回はBootstrapで作るform(フォーム)の作り方を紹介します。 初心者の方でもすぐに作成できるフォームなので、ぜひ参考にしてみてください。CSSで細かく設定しなくてもデバイスに合ったサイズで対応することができます。   本記事は、オンライン完結のBootstrap講座のカリキュラムをもとに執筆しています。   田島悠介 今回はBootstrapでフォームを設置してみるよ。 大石ゆかり 田島メンター！！Bootstrapのフォームはどのような種類があるんですか〜？ 田島悠介 テキストを入力するエリアやチェックボックス・ラジオボタン・セレクトなど一通りのタイプに対応しているんだ。 大石ゆかり なるほど、必要なものは揃っているって感じですね。よろしくお願いします！   目次 フォームの作り方 実際に作ってみよう   フォームの作り方 Bootstrapではよく見るフォーム画面を簡単に作成できます。 コーディングはいたって簡単です。 <form></form>タグでフォームにするところを囲います。そして、フォームの要素、一つ一つに「class=”form-group”」を設定します。 (<div>などのタグで「class=”form-group”」を設定したい範囲を囲いましょう。) <input>タグに「class=”form-control”」を設定すれば完成です。   田島悠介 Bootstrapでフォームを作成する基本の手順だね。 大石ゆかり フォームにする部分全体を<form></form>で囲む、要素それぞれに「class=”form-group”」を設定、<input>タグに「class=”form-control”」を設定ですね。 田島悠介 次は実際にフォームを設置してみよう。今回はメールアドレス・パスワード・ファイルの読み込み・チェックボックスを入れてみるよ。   [PR] Webデザインで副業する学習方法を動画で公開中実際に書いてみよう 実際に書いてみましょう。以下のHTMLを書いてWebブラウザでみてください。 Bootstrapはダウンロードしているならパスを設定してください。sampleはダウンロードしてなくても動くようにCDNを使っています。 HTML <!DOCTYPE html> <html> <head> <title>sample</title> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> </head> <body style="padding: 50px;"> <form> <div class="form-group"> <label for="email">メールアドレス</label>
Bootstrap

JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptでDocument.formsプロパティを使うと、form要素を取得できます。 実務でも、JavaScriptでDocument.formsプロパティを使って入力フォームの情報を操作するので、ぜひ学習してみてください。   目次BootstrapとはBootstrapを使ったCSSの上書き方法と注意点BootstrapでCSSを上書きしてみようまとめ監修してくれたメンター   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   DOMとは Document Object Modelの略で、文章の構造を表したプログラミングインターフェイスです。 平たく言うと、文章構造を表現したり操作する部品の集まりです。 ChromeなどのブラウザでみているWebサイトは、HTMLという言語のタグを使って文章のレイアウトや表示の色などを表現しています。 DOMの中には、このHTMLの要素を操作する機能も用意されています。 HTMLの要素を操作することで、Webサイトの表示を切り替えたり色をつけたりというような動きをもたせることができます。   Document.formsプロパティとは Document.formsプロパティとは、文章を表すDocumentインターフェイスが持つプロパティの一種です。 Document.formsプロパティには、HTMLにあるformタグをすべて格納しています。 Document.formsプロパティで、formをすべて格納するため、formsと複数形のsが付いています。 Document.formsプロパティは、formタグを参照したり操作する場合に使用します。 formタグというのは、入力フォームのように、ユーザーが情報を入力する際に利用するタグです。   [PR] Webデザインで副業する学習方法を動画で公開中Document.formsプロパティの使い方 ここでは、基本的なDocument.formsプロパティの使い方を解説します。 基本文法 document.forms[index] 解説 Document.formsプロパティは、document.formsと記述すれば使うことができます。 [index]の部分に、インデックスを指定することが可能です。 Document.formsの返り値は、配列ではなく HTMLCollection オブジェクトです。 JavaScriptに標準で用意されてる、Documentのオブジェクトであるdocumentを利用する文法です。   form要素を取得する方法 ここでは、form要素を取得する方法を解説します。 基本コード document.forms[0] document.forms['nameのプロパティ名'] 解説 Document.formsは複数のformを格納した配列のようなオブジェクトです。 厳密に言えば配列ではなく、HTMLCollection オブジェクトと言います。 document.forms[0]のようにformを指定することで任意のform要素を取得できます。 document.forms[‘nameのプロパティ名’]というように、該当するnameのプロパティ名を指定することで、該当するnameで指定されたform要素を取得できます。   form部品を取得する方法 ここでは、form部品を取得する方法を解説します。 基本コード document.forms[0].elements[0] document.forms['nameのプロパティ名'].elements['nameのプロパティ名'] 解説 document.forms[0].elementsでは、formタグの中にある入力欄などの部品を取得できます。 elements[0]の位置に、inputタグのような部品が該当する場合に、document.forms[0].elements[0]でinputタグの要素が取得可能です。 Document.formsと同じようにelementsもすべてのform部品を格納したHTMLCollection オブジェクトです。 そのため任意のform部品を扱う場合は、elements[0]やelements[【inputの名前】]のように[‘nameのプロパティ名’]を指定します。   実際に書いてみよう JavaScriptでのformの操作を見るために、まずはHTMLソースに2つのformタグを記述したものを用意しました。 HTMLに存在する要素を、Document.formsで実際に取得してみましょう。 HTMLサンプルコード <form name='form1'> 1つ目のformの入力欄：<input type="text" name='input1'> <input type="number"> <input type="checkbox" name='check' value='0'>確認する </form> <form name='form2'> 2つ目のformの入力欄：<input type="text" name='input2'> </form> JavaScriptサンプルコード document.forms[0].elements[0].value = '1つめのformの1つ目の入力欄に入る文字列です'; document.forms[0].elements[2].checked = true; document.forms[1].elements[0].value = '2つめのformの1つ目の入力欄に入る文字列です。' nameを利用した場合のサンプルコード document.forms['form1'].elements['input1'].value = '1つめのformの1つ目の入力欄に入る文字列です'; document.forms['form1'].elements['check'].checked = true; document.forms['form2'].elements['input2'].value = '2つめのformの1つ目の入力欄に入る文字列です。' 実行結果 See the Pen Document.forms by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. 解説 document.forms[0].elements[0].value = ‘1つめのformの1つ目の入力欄に入る文字列です’;では、document.forms[0].elements[0].valueで指定できる、HTMLの<input type=”text” name=’input1′>のvalueに、1つめのformの1つ目の入力欄に入る文字列ですを代入しています。 [0]のようなインデックスではなく、nameを利用して同じ指定を行う場合はnameを利用した場合のサンプルコードをご覧ください。 document.forms[0].elements[2].checked = true;では、document.forms[0].elements[2].checkedで指定できる、HTMLの<input type=”checkbox” name=’check’ value=’0′>のchecked に、trueを指定します。 checkedにtrueを指定することで、チェックボックスをチェックした状態にできます。 [0]のようなインデックスではなく、nameを利用して同じ指定を行う場合はnameを利用した場合のサンプルコードをご覧ください。 document.forms[1].elements[0].value
JavaScript

Bootstrapで採用されているReset.cssを現役エンジニアが解説【初心者向け】

Bootstrapで採用されているReset.cssについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Bootstrapで採用されているReset.cssについて詳しく説明していくね！ 大石ゆかり お願いします！   目次 Bootstrapとは Reset.cssのインストール方法 Reset.cssを使ってみよう まとめ   Bootstrapとは Bootstrapとは画面の見た目を簡単に整えることができるライブラリ集です。パソコンやスマートフォンなどの画面サイズが異なる複数のデバイスに対応したレスポンシブデザインのWebページを作成することが出来ます。 最新の安定版はBootstrap v4.5.0でBoostrap5の開発も進んでいます。Bootstrapについて、詳しくは公式ドキュメントも参考にしてください。 Bootstrap   [PR] Webデザインで副業する学習方法を動画で公開中Reset.cssのインストール方法 ブラウザには既定のCSSが適用されています。ブラウザ間でほとんど見た目に違いはありませんが、デザインを行う際にはじゃまになる場合があります。それらの既定のCSSを無効化するものがReset.cssと呼ばれるものです。 BootstrapにもReboot.cssというcssが含まれており、それを利用することで既定のCSSを無効化することができます。Reboot.cssはBootstrapのGithubのサイトからダウンロードできます。以下のリンク先からファイルを開き、名前をつけて保存してください。 bootstrap-reboot.css 保存したファイルをHTMLファイルから読み込めばインストール完了です。 <link rel="stylesheet" href="bootstrap-reboot.css"> Reboot.cssは適度に既定のCSSを無効化する点にポイントがあります。無効化というよりはスタイルを正常化するという方がふさわしいのかもしれません。Reboot.cssについて、詳しくは公式ドキュメントも参考にしてください。 Bootstrap – Reboot   Reset.cssを使ってみよう 今回のサンプルプログラムではReboot.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="bootstrap-reboot.css"> </head> <body> <h1>h1です</h1> <h2>h2です</h2> <p>あいうえお<br>かきくけこ</p> <a href="./">リンクタグ</a> </body> </html> はじめはReboot.cssを適用した状態です。 Reboot.cssを読み込まない場合と比較してみましょう。 要素のマージンなど、見た目が異なることが分かります。ただし見出しタグの効果は残されており、既定のCSSを完全に無効化するのではなくスタイルを正常化するというアプローチであることも確認できます。様々なブラウザで表示してみて違いを確認してみましょう。   まとめ 今回の記事ではBootstrapで採用されているReset.cssについて学習しました。   監修してくれたメンター 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門（技術評論社）」。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
CSS

初心者でも手軽にできる！Bootstrapで作るbutton(ボタン)の作り方

今回はBootstrapで作るbutton(ボタン)の作り方です。 ボタン要素をHTMLで記述すれば、ボタンとしての機能は果たしますが見た目が良いとは言えません。そこでCSSを自分で書かなくてもBootstrapを使えばデバイスのサイズに合わせて自動で調整してくれるボタンにしてくれます。 初心者の方でも難しい知識は必要ないので、すぐに利用できるでしょう。   本記事は、オンライン完結のBootstrap講座のカリキュラムをもとに執筆しています。   田島悠介 今回はBootstrapでボタンを作成してみよう。 大石ゆかり 田島メンター！！Bootstrapではどんなボタンが使えるんですか〜？ 田島悠介 バリエーションとしてdefault・primary・success・info・warning・danger・linkのタイプが用意されているよ。また、ボタンを押した状態や、無効化された状態を表現したりもできるんだ。 大石ゆかり かなり色々なことができるんですね。ぜひやってみたいです！   目次 ボタンの作り方 実際に作ってみよう   ボタンの作り方 <button>要素や<a>アンカー要素のクラスに「.btn .btn-***」を指定することでボタンを表示できます。 以下のボタンの種類があります。   デフォルト <button type="button" class="btn btn-default">Default</button>   プライマリー <button type="button" class="btn btn-primary">Primary</button>   サクセス <button type="button" class="btn btn-success">Success</button>   インフォメーション <button type="button" class="btn btn-info">Infomation</button>   ワーニング <button type="button" class="btn btn-warning">Warning</button>   デンジャー <button type="button" class="btn btn-danger">Danger</button>   田島悠介 基本の各種ボタンの使い方だよ。 大石ゆかり 各ボタンの用途によって、色が違っていますね。 田島悠介 そうだね。また、linkの場合は背景の色が設定されずにテキストだけが表示されるようになっているんだ。ボタンの大きさも変更できるのでそれも見てみよう。   また、ボタンのサイズは以下を指定して変更できます。 「.btn-lg」「.btn-sm」「.btn-xs」 使い方は次の通りです。 ラージボタン <button type="button" class="btn btn-default btn-lg">L-button</button>    スモールボタン <button type="button" class="btn btn-default btn-sm">S-button</button>   エクストラスモールボタン <button type="button" class="btn btn-default btn-xs">ES-button</button> 「.btn-block」で幅いっぱいに広がるブロックのボタンを作成できます。   書き方 <button type="button" class="btn btn-default btn-lg btn-block">B-button</button>   [PR] Webデザインで副業する学習方法を動画で公開中実際に書いてみよう 実際にHTMLを書いてみましょう。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
Bootstrap

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS BootstrapでCSSを上書きする方法を現役エンジニアが解説【初心者向け】