TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS Bootstrapで採用されているReset.cssを現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
CSS

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

初心者向けにBootstrapで採用されているReset.cssについて解説しています。Reboot.cssはブラウザの既定のCSSを無効化するのに使用されます。無効化を行う理由、実際にReboot.cssを使ったときの画面上の変化を見てみましょう。

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

Bootstrapで採用されているReset.cssについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

Bootstrapで採用されている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のfilterプロパティで画像を編集する方法を現役エンジニアが解説【初心者向け】

今回は、CSSでfilterプロパティで色を変化させたり、ぼかしたりすることができる方法について、TechAcademyのメンター（現役エンジニア）が実際のコー...
CSS

CSSで画像の縦横比を維持したまま拡大する方法を現役エンジニアが解説【初心者向け】

CSSで画像の縦横比を維持したまま拡大する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

背景に画像などを入れたい！CSSで背景を指定する方法【初心者向け】

本記事ではHTML要素に対し、CSSで背景を指定する方法を現役エンジニアが解説します。 目次 CSSで背景を編集する書き方 実際にCSSで背景...
CSS

selectとoptionをCSSでカスタマイズする方法を現役エンジニアが解説【初心者向け】

select optionをCSSでカスタマイズする方法についてテックアカデミーのメンター（現役Webデザイナー）が初心者向けに解説します。 目次 ...
CSS

要素を透明にする！CSSのopacityの使い方【初心者向け】現役Webデザイナーが解説

CSSで書くopacityの使い方をテックアカデミーのメンター（プロのWebデザイナー）が初心者向けに実際のコードを使って解説しています。 最近、画像上に...
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

CSSのスタイルを無効化する方法を現役エンジニアが解説【初心者向け】

CSSのスタイルを無効化する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 スタイルを無効化する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 特定要素のスタイルを解除する方法 全体のスタイルを解除する方法 スタイルの注意点 CSSのスタイルを無効化してみよう まとめ   特定要素のスタイルを解除する方法 特定要素のスタイルを解除するにはinitialキーワードを使用します。initialは要素のスタイルをブラウザで設定している初期値の戻すキーワードです。例えばfont-sizeプロパティを初期値に戻すには以下のように指定します。 font-size: initial; initialキーワードについて、詳しくは以下の記事も参考にしてください MDN – initial   [PR] Webデザインで副業する方法とは全体のスタイルを解除する方法 ブラウザには既定のスタイルが存在します。既定のスタイルはほとんどのブラウザで同等ですが、Webサイトのデザインをしっかりと作り込みたい場合は、既定のスタイルを統一した上で独自のCSS適用したい場合が多いでしょう。このような場合に役立つのがResetCSSです。 ResetCSSはブラウザの既定のスタイルを正常化します。代表的な例としてBootstrapというライブラリに含まれているReboot.cssがあります。Reboot.cssはBootstrapのGithubのサイトからダウンロードできます。以下のリンク先からファイルを開き、名前をつけて保存してください。 bootstrap-reboot.css 保存したファイルをHTMLファイルから読み込めばインストール完了です。 <link rel="stylesheet" href="bootstrap-reboot.css"> Reboot.cssについて、詳しくは公式ドキュメントも参考にしてください。 Bootstrap – Reboot   スタイルの注意点 initialはInternet Explorerには対応していません。利用の際は注意しましょう。またinitialは既定のスタイルには戻りますが、スタイルを継承している場合には思ったような結果にならない可能性があります。 initialを利用するよりはCSSセレクタを活用して適宜スタイルを設定したほうがコントロールしやすいでしょう。   CSSのスタイルを無効化してみよう 今回のサンプルプログラムではinitialキーワードとResetCSSを使用する方法について確認します。 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"> <style> div { font-size: 3rem; background-color: lightblue; width: 300px;
CSS

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

BootstrapでCSSを上書きする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 BootstrapでCSSを上書きする方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Bootstrapとは Bootstrapを使った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
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

横並びにもできる！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

スマホ対応！CSSでメディアクエリの書き方【初心者向け】現役エンジニアが解説

今回はBootstrapなどを使わずにレスポンシブページを実現する方法であるメディアクエリについて説明します。 Webサイトを作る上でスマホ対応は当たり前になってきています。 メディアクエリとはメディアタイプやメディア特性によって表示を変えるレスポンシブデザインで利用する設定です。 レスポンシブデザインではスマホやタブレットやPCによって変わるメディアタイプやメディア特性に応じた最適な表示にするデザインを言います。 メディアクエリを理解することはレスポンシブデザインへの理解へとつながる基礎的な部分になります。 メディアクエリを理解することで、Web制作において様々な端末で最適な表示を可能にできます。 これからWebサイトを作る上では必ず必要になる知識なので、ぜひ今のうちに習得しましょう。 目次 動画で学ぶ！メディアクエリとは メディアクエリとは Web制作で推奨されているメディアタイプ メディア特性 メディアクエリの書き方 複雑なメディアクエリの組み合わせを実現する方法 実際に書いてみよう   田島悠介 今回はメディアクエリを利用する方法を解説しよう。 大石ゆかり 田島メンター！！メディアクエリというのは何ですか〜？ 田島悠介 スクリーンや印刷などのメディアタイプに加えて、さらに縦横の長さなどによるスタイルの適用範囲を決めることができるものなんだ。 大石ゆかり なるほど、いろいろな条件に対応して見え方を変えるという感じでしょうか？よろしくお願いします！ 動画で学ぶ！メディアクエリとは 今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。 [PR] Webデザインで副業する方法とはメディアクエリとは 今や、Webページを閲覧する際にレスポンシブデザインであることは当たり前になりつつあります。 メディアクエリはCSSを用いて、レスポンシブなWebページを作ることができます。 CSS3になってから登場した新しい表現なのでぜひ習得していきましょう。   メディアタイプの種類 メディアタイプ 対応デバイス all すべてのデバイス braille 点字用ディスプレイ embossed 点字用プリンター handheld モバイルデバイス print プリンター projection プロジェクター screen ディスプレイ speech 音声出力デバイス tty 固定幅フォントで出力するデバイス tv テレビ   なお、メディアクエリ4からは、screen, print, speech, all を除くすべてのメディアタイプを非推奨に指定されています。   Web制作で推奨されているメディアタイプ Web制作で推奨されているメディアタイプは以下の4つです。 all screen print speech について詳しく解説していきます。   all すべてのメディアタイプに適用されます。   コード例 @media all { p { color: green; } } 表示結果   解説 次のように@media allで宣言して{}内で指定のcssを記載すると適用されます。 allで適用すると結果的にすべてのメディアタイプで同じ処理になります。 今回はcolor: white;で色が緑色になります。   screen ディスプレイが存在するメディアタイプに適用されます。 PC、スマホ、タブレットはscreenです。   screenの動作 See the Pen medis by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. 解説 screenのcolor:redという指定で文字が赤色で表示されています。   print 印刷用に適用されます。 印刷プレビュー画面で確認できます。   print表示結果 解説 screenのコードを印刷プレビューすると、青色になります。   speech 音声読み上げ機能の際に適用されます。 今回は、次のコードで「メディアタイプによる、色、処理の変化」音声出力した場合、「、」の部分で空白時間が発生し、自然な語り口になります。 @media speech { p { speak: literal-punctuation; } }   メディア特性 メディア特性名 メディア特性 any-hover マウスを該当要素の上に移動させた場合に処理をします。この移動をホバーと言います。 any-pointer ポインティングデバイスの性能に応じて表示するcssを変更できます。 aspect-ratio ビューポートの幅対高さのアスペクト比に応じて表示するcssを変更できます。 color 機器の表示色数性能に応じて表示するcssを変更できます。 color-gamut 機器の表示色域に応じて表示するcssを変更できます。 color-index 機器の色参照テーブルの項目数に応じて表示するcssを変更できます。 device-aspect-ratio 機器の幅対高さのアスペクト比に応じて表示するcssを変更できますが非推奨です。 device-height 機器のレンダリング面の高さを指定できますが、非推奨です。 device-width 機器のレンダリング面の幅を指定できますが、非推奨です。 display-mode cssのdisplay-modeで指定した内容に応じて表示するcssを変更できます。 forced-colors カラーパレットを制限している場合に応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。 grid 機器がグリッドとビットマップ画面のどちらを利用するか指定できます。 height ビューポートの高さを指定できます。 hover マウスホバーした際のcssを指定できます。 inverted-colors 色が反転している場合にcssを適用できますが、Safariのみ利用可能です。メディアクエリ5以降の追加機能です。 light-level 明るさに応じて表示するcssを変更できますが、メディアクエリ5以降の追加機能です。 monochrome 機器のモノクロ出力情報に応じて表示するcssを変更できます。 orientation ビューポートの向きに応じて表示するcssを変更できます。 overflow-block ブロック軸方向にあふれたコンテンツの扱いに応じて表示するcssを変更できます。 overflow-inline インライン軸方向にあふれたコンテンツがスクロールできるかに応じて表示するcssを変更できます。 pointer ポインティングデバイスの性能に応じて表示するcssを変更できます。ただし、 any-pointerのほうがより正確に処理できます。 prefers-color-scheme ユーザーが表示させたい明るさに応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。 prefers-contrast 隣接色のコントラスト量の増減に応じて表示するcssを変更できます。ただ、実験段階のため表示できるブラウザは存在しません。 prefers-reduced-motion ユーザーが表示上で動きを少なくしたい場合に適用できます。前庭運動障害をお持ちの方向けの設定です。メディアクエリ5以降の追加機能です。 prefers-reduced-transparency ユーザーが透明度を下げたいと希望している場合に適用できます。メディアクエリ5以降の追加機能です。 resolution 機器のピクセル解像度に応じて表示するcssを変更できます。 scan 機器のスキャン処理方式に応じて表示するcssを変更できます。 scripting JavaScriptなどのスクリプト利用に応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。 update コンテンツ表示更新頻度に応じて表示するcssを変更できます。 width ビューポートの幅に応じて表示するcssを変更できます。   メディアクエリの書き方 メディアクエリの書き方は以下の通りです。 link要素として指定する場合 スタイルシートに指定する場合 CSS内で@importする時に記述する CSS内で@mediaを記述する 詳しく解説していきます。   link要素として指定する場合 headerのlink要素でメディアクエリを指定する方法を解説します。 サンプルコード <link rel="stylesheet" href="./media.css" media="screen and (max-width: 780px)"> 解説 href=”./media.css”では、読み込むファイルのパスを、同じ階層にあるmedia.cssで指定しています。 media=”screen and (max-width: 780px)”では、メディアタイプの指定 and (メディア特性の指定)を行っています。 今回は表示デバイスの最大幅が780pxの場合適用されます。 つまり実際の表示の変化はmedia.cssの実装が適用されます。   CSS内で@importする時に記述する スタイルシート内に@importを利用してメディアクエリを適用する方法について解説します。 サンプルコード @import url('media.css') screen and (max-width: 780px); 解説 @importでインポートすることを宣言しています。 url(‘media.css’)でmedia.cssをインポートしています。 screen and (max-width: 780px)では、メディアタイプの指定 and (メディア特性の指定)を行っています。 今回は表示デバイスの最大幅が780pxの場合、media.cssが適用されます。 つまり実際の表示の変化はmedia.cssの実装が適用されます。   CSS内で@mediaを記述する スタイルシート内に@mediaを利用してメディアクエリを適用する方法について解説します。 サンプルコード @media screen and
CSS

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS Bootstrapで採用されているReset.cssを現役エンジニアが解説【初心者向け】