マルチデバイス対応のコーディング・マークアップのポイント
•
2 likes•727 views
第19回 岡山WEBクリエイターズ「マルチデバイス対応テクニック」でのセッションです。 「マルチデバイス対応に向けたコーディング・マークアップについて初めて取り組む場合を念頭に置いた」ということで結構端折りながらのトピックになりますが、とりかかるきっかけになってくれれば…という内容です。
More Related Content
Similar to マルチデバイス対応のコーディング・マークアップのポイント
Similar to マルチデバイス対応のコーディング・マークアップのポイント (20)
More from Masayuki Maekawa
More from Masayuki Maekawa (12)
Recently uploaded
Recently uploaded (14)
マルチデバイス対応のコーディング・マークアップのポイント
- 1. 13年4月23日火曜日
- 2. マルチデバイス対応の コーディング・マークアップのポイント 前川 昌幸 @maepon 13年4月23日火曜日
- 3. 前川 昌幸 株式会社 スクイズ研究所 okayama-js 13年4月23日火曜日
- 4. 13年4月23日火曜日
- 5. 13年4月23日火曜日
- 6. 13年4月23日火曜日
- 8. 「IE6, 7 ,8 はもう捨てていいです」 春日井 良隆（マイクロソフト） 13年4月23日火曜日
- 9. 本題 マルチデバイス対応の コーディング・マークアップのポイント 13年4月23日火曜日
- 11. HTML 13年4月23日火曜日
- 12. HTML HTML5で書きましょう HTML5でなくても大きな問題はないですが 今後の展開も考えて… 13年4月23日火曜日
- 13. DOCTYPE <!doctype html> 極論するとこれにするだけでHTML5 ※例外あり 13年4月23日火曜日
- 14. 文字コード <meta charset="UTF-8"> UTF-8 推奨（他でもOK） 13年4月23日火曜日
- 15. マークアップ 古手のIE対応は html5shiv マークアップについての詳細は割愛 <a href=”tel:xxxxxxxxxxx”> 「article」について 13年4月23日火曜日
- 16. viewport width=[表示幅] ※ちなみにappleは「width=1024」 initial-scale=[初期倍率] user-scalable=[yes or no] 今回とりあえず紹介するのは… 13年4月23日火曜日
- 17. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 13年4月23日火曜日
- 18. CSS 13年4月23日火曜日
- 20. 画像に頼らないパーツ作成 .button{ color: #000; display: block; width: 50%; margin: auto; line-height: 44px; text-align: center; text-decoration: none; text-shadow: -1px -1px 1px #666,1px 1px 1px #FFF; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa)); background-image: -webkit-linear-gradient(#ffffff, #cccccc, #aaaaaa); background-image: -moz-linear-gradient(#ffffff, #cccccc, #aaaaaa); background-image: -o-linear-gradient(#ffffff, #cccccc, #aaaaaa); background-image: linear-gradient(#ffffff, #cccccc, #aaaaaa); -webkit-border-radius: 22px; border-radius: 22px; -webkit-box-shadow: #333333 2px 2px 5px; -moz-box-shadow: #333333 2px 2px 5px; box-shadow: #333333 2px 2px 5px; } 13年4月23日火曜日
- 21. 少し整理 13年4月23日火曜日
- 22. 少し整理 .button{ color: #000; display: block; width: 50%; margin: auto; line-height: 44px; text-align: center; text-decoration: none; text-shadow: -1px -1px 1px #666,1px 1px 1px #FFF; background-image: linear-gradient(#ffffff, #cccccc, #aaaaaa); border-radius: 22px; box-shadow: #333333 2px 2px 5px; } 13年4月23日火曜日
- 23. ベンダープリフィクス すいません 基本つけてください 13年4月23日火曜日
- 24. めんどくさい！ CSSプリプロセッサーはいかが？ 13年4月23日火曜日
- 25. セレクター nth-childなどが利用できる 13年4月23日火曜日
- 26. box-sizing リキッドレイアウトで重要 13年4月23日火曜日
- 28. リキッドレイアウトで作る？ 320px固定で作る？ 13年4月23日火曜日
- 29. 続：Androidブラウザでviewportのwidth指定 - to-R http://blog.webcreativepark.net/ 2012/01/06-110622.html 13年4月23日火曜日
- 31. デバイスの幅でCSSを切り替えて基本的に HTML１ソースで各デバイスに適したペー ジを表示する方法の基本的な部分をデモで 紹介します。 13年4月23日火曜日
- 32. /*デスクトップ向けのCSS*/ @media (min-width: 481px) and (max-width: 960px) { /*タブレット向けのCSS*/ /*デスクトップ向けのカスケード*/ } @media (max-width: 480px) { /*スマートフォン向けのCSS*/ /*デスクトップ向けのカスケード*/ } 13年4月23日火曜日
- 34. JavaScript 基本PC向けと同じ感覚でOK 13年4月23日火曜日
- 35. jQuery 2.0がリリースされましたが 基本1.x系を利用してください 13年4月23日火曜日
- 36. イベント 基本clickイベントが使えます mouseoverに気をつける 13年4月23日火曜日
- 37. まとめ 13年4月23日火曜日
- 38. 基本的に小難しく考えない 極端な話viewportを整理して急場しのぎ？ １ソースにこだわる必要は？ まだまだ奥は深いです あとはデバッグができるようになろう 13年4月23日火曜日
- 41. amplifizr, Vol. 6 マルチデバイス化のためのコンテンツ戦略 スピーカー 開催日時 : 2013年 5月11日（土）14:00∼17:00 長谷川 恭久氏 会場 : 岡山シティミュージアム 4F 講義室 13年4月23日火曜日
- 42. 13年4月23日火曜日
- 43. amplifizr, Vol. 3 マルチデバイス化を見据えた コンテンツ設計 基礎講座 Koriyama Okayama Tokyo - 3days Osaka 13年4月23日火曜日
- 44. amplifizr, Vol. 6 マルチデバイス化のための コンテンツ戦略 amplifizr, Vol. 7 コンテンツを活かすためのUI設計 Koriyama Okayama Tokyo Osaka Takamatsu 13年4月23日火曜日
- 45. 13年4月23日火曜日
- 46. amplifizr, Vol. 6 マルチデバイス化のためのコンテンツ戦略 スピーカー 長谷川 恭久氏 http://amplifizr.jp/ 13年4月23日火曜日