81日目 | web制作
本日は…
■昨日の復習
＜用語解説＞
ベンダープレフィックス…ベンダー（販売元）＋プレフィックス（接頭詞）
つまり命令の頭に、メーカーごとにつけてやる言葉（詞）のこと。
-moz- /* Firefox */ -webkit- /* chromeとsafari */ -o- /* Opera* -ms- /* IE */
この４つは覚えておく。
※スマホ専用サイトはandoroidとiosに対応させておけばOK。つまりwebkitだけ付けておけばOK
※レスポンシブ（PCで見る可能性がある場合）は最大で４つ書いてやる必要がある
⇒CSS3的には、ベンダープレフィックスなしのものを併記することが正しいとしている（W3Cにかけるとエラーがでる）
Retinaディスプレイ…Retinaとは網膜のことで、人間の網膜が認識可能な画素数と同じ？かそれ以上を目指す？というような意味合いで名付けられたappleさんの技術（現在は一部androidoさんでも使用されている）
kray.jp
www.mdn.co.jp
このあたりの記事を読んで、ようやくRetinaの仕組みが理解できた（はず）。
個人的なまとめとして、要は
CSSの描画はCSS解像度で行われるが、画像はディスプレイの実解像度をもとに描画される
から、ディスプレイの実解像度640pxもあると、320pxの枠からは当然はみ出してしまうので、それをcssで半分サイズ（＝実際に表示したいサイズ）に指定してやれば、思い通りのサイズに表示される、ということかと。
余談でRetinaな画像をphotoshopで作るときに便利な機能のメモ（プレビューのはずがでっかくてびっくりします）
tech.gmodecorp.com■background-sizeの話
coverとcontainの違い
どっちも画像の縦横費は保持する。
containは領域内に全部表示できる中で最大サイズ、つまり長いほうを画面サイズに合わせている。
coverは全画面を埋める（隙間をなくす）ので、長いほうは見切れる、つまり短いほうを画面サイズにあわせている。
※画像を基本的には16:9の画面にあわせて作るが、画面には上にブラウザのメニューなどがあるので、18:8で作るのがちょうどいい
※※画像を同様にフルードさせたいときはmax-width:100%にしてやればいい。背景画像にはmax-widthを指定できないので、上記の方法（background-size）で指定する
忘れないように！
画像に対してmax-width:100%をしてやると画像が可変になる（フルードイメージ）
■スマホ専用サイトを作る
metaに入れるべき項目
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telphone=no,email=no"><!--これをつけないと4桁以上の数字を 全部電話かけてしまうので、入れておく。電話かけたいものには別個に属性を指定する--> <link rel="apple-touch-icon" href="apple-touch-icon.png"><!--お気に入りにした時に表示されるアイコン-->
・背景をグラデに
background-image: -webkit-linear-gradient(bottom, #94afc5, #fff);
※photoshopで、ウィンドウからエクステンション機能 > CSS3Ps←超便利
スタイルをPsで適用してから、クリックすると、コードを吐き出してくれる
→borderradiusにもベンダープレフィックスがかかって出てくるが、必要ない
●土日の予定
・今日作ったスマホサイトを自分用に作ってくる
・餃子サイトにviewport入れてみる
・出来れば少しスマホに対応。トップだけでも…
liginc.co.jp
レスポンシブサイト制作の参考に読んでおきたい…
■悲しいお知らせautocoding.jp
悲しいです。悲しい…
