デバイスに合わせたい！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デザインオンラインブートキャンプを開催しています。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
