More Related Content
Similar to [WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
Similar to [WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法 (20)
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
- 2. 印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し、
Web デザイナーのアルバイトとして複数の制作会社を転々としたり
海外に行ったりしたあと横浜の制作会社に務める。
制作会社でデザイン、コーディング、ディレクション、
コンサル等を幅広く経験する。2012 年 4 月よりフリーランスとして独立。
「レスポンシブWebデザイン入門」執筆
小川 裕之
barchin hiro.ogw
- 29. @media screen and (min-width: 640px){
body{
background-color: red;
}
}
メディアがスクリーンで表示領域幅が
640px以上の場合背景色を赤にする
メディアタイプ メディア特性
CSS
- 30. メディア特性 情報 max-/min-
width 表示領域の幅 ○
height 表示領域の高さ ○
device-width デバイスの横方向の解像度 ○
device-height デバイスの縦方向の解像度 ○
orientation 表示領域の向き ☓
resolution 解像度 ○
- 34. body{
backgorund-color:red;
}
@media screen and (max-width:1024px){
body{
backgorund-color:blue;
}
}
@media screen and (max-width:767px){
body{
background-color:green;
}
}
767px1024px
デスクトップファースト
幅767px
以下に適用
幅1024px
以下に適用
全サイズ
に適用