
スキルアップ
2021.04.15
社会人におすすめなプログラミングスクールの条件とは?目的別25校と選び方
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
ITコラム
2017.01.24
メタデータ・コンテンツの要素の1つであるlink要素の中で、今回は、CSSをメディア別に切り替える方法についてまとめます。
HTML 【メタデータ】1 ~ メタデータ・コンテンツの概要とbase要素
HTML 【メタデータ】2 ~ link要素(1)MIMEタイプ一覧と属性一覧
HTML 【メタデータ】2 ~ link要素(2)CSSファイルの読み込み
HTML 【メタデータ】2 ~ link要素(3)media属性( 本ページ )
HTML 【メタデータ】2 ~ link要素(4)@importと@media
HTML 【メタデータ】2 ~ link要素(5)rel属性
HTML 【メタデータ】3 ~ style要素
HTML 【メタデータ】4 ~ meta要素
1.media属性とメディアタイプ
2.media属性でCSSを切り替える
3.media属性でPDFに切り替える
media属性の値はメディアタイプです。
メディアタイプとは、Webサイトを出力(見る、聞く、印刷)するメディア(機器)のことで、下記のような種類があります。
メディアタイプ | メディアタイプの概要 |
---|---|
all | すべての機器(デフォルト値) |
screen | 一般的なコンピュータ用カラーディスプレイ |
tv | テレビ画面(スクロール制限のあるカラーモニタ) |
handheld | 携帯電話などの端末(小さい画面、モノクロ、周波帯域が小さいもの) |
プリンタ | |
projection | プロジェクタ(投影機やOHPなど) |
tty | 文字幅が固定された機器 |
speech (以前のaural) |
音声ブラウザなど音声を生成するデバイス (CSS3ではauralは非推奨です) |
braille | 点字ディスプレイなど |
embossed | 点字プリンタ |
メディアタイプを指定すると、ブラウザは関係ない機器用のスタイルシートは読み込みません。この性質を利用して、アクセシビリティを向上させられます。
関係ない機器への指定は読み込まないので、その分読み込み時間が短くなります。
※アクセシビリティ(accessibility) とは、「アクセスのしやすさ」という意味です。
media属性の値は、1つだけでなく、「screen, projection, print」のように「,(カンマ)」で区切って複数の値をまとめて指定することができます。
media属性を省略すると、メディアタイプは、デフォルトのallになります。
CSSをプリント用に切り替える場合は、次のように指定します。
<head> <link rel="stylesheet" media="screen" href="default.css" type="text/css"> <link rel="stylesheet" media="print" href="print.css" type="text/css"> </head>
2種類のCSSを指定してmedia属性の値を変えています。
こうすることでブラウザは、画面(screen)ではdefault.cssで表示し、印刷時にはprint.cssを使って印刷します。
装飾のために画像などの指定をしたCSSは、音声ブラウザなどでは無意味のため、読み込み時間が無駄になってしまいます。そこで、音声ブラウザ専用等のCSSがあれば、media属性で指定しておくと、より良い環境を提示できます。
CSSを音声ブラウザや点字ディスプレイ用に切り替える場合は、次のように指定します。
<head> <link rel="stylesheet" media="screen" href="default.css" type="text/css"> <link rel="stylesheet" media="print" href="print.css" type="text/css"> <link rel="stylesheet" media="aural, braille, embossed" href="print.css" type="text/css"> </head>
link要素の3番目に、aural、braille、embossedをまとめて指定しています。
もちろん、音声ブラウザや点字ディスプレイなどへの専用のCSSが無い場合は、3番目のlink要素は不要です。その場合は、HTML文書を正しく構築する事に留意すれば良いと思います。
同じHTMLを、表示幅によってCSSを切り替えて表示することができます。そうすることで、スマホやタブレット等、小さい画面のユーザが、文字や写真をより見やすくなります。
表示幅によってCSSを切り替える場合は、次のように指定します。
<head> <link rel="stylesheet" type="text/css" href="css/default.css"> <link rel="stylesheet" media="screen and (min-device-width: 480px) and (orientation:landscape)" href="css/yoko.css" type="text/css"> <link rel="stylesheet" media="screen and (min-device-width: 480px) and (orientation:portrait)" href="css/tate.css" type="text/css"> <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="smartp.css" type="text/css" /> </head>
link要素の1番目はデフォルトのCSSです。
link要素の2番目は画面幅が480px以上で「landscape(横長)」=タブレットが横持ちのときのCSS、
link要素の3番目は画面幅が480px以上で「portrait(縦長)」=タブレットが縦持ち用のCSS、
link要素の4番目は画面幅が480px以下として、スマホ用のCSSを適用する指定です。
PC用HTMLをスマホやタブレット用にも使用する場合は、幅の変化に対応できるレイアウトにすることが重要です。画像サイズをRetina Display用に倍にしておくとか、tableは使用せずlistで処理するなどの工夫が必要です。
これまでは、外部CSSを切り替える方法でしたが、link要素でHTMLファイルそのものを他のファイルに切り替えることもできます。
例えば、印刷用のPDFファイルへの切り替えは、次のように指定します。
<head> <link rel="alternate" media="print" href="print.pdf" type="application/pdf"> </head>
rel=”alternate”としています。alternateという値は代替書類という意味です。
上の例では、HTMLファイルの代替書類として、print.pdfを印刷用(media=”print”)に指定しています。
このとき type属性で指定するMIMEタイプはapplication/pdfです。
(MIMEタイプについてはMIMEタイプ一覧をご参照下さい。)
スキルアップ
2021.04.15
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
スキルアップ
2021.04.15
Webディレクターとは、Webサイト制作や、企画、運用の現場においてリーダーの役割を担う職種です。多くの業務をこなすため大変な仕事ではありますが、その分やりがいや魅力もある仕事です。本記事では、Webディレクターの具体的 […]
スキルアップ
2021.04.14
IT業界やエンジニアという職種に対してなんとなくイメージは持っているものの、具体的にどんな仕事をしているのか詳しく知らないという方もいらっしゃるでしょう。本記事では、IT業界とはどんな業界なのかをわかりやすく解説。各業種 […]
スキルアップ
2021.04.02
IT業界未経験からITエンジニアへ転職しようとするとき、強い味方になってくれるのが資格です。IT系の資格試験には数多くの種類があり、取得することでスキルの証明が可能。本記事では、未経験者が就職を有利にするためのおすすめ資 […]
スキルアップ
2021.04.01
「プログラミングができると就活が余裕らしいけど、大学生のうちにプログラミングを学ぶメリットって何?」と考えている方に向けて、本記事では元エンジニアである筆者がこれまでの経験則をもとに、在学中にプログラミングを学習するメリ […]
スキルアップ
2021.04.01
【2021年最新】いざJava SE 11のBronze資格にチャレンジしようと思っても「申込方法が複雑すぎて難しい…」と困っている方も多いのでは?本記事では、2020年に新しくなったOracle認定Javaプログラマ試 […]
INTERNOUS,inc. All rights reserved.