ARCHIVE  ENTRY  COMMENT  TRACKBACK  CATEGORY  RECOMMEND  LINK  PROFILE  OTHERS
<< September 2020 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
<< nohanaを使ってみました | main | リーダブルコード より良いコードを書くためのシンプルで実践的なテクニック >>
2016.02.05 Friday

スポンサーサイト

一定期間更新がないため広告を表示しています

2013.11.09 Saturday

現役、Microsoft MVP受賞者の講師が登壇!!マルチデバイス時代のレスポンシブウェブデザイン!!流行に乗り遅れないWebデザイン制作手法をあなたに教えちゃいます!!

先日、表題の勉強会に参加してきました。
仕事が忙しかったので久しぶり。
渋谷ヒカリエ、レバレジーズ、内装が奇麗になってました。

普通の会社でシステム開発をしながら、専門学校や勉強会の講師をされている山崎大助さんの登壇。
レスポンシブウェブデザインについて。
本も出版されてる。
評価は高いです。面白そう。


PC、タブレット、スマートフォンにwebの見た目をあわせるレスポンシブウェブ。
まず、レスポンシブウェブは流行ではない!と。
一時的なものではなく、技術として定着していくであろうものであるとのこと。
近年、PCよりタブレットが売れていたり、サイトアクセスがPCよりもスマートフォンのほうが多いなどという話題を聞きますので納得のいくところです。
中高校生がスマートフォンを持っているような時代だから、スマートフォンからwebの世界に入っている人にとって、PCの必要性を感じない人も多いのではないのでしょうか。
PCよりもモバイルを優先する時代が来つつある。
だから、流行ではなく、必然。

かつてのモバイル対応といえば、URLを分けたり、ユーザエージェントで振り分けをするものでした。
モバイルごとのサイトを別個に用意していたので保守性が低い。
それが、css3のmedia queryという機能を使うことで、スクリーンサイズでスタイルシートを切り替えるということが実現できる。
それなりのデザイン設計が必要になってはくるが、1ソースマルチデバイスが可能。

スクリーンサイズの基準をブレークポイントという。
・スマートフォン 480px
・タブレット 768px
・パソコン 980px

■media queryの例
1.css
/* 480px以下 スマートフォン向け*/
body { ... }

/* 481px - 768px タブレット向け */
@media only screen and (min-width: 481px) {
    body { ... }
}

/* 769px - パソコン向け */
@media only screen and (min-width: 769px) {
    body { ... }
}

2.link
<link href="sp.css">
<link media="screen and (min-width:481px) href="tablet.css"> 
<link media="screen and (min-width:769px) href="desktop.css">

3.@import
@import url("sp.css");
@import url("tablet.css") only screen and (min-width: 481px);
@import url("desktop.css") only screen and (min-width: 769px);

山崎さんは1の手法がhttpリクエストを減らせるので、オススメだそう。
また、ie6-8はmedia queryに未対応なので、ライブラリを併用することで利用可能になる。
・css3-mediaqueries.js
・respond.js
ie使えねー。

■viewport
metaタグにviewportという属性がある。
・モバイル端末ブラウザの表示幅
・ピンチによる、拡大縮小可否
・拡大縮小の最大、最小倍率
など指定できる。


<meta name="viewport" content="width=1024">
⇒appleはPCもスマートフォンも同じ幅で見せる。

<meta name="viewport" content="device-width">
⇒端末画面の幅にあわせる

■imgの比率
比率を保つcssの記述
img {
    max-width: 100%;
    height: auto;
}

■参考サイト
microsoft
nathan sawaya
media queryies
adobe

■山崎さん
@_AIR_NOTE
デジタルハリウッド
執筆本のデモ

山崎さん、ありがとうございました。
勉強になりました。
2016.02.05 Friday

スポンサーサイト

コメント
コメントする








 
この記事のトラックバックURL
トラックバック
Powered by
30days Album
PR