デバイスに合わせたい！CSSのメディアタイプの使い方【初心者向け】
初心者向けにCSSでメディアタイプの使い方について解説しています。Webサイトはデバイスに応じてレイアウトを整える必要があるので、覚えておくと良いでしょう。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
今回はCSSのメディアタイプについて説明をしていきます。デバイスに合わせてレイアウトを変えるために必要な知識なので、Webサイト制作に役立つでしょう。
そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
今回はメディアタイプを指定する方法を練習してみよう。
田島メンター！！メディアタイプというのは何ですか〜？
CSSでは各メディアごとに適用するスタイルを変えることができるんだ。まずは基本の書き方を見ていくよ。
了解です！
目次
メディアタイプとは
メディアタイプとはそのままの意味で、Webサイトを閲覧している人が使っている媒体を検出するものです。
Webサイトによっては印刷時にレイアウトが崩れるなど意図していない形でのWebページのバグが発生しますが、メディアタイプではそれを回避する設定ができます。
印刷用のページやプロジェクターに出力するページなどを作ることができるという事です。
メディアタイプの書き方
メディアタイプは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」という文字が赤になっているはずです。
次に印刷をしてみましょう。印刷プレビューを立ち上げます。
「Sample」という文字が青になっています。
これはメディアタイプの「print」が適用されている画面です。CSS2での機能で、CSS3からはメディアクエリが追加されています。
このメディアタイプの拡張的機能で、レスポンシブデザインを実現します。
ブラウザで見たときと、印刷プレビューで見たときの状態だよ。
@media printの部分で指定されている色が、印刷時に適用されているのが分かりますね。
色々な媒体に対応したサイトを作成する際にメディアタイプの指定は重要になるよ。必要に応じて利用してみよう。
うまく使えるように挑戦してみます。ありがとうございました！
[お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
