デバイスに合わせたい!CSSのメディアタイプの使い方【初心者向け】

初心者向けにCSSでメディアタイプの使い方について解説しています。Webサイトはデバイスに応じてレイアウトを整える必要があるので、覚えておくと良いでしょう。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

今回はCSSのメディアタイプについて説明をしていきます。デバイスに合わせてレイアウトを変えるために必要な知識なので、Webサイト制作に役立つでしょう。

そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。

 

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

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

田島悠介

今回はメディアタイプを指定する方法を練習してみよう。

大石ゆかり

田島メンター!!メディアタイプというのは何ですか〜?

田島悠介

CSSでは各メディアごとに適用するスタイルを変えることができるんだ。まずは基本の書き方を見ていくよ。

大石ゆかり

了解です!

 

目次

 

メディアタイプとは

メディアタイプとはそのままの意味で、Webサイトを閲覧している人が使っている媒体を検出するものです。

Webサイトによっては印刷時にレイアウトが崩れるなど意図していない形でのWebページのバグが発生しますが、メディアタイプではそれを回避する設定ができます。

印刷用のページやプロジェクターに出力するページなどを作ることができるという事です。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

メディアタイプの書き方

メディアタイプは2種類の書き方があります。

1つ目

<link rel="stylesheet" href="sample.css" type="text/css" media="screen">

 

2つ目

@media screen{
  /*screenで適用する内容*/
}

1つ目はメディアタイプによって適用するCSSを変更する<link>を使用したものです。

2つ目はCSS内にメディアタイプごとの設定を書くというものです。

CSSを大量に作るのは大変なので、特別変更が多いときは別々の記述を推奨しますが、今回は2つ目のやり方を例にとって作ってみましょう。

ちなみに、メディアタイプには次の種類があります。

  • screen(ディスプレイ)
  • print(プリンタ)
  • tv(テレビ)
  • projection(プロジェクター)
  • all(すべて)

他にもありますが、主に使うのはscreen、printでしょう。また、二つに適用するときは「,」(カンマ)を用いて行うことができます。

サンプルコード

@media screen,print{
  /*screenとprintで適用する内容*/
}

 

田島悠介

指定したいメディアタイプと、その内容を入力するんだ。

大石ゆかり

該当のメディアで表示したとき、そこで入力されているものが適用されるんですね。

田島悠介

次は実際に、2つのメディアタイプでスタイルを記述してそれぞれの状態で見てみよう。

 

実際に書いてみよう

実際にコードを書いてみましょう。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>メディアタイプ</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>

    <h1>Sample</h1>
    <p>メディアによって背景色が変わります。</p>
    <p>screen : 通常のディスプレイ : #d9534f(赤)</p>
    <p>print : 印刷時 : #5bc0de(青)</p>

  </body>
</html>

CSS

@media all{
  p{
    color:#000000;
  }
}

@media print{
  body{
    color: #5bc0de;
  }
}

@media screen{
  body{
    color: #d9534f;
  }
}

これはメディアタイプの「screen」が適用されている画面です。

「Sample」という文字が赤になっているはずです。

スクリーンショット 2016-08-30 11.58.05

次に印刷をしてみましょう。印刷プレビューを立ち上げます。

「Sample」という文字が青になっています。

スクリーンショット 2016-08-30 11.59.28

これはメディアタイプの「print」が適用されている画面です。CSS2での機能で、CSS3からはメディアクエリが追加されています。

このメディアタイプの拡張的機能で、レスポンシブデザインを実現します。

 

田島悠介

ブラウザで見たときと、印刷プレビューで見たときの状態だよ。

大石ゆかり

@media printの部分で指定されている色が、印刷時に適用されているのが分かりますね。

田島悠介

色々な媒体に対応したサイトを作成する際にメディアタイプの指定は重要になるよ。必要に応じて利用してみよう。

大石ゆかり

うまく使えるように挑戦してみます。ありがとうございました!

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。