こんばんは、こずえです。
プログラミング学習記録14日目です。
メディアクエリについて学習しました。
所感:メディアクエリのまとまりで取り組んでみたら情報量が多かった…!
ひとまず必要になったときに調べられるくらいは頭に入れておかないとですね(; ・`д・´)
目次
合計学習時間
前回までの時間:22.00[h]
今回の時間:1.75[h]
合計時間:23.75[h]
学習内容
はじめてのレスポンシブWebデザイン入門講座
- 3-1 メディアクエリとは(メディアクエリ)
- 3-2 メディアタイプ(メディアクエリ)
- 3-3 メディア特性(メディアクエリ)
- 3-4 環境に合わせた指定の追加(メディアクエリ)
- 3-5 ページの印刷(メディアクエリ)
メディアクエリとは
CSSを利用して各種デバイスに合わせた表示/出力方法を指定する。
デバイスの種類/表示解像度などを利用して、適切なものを自動的に選択する。
htmlで指定する
<link rel="stylesheet" href="./style.css" media="(メディアクエリの記述)">
それぞれの条件に合わせて別々にCSSを書く必要がある。
CSSで指定する
@media (メディアクエリの記述) { /*CSSの記述*/ }
@mediaの塊を複数記述することができるため1つのCSSでまとめることができる。
@mediaの外に記述されているCSSは全てに適用される。
メディアタイプ
どのようなデバイスであるか。
下記が代表的なもの。
- all:すべてのメディア
- screen:一般的なディスプレイ全般(スクリーン)
- projection:プロジェクター
- print:印刷
書き方の例
@media screen { /*CSSの記述*/ }
メディア特性
下記が代表的なもの。
- width:表示領域の横幅
- heigth:表示領域の高さ
- max-width:表示領域の横幅(このあとの指定が適用される最大値)
- min-width:表示領域の横幅(このあとの指定が適用される最小値)
- device-width:デバイスの横幅
- device-height:デバイスの高さ
- orientation:デバイスの向き(スマートフォン/タブレット向け)
- portrait:縦長
- landscape:横長
書き方の例:480px~720pxに適用
@media screen (min-width: 480px) and (max-width: 720px){ /*CSSの記述*/ }
環境に合わせた指定の追加
スマートフォンのフィット機能や高解像度ディスプレイなど、場合によって一手間必要なものがある。
スマートフォンのフィット機能対応
スマートフォンではPC向けのWebページを表示することもできる。
これはブラウザが画面の解像度をページに合わせる「フィット」という機能によるもの。
しかし、フィットが作動するとメディアクエリが正しく反映されない場合がある。
対策:HTMLにmetaタグを記述
下記をheadタグに記述する。
<meta name="viewport" content="width=device-width">
高解像度ディスプレイ対応
Retinaディスプレイなどの高解像度ディスプレイでは、一般的なサイズの半分に縮小されて表示される場合がある。
1ピクセルの表示に対して2つのピクセルを使用することで高解像度を実現しているため、ハードウェアの1ピクセルの大きさが通常と異なってきてしまう。
対策:media特性に追記
下記をmedia特性に追記する。
/*通常のディスプレイ*/ -webkit-device-pixel-ratio:1 /*Retinaなどの高解像度ディスプレイ*/ -webkit-device-pixel-ratio:2
また、画像は高解像度ディスプレイの方では2倍のサイズのファイルを用意することで綺麗に表示させることができる。
ページの印刷
print(印刷)について。
使うべき単位
絶対的な数値で指定する(基準に使用)。
- cm
- mm
- inch
- pt
リンクの対応
印刷されたものはリンク先を確認できないため、下記のように記述することでURLを後ろに出すことができる。
/*後ろにURLを出す*/ a[href^="http:"]::after { content: " [" attr(href) "]"; color: blue; }
印刷ページ毎の指定
印刷するときに一部CSSを変更したい場合は下記のように記述する。
@page { margin: .5cm; } @page:first { /*最初のページに対する指定*/ }
改ページ位置をコントロールする
各ページ毎にどのように改行をするかの指定は下記のプロパティを使用する。
- page-break-befor
- page-break-inside
- page-break-after
例
/*これを指定した要素の直後は改ページをしない*/ page-break-after: avoid;
改ページの最低行数の指定
- orphans:前ページの最低行数の指定
- widows:次ページの最低行数の指定