プログラミングで月収5万円になるまでの記録14日目

こんばんは、こずえです。
プログラミング学習記録14日目です。
メディアクエリについて学習しました。

所感：メディアクエリのまとまりで取り組んでみたら情報量が多かった…！
ひとまず必要になったときに調べられるくらいは頭に入れておかないとですね(; ･`д･´)

合計学習時間

前回までの時間：22.00[h]
今回の時間：1.75[h]
合計時間：23.75[h]

CSSを利用して各種デバイスに合わせた表示/出力方法を指定する。
デバイスの種類/表示解像度などを利用して、適切なものを自動的に選択する。

<link rel="stylesheet" href="./style.css" media="(メディアクエリの記述)">

それぞれの条件に合わせて別々にCSSを書く必要がある。

@media (メディアクエリの記述) {
	/*CSSの記述*/
}

@mediaの塊を複数記述することができるため1つのCSSでまとめることができる。
@mediaの外に記述されているCSSは全てに適用される。

どのようなデバイスであるか。
下記が代表的なもの。

書き方の例

@media screen {
	/*CSSの記述*/
}

下記が代表的なもの。

書き方の例：480px～720pxに適用

@media screen (min-width: 480px) and (max-width: 720px){
	/*CSSの記述*/
}

スマートフォンのフィット機能や高解像度ディスプレイなど、場合によって一手間必要なものがある。

スマートフォンではPC向けのWebページを表示することもできる。
これはブラウザが画面の解像度をページに合わせる「フィット」という機能によるもの。
しかし、フィットが作動するとメディアクエリが正しく反映されない場合がある。

下記をheadタグに記述する。

<meta name="viewport" content="width=device-width">

Retinaディスプレイなどの高解像度ディスプレイでは、一般的なサイズの半分に縮小されて表示される場合がある。
1ピクセルの表示に対して2つのピクセルを使用することで高解像度を実現しているため、ハードウェアの1ピクセルの大きさが通常と異なってきてしまう。

下記をmedia特性に追記する。

	/*通常のディスプレイ*/
	-webkit-device-pixel-ratio:1
	/*Retinaなどの高解像度ディスプレイ*/
	-webkit-device-pixel-ratio:2

また、画像は高解像度ディスプレイの方では2倍のサイズのファイルを用意することで綺麗に表示させることができる。

print(印刷)について。

絶対的な数値で指定する(基準に使用)。

印刷されたものはリンク先を確認できないため、下記のように記述することでURLを後ろに出すことができる。

/*後ろにURLを出す*/
a[href^="http:"]::after {
	content: " [" attr(href) "]";
	color: blue;
}

印刷するときに一部CSSを変更したい場合は下記のように記述する。

@page {
	margin: .5cm;
}
@page:first {
	/*最初のページに対する指定*/
}

各ページ毎にどのように改行をするかの指定は下記のプロパティを使用する。

例

	/*これを指定した要素の直後は改ページをしない*/
	page-break-after: avoid;