どうも。2日続けての更新が久しぶりすぎて「アルマゲドン」初めて見たときと同じぐらい感動しています。あれ王道の展開ですけど、先読めますけど、感動しますよね。エンドロールであの曲のPVが流れて「エアロスミスの人、口でけぇ！」って思いながらも泣いてました。
今日は「3-1 メディアクエリとは」から「3-5 ページの印刷」まで見ました。座学だったので作業はしませんでした。つまんなかった。
勉強したこと
メディアクエリ：デバイスに応じて適用するスタイルを切り替える機能
指定方法はHTMLとCSSで異なる
HTML：linkタグ内に media="メディアクエリの記述" を入れる
CSS：@media メディアクエリの記述 {
CSSの記述
}
※@mediaの外に書かれたCSSは全てに適用される
メディアタイプ：表示させるメディアを指定
all：すべてのメディア
screen：ディスプレイ。スクリーン
print：印刷用
環境に応じて表示できるよう指定する
スマホ：<meta name="viewpoint" content="width=device-width">
↑を<head>内に入れる
高解像度ディスプレイ：weblit-pixel-ratio:2
※高解像度向けの画像は、縦横2倍のサイズの画像を用意する（ピクセル数が2倍多いので）
ページの印刷
cmやmm、ptといった数値で指定する
リンクは飛べなくなるのでURLを確認できるようにする
タグは下のページのをコピペして使おう。
あとの印刷のCSSは覚えられる気しなかったので、必要に応じて↓のページを見ようと思います。
「3-3 メディア特性」では実際に使うタグの動画も見ました。「width」とか「height」とかおなじみのやつはメモしなくていいやと思って省略しました。
残しておきたいのは
min-width
max-width
の二つ。まぁwidthじゃなくてheightでもいいんだけど。この二つの使いどころがようわからんかったのでググりました。んで真っ先に出てきた何度もお世話になってるサルワカさん。
図で説明してくれてるのホントありがたい。PCだとちょうどいいけどスマホだと小さすぎる、ってときとか、他のデバイスで見ても見えやすく表示させるために使うことが多いそうで。勉強になりました。
今日のメモがどえらい雑なのは勉強がつまんなかったからです。やっぱ実際に手動かさないと勉強した気がしない…
そしてなぜか目次の小見出しの部分だけ太字で気持ち悪いけど、もう今日は直す気力ないので今度やります。
残すところ動画はあと4本。「レスポンシブWebデザインの動画を全部見る」という目標はとりあえず達成できそうです。ではでは。
