Soumettre la recherche
Mettre en ligne
CSS Nite in Matsuyama vol.1 - session 4
•
Télécharger en tant que PPTX, PDF
•
4 j'aime
•
1,150 vues
arisu yano
Suivre
CSS Nite in Matsuyama vol.1 - session 4 http://cssnite-matsuyama.com/vol01/profile/#yano
Lire moins
Lire la suite
Signaler
Partager
Signaler
Partager
1 sur 43
Télécharger maintenant
Recommandé
Gen-Template-for-Perl
Gen-Template-for-Perl
nasneg
Webapp startup example_to_dolist
Webapp startup example_to_dolist
Shinichiro Kumeuchi
jQuery Mobile入門
jQuery Mobile入門
Shumpei Shiraishi
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
yoshikawa_t
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
yoshikawa_t
Pyramid入門
Pyramid入門
Atsushi Odagiri
コードビュー中心で開発するDreamweaverテンプレート
コードビュー中心で開発するDreamweaverテンプレート
Akira Maruyama
Recommandé
Gen-Template-for-Perl
Gen-Template-for-Perl
nasneg
Webapp startup example_to_dolist
Webapp startup example_to_dolist
Shinichiro Kumeuchi
jQuery Mobile入門
jQuery Mobile入門
Shumpei Shiraishi
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
yoshikawa_t
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
yoshikawa_t
Pyramid入門
Pyramid入門
Atsushi Odagiri
コードビュー中心で開発するDreamweaverテンプレート
コードビュー中心で開発するDreamweaverテンプレート
Akira Maruyama
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説
Cherry Pie Web
Jqm20120210
Jqm20120210
cmtomoda
eZ Publish 2012年8月勉強会 - テンプレートオーバーライド
eZ Publish 2012年8月勉強会 - テンプレートオーバーライド
ericsagnes
WordBeach @kurudrive
WordBeach @kurudrive
Hidekazu Ishikawa
Inside Movable Type
Inside Movable Type
純生 野田
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
プロになるためのJavaScript入門読書会 レジュメ
プロになるためのJavaScript入門読書会 レジュメ
Norito Agetsuma
MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013
純生 野田
やはりお前らのMTMLは間違っている!
やはりお前らのMTMLは間違っている!
純生 野田
html for Kubo Semi 2014
html for Kubo Semi 2014
Toshiki NOGUCHI
Oktopartial Introduction
Oktopartial Introduction
Takeshi AKIMA
脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query
Hidekazu Ishikawa
Flask勉強会その1
Flask勉強会その1
Masato Kawamura
2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoops
Tom Hayakawa
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5
Nishida Kansuke
ASP.NET MVC のルーティング設定を少しだけ REST ぽくする
ASP.NET MVC のルーティング設定を少しだけ REST ぽくする
dany1468
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Muyuu Fujita
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
George Harada
Ci tutorial
Ci tutorial
Kazuaki Ueda
Proyecto hidroponi1 jjj
Proyecto hidroponi1 jjj
criiiz
ApresentaçãoInstitucionalMendesMiguel_vRJ
ApresentaçãoInstitucionalMendesMiguel_vRJ
Renata Aranega
Contenu connexe
Tendances
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説
Cherry Pie Web
Jqm20120210
Jqm20120210
cmtomoda
eZ Publish 2012年8月勉強会 - テンプレートオーバーライド
eZ Publish 2012年8月勉強会 - テンプレートオーバーライド
ericsagnes
WordBeach @kurudrive
WordBeach @kurudrive
Hidekazu Ishikawa
Inside Movable Type
Inside Movable Type
純生 野田
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
プロになるためのJavaScript入門読書会 レジュメ
プロになるためのJavaScript入門読書会 レジュメ
Norito Agetsuma
MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013
純生 野田
やはりお前らのMTMLは間違っている!
やはりお前らのMTMLは間違っている!
純生 野田
html for Kubo Semi 2014
html for Kubo Semi 2014
Toshiki NOGUCHI
Oktopartial Introduction
Oktopartial Introduction
Takeshi AKIMA
脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query
Hidekazu Ishikawa
Flask勉強会その1
Flask勉強会その1
Masato Kawamura
2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoops
Tom Hayakawa
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5
Nishida Kansuke
ASP.NET MVC のルーティング設定を少しだけ REST ぽくする
ASP.NET MVC のルーティング設定を少しだけ REST ぽくする
dany1468
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Muyuu Fujita
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
George Harada
Ci tutorial
Ci tutorial
Kazuaki Ueda
Tendances
(20)
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説
Jqm20120210
Jqm20120210
eZ Publish 2012年8月勉強会 - テンプレートオーバーライド
eZ Publish 2012年8月勉強会 - テンプレートオーバーライド
WordBeach @kurudrive
WordBeach @kurudrive
Inside Movable Type
Inside Movable Type
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
プロになるためのJavaScript入門読書会 レジュメ
プロになるためのJavaScript入門読書会 レジュメ
MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013
やはりお前らのMTMLは間違っている!
やはりお前らのMTMLは間違っている!
html for Kubo Semi 2014
html for Kubo Semi 2014
Oktopartial Introduction
Oktopartial Introduction
脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query
Flask勉強会その1
Flask勉強会その1
2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoops
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5
ASP.NET MVC のルーティング設定を少しだけ REST ぽくする
ASP.NET MVC のルーティング設定を少しだけ REST ぽくする
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
Ci tutorial
Ci tutorial
En vedette
Proyecto hidroponi1 jjj
Proyecto hidroponi1 jjj
criiiz
ApresentaçãoInstitucionalMendesMiguel_vRJ
ApresentaçãoInstitucionalMendesMiguel_vRJ
Renata Aranega
Atelier e-Learning AWT - Outils auteur - LMS - Webcasting
Atelier e-Learning AWT - Outils auteur - LMS - Webcasting
Xavier Van Dieren
Ethics of virtual worlds dir cut
Ethics of virtual worlds dir cut
Mark Childs
Kumamoto
Kumamoto
hayata.yuuki
10 09-07 becoming virtual
10 09-07 becoming virtual
Mark Childs
PROBLEMÁTICA EDUCATIVA NACIONAL
PROBLEMÁTICA EDUCATIVA NACIONAL
Rositaquistia
Lm tab brochure
Lm tab brochure
lmtab
5 principes essentiels issus des neurosciences pour mieux former et apprendre
5 principes essentiels issus des neurosciences pour mieux former et apprendre
Xavier Van Dieren
En vedette
(9)
Proyecto hidroponi1 jjj
Proyecto hidroponi1 jjj
ApresentaçãoInstitucionalMendesMiguel_vRJ
ApresentaçãoInstitucionalMendesMiguel_vRJ
Atelier e-Learning AWT - Outils auteur - LMS - Webcasting
Atelier e-Learning AWT - Outils auteur - LMS - Webcasting
Ethics of virtual worlds dir cut
Ethics of virtual worlds dir cut
Kumamoto
Kumamoto
10 09-07 becoming virtual
10 09-07 becoming virtual
PROBLEMÁTICA EDUCATIVA NACIONAL
PROBLEMÁTICA EDUCATIVA NACIONAL
Lm tab brochure
Lm tab brochure
5 principes essentiels issus des neurosciences pour mieux former et apprendre
5 principes essentiels issus des neurosciences pour mieux former et apprendre
Similaire à CSS Nite in Matsuyama vol.1 - session 4
Html5 Web Applications
Html5 Web Applications
totty jp
System3 search
System3 search
Jun Chiba
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
タカシ キタジマ
webを飾る技術
webを飾る技術
ina job
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
Muyuu Fujita
HTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
ScaLa+Liftとか
ScaLa+Liftとか
youku
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
Web1.0のハイブリッドアプリ開発
Web1.0のハイブリッドアプリ開発
Kenta Tsuji
jQuery超入門編
jQuery超入門編
Yasuhito Yabe
勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発
Kazuki Nakajima
CodeIgniterによるPhwittr
CodeIgniterによるPhwittr
kenjis
HTML/CSS
HTML/CSS
Yoshinaga Kazutaka
Html:css
Html:css
Yuuki Tazawa
Windows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみた
一希 大田
3時間濃縮CakePHP2.1 in PHPカンファレンス北海道2012
3時間濃縮CakePHP2.1 in PHPカンファレンス北海道2012
Yusuke Ando
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
勉強会force#4 Chatter Integration
勉強会force#4 Chatter Integration
Kazuki Nakajima
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン
健一 茂木
テンプレートエンジンって何?
テンプレートエンジンって何?
Shoichi Takahashi
Similaire à CSS Nite in Matsuyama vol.1 - session 4
(20)
Html5 Web Applications
Html5 Web Applications
System3 search
System3 search
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
webを飾る技術
webを飾る技術
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
HTML5 on ASP.NET
HTML5 on ASP.NET
ScaLa+Liftとか
ScaLa+Liftとか
jQuery Mobileの基礎
jQuery Mobileの基礎
Web1.0のハイブリッドアプリ開発
Web1.0のハイブリッドアプリ開発
jQuery超入門編
jQuery超入門編
勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発
CodeIgniterによるPhwittr
CodeIgniterによるPhwittr
HTML/CSS
HTML/CSS
Html:css
Html:css
Windows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみた
3時間濃縮CakePHP2.1 in PHPカンファレンス北海道2012
3時間濃縮CakePHP2.1 in PHPカンファレンス北海道2012
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
勉強会force#4 Chatter Integration
勉強会force#4 Chatter Integration
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン
テンプレートエンジンって何?
テンプレートエンジンって何?
CSS Nite in Matsuyama vol.1 - session 4
1.
2.
いますぐはじめる! スマートフォンサイト サイボウズ株式会社 松山開発部
矢野 ありす
3.
自己紹介 サイボウズ株式会社 松山開発部 所属 Office
9やメールワイズなどの開発に従事 カスタムアプリの スマホビュー
4.
自己紹介 サイボウズ株式会社 松山開発部 所属 Office
9やメールワイズなどの開発に従事 メールワイズ on cybozu.com (画像は開発中のものです)
5.
アジェンダ はじめに スマートフォンの台頭 スマートフォンと HTML5 &
CSS3 スマートフォンサイトを作る 下準備について HTML5を使ったタグ組み CSS3を使った装飾
6.
はじめに スマートフォンが台頭してきている 所有率が1年で16%増加
スマートフォン所有率 (ディーツー コミュニケーションズ 調べ) http://www.d2c.co.jp/news/2012/20120418-1340.html
7.
はじめに スマートフォンが台頭してきている 出荷台数は2012年で70%に迫る勢い 契約数は2015年までに半数に達するとの予想
スマートフォン契約数の推移・予測 (MM総研 調べ) http://www.m2ri.jp/newsreleases/mai n.php?id=010120120313500
8.
はじめに スマートフォンユーザーは これからも増えていく
9.
はじめに スマートフォンを使って何をするのか?
端末でよく使う機能の割合 (DAC 調べ) http://www.dac.co.jp/Contents/pdf /press/2011_sd_research.pdf
10.
はじめに Webサイトのスマートフォン対応は急務
11.
はじめに 日本国内におけるスマートフォンOS
スマートフォンOS別シェア (コムスコア 調べ) http://www.comscore.com/Press_Events /Press_Releases/2012/4/1_in_5_Mobile_ Phone_Users_in_Japan_Now_Owns_a_S martphone
12.
はじめに
標準ブラウザが ほぼHTML5&CSS3に対応 ※対応状況 http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HT ML_5) http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Ca scading_Style_Sheets)
13.
スマートフォンサイトを作る 一覧画面 例)ブログやニュースのトップページ
ヘッダー ナビ コンテンツ フッター
14.
スマートフォンサイトを作る 下準備について DOCTYPE宣言
HTML5 文字エンコーディングの指定 HTML5 viewportの指定 スマートフォン
15.
下準備について DOCTYPE宣言
HTML5 文書がどの仕様に従って書かれているか before <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> after <!DOCTYPE html>
16.
下準備について 文字コードの指定
HTML5 文書の文字コードをブラウザに知らせる before <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> after <meta charset="utf-8">
17.
下準備について viewportの指定
スマートフォン <!DOCTYPE html> ウィンドウサイズ(横)を <html lang="ja"> デバイスの横サイズにする <head> <meta charset="utf-8"> <meta name="viewport" content="width=device- width, initial-scale=1, minimum-scale=1, maximum-scale=1"> </head> <body></body> </html>
18.
下準備について viewportの指定
スマートフォン <!DOCTYPE html> <html lang="ja"> 倍率の初期値を指定 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device- width, initial-scale=1, minimum-scale=1, maximum-scale=1"> </head> <body></body> </html>
19.
下準備について viewportの指定
スマートフォン <!DOCTYPE html> <html lang="ja"> 倍率の最小値を指定 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device- width, initial-scale=1, minimum-scale=1, maximum-scale=1"> </head> <body></body> </html>
20.
下準備について viewportの指定
スマートフォン <!DOCTYPE html> <html lang="ja"> 倍率の最大値を指定 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device- width, initial-scale=1, minimum-scale=1, maximum-scale=1"> </head> <body></body> </html>
21.
HTML5を使ったタグ組み 一覧画面 ヘッダー ナビゲーション 検索ボックス 入力エリア プレースホルダ コンテンツ
タイトル 要約部 フッター 未装飾状態の画面 http://jsdo.it/alice1551/aHGn
22.
HTML5を使ったタグ組み 一覧画面 ヘッダー ナビゲーション 検索ボックス 入力エリア プレースホルダ コンテンツ
タイトル 要約部 フッター 未装飾状態の画面 http://jsdo.it/alice1551/aHGn
23.
HTML5を使ったタグ組み ヘッダー&ナビゲーション before
after <div id="header"> <header> <h1>Header</h1> <h1>Header</h1> <div id=“nav”> <nav> <ul> <ul> <li>nav1</li> <li>nav1</li> <li>nav2</li> <li>nav2</li> </ul> </ul> </div> </nav> </div> </header>
24.
HTML5を使ったタグ組み 一覧画面 ヘッダー ナビゲーション 検索ボックス 入力エリア プレースホルダ コンテンツ
タイトル 要約部 フッター 未装飾状態の画面 http://jsdo.it/alice1551/aHGn
25.
HTML5を使ったタグ組み 検索ボックス(入力エリア) before
<input type="text" name="SearchText" value="文字 を入力してください"> <input type="submit"> after <input type="search" name="SearchText" placeholder="文字を入力してください ">
26.
HTML5を使ったタグ組み 検索ボックス(プレースホルダ) <input type="search"
name="SearchText" placeholder="文字を入力してください"> 挙動例) 初期表示では文字は薄灰色 要素にフォーカスが当たるとクリア ユーザーが入力した文字は黒 文字が入力されなければ初期表示に戻る submit したときには初期表示文字列では検索されない
27.
HTML5を使ったタグ組み 検索ボックス(プレースホルダ) placeholder属性を使わずに同じことをするには CSSとJavaScriptを使う
28.
HTML5を使ったタグ組み <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> before <head> http://jsdo.it/alice1551/ntub <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>placeholder demo</title> <style type="text/css"> .default { color: #999; } .entry { color: #000; } </style> </head> <body> <form onsubmit="return PreSubmit()"> <input type="text" name="SearchText" value="文字を入力してください" class="default" onfocus="OnFocus(this)" onblur="OnBlur(this)" onkeypress="OnKeyPress(this)"> <input type="submit"> </form> <script type="text/javascript"> var g_default = "文字を入力してください"; var g_state = false; function OnFocus(el) { el.value = ''; } function OnBlur(el) { if( el.value == '' ) { g_state = false; } if( ! g_state ) { el.value = g_default; el.className = "default"; } } function OnKeyPress(el) { g_state = true; el.className = "entry"; } function PreSubmit() { if( ! g_state ) { return false; } return true; } </script> </body> </html>
29.
HTML5を使ったタグ組み <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> before <head> http://jsdo.it/alice1551/ntub <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>placeholder demo</title> <style type="text/css"> .default { color: #999; } .entry { color: #000; } </style> </head> <body> <form onsubmit="return PreSubmit()"> <input type="text" name="SearchText" value="文字を入力してください" class="default" onfocus="OnFocus(this)" onblur="OnBlur(this)" onkeypress="OnKeyPress(this)"> <input type="submit"> </form> <script type="text/javascript"> var g_default = "文字を入力してください"; var g_state = false; function OnFocus(el) { el.value = ''; } function OnBlur(el) { if( el.value == '' ) { g_state = false; } if( ! g_state ) { el.value = g_default; el.className = "default"; } } function OnKeyPress(el) { g_state = true; el.className = "entry"; } function PreSubmit() { if( ! g_state ) { return false; } return true; } </script> </body> </html>
30.
HTML5を使ったタグ組み <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> before <head> http://jsdo.it/alice1551/ntub <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>placeholder demo</title> <style type="text/css"> .default { color: #999; } .entry { color: #000; } </style> </head> <body> <form onsubmit="return PreSubmit()"> <input type="text" name="SearchText" value="文字を入力してください" class="default" onfocus="OnFocus(this)" onblur="OnBlur(this)" onkeypress="OnKeyPress(this)"> <input type="submit"> </form> <script type="text/javascript"> var g_default = "文字を入力してください"; var g_state = false; function OnFocus(el) { el.value = ''; } function OnBlur(el) { after if( el.value == '' ) { g_state = false; } if( ! g_state ) { <!DOCTYPE html> el.value = g_default; <html lang="ja"> el.className = "default"; <head> } <meta charset="utf-8"> } <title>placeholder demo</title> </head> HTML5 function OnKeyPress(el) { g_state = true; <body> <form> なら! el.className = "entry"; } <input type="search" name="SearchText" function PreSubmit() { placeholder="文字を入力してください"> if( ! g_state ) { return false; } </form> return true; </body> } </html> </script> </body> </html>
31.
HTML5を使ったタグ組み 一覧画面 ヘッダー ナビゲーション 検索ボックス 入力エリア プレースホルダ コンテンツ
タイトル 要約部 フッター 未装飾状態の画面 http://jsdo.it/alice1551/aHGn
32.
HTML5を使ったタグ組み コンテンツ before
after <div class="section"> <section> <h2>タイトル</h2> <h2>タイトル</h2> <div class="article"> <article> 要約部 要約部 </div> </article> </div> </section>
33.
HTML5を使ったタグ組み 一覧画面 ヘッダー ナビゲーション 検索ボックス 入力エリア プレースホルダ コンテンツ
タイトル 要約部 フッター 未装飾状態の画面 http://jsdo.it/alice1551/aHGn
34.
HTML5を使ったタグ組み フッター before
after <div id="footer"> <footer> Footer Footer </div> </footer>
35.
CSS3を使った装飾 一覧画面 ヘッダー ナビゲーション 検索ボックス 入力エリア プレースホルダ コンテンツ
タイトル 要約部 フッター 装飾後の画面 http://jsdo.it/alice1551/vG8J
36.
CSS3を使った装飾 ヘッダー
装飾のための余分な 要素や画像が必要 before after <div id="header-wrapper"> <header> <div id="header"> <h1>Header</h1> <h1>Header</h1> </header> </div> </div> #header-wrapper { header padding-bottom: 5px; { background: box-shadow: 0 0 5px #333; url(shadow.png) repeat-x left } bottom; } http://jsdo.it/alice1551/lF9L
37.
CSS3を使った装飾 一覧画面 ヘッダー ナビゲーション 検索ボックス 入力エリア プレースホルダ コンテンツ
タイトル 要約部 フッター 装飾後の画面 http://jsdo.it/alice1551/vG8J
38.
CSS3を使った装飾 コンテンツ 角丸 li:first-child
{ border-top-left-radius: 5px; border-top-right-radius: 5px; } 下側も同様に「li:last-child」(CSS3で追加された 疑似クラス)で装飾 border-radius を使わずに同じことをするには、 テーブルでレイアウトして四隅に角丸の画像を配 置してボックスサイズを調整する、など
39.
CSS3を使った装飾 コンテンツ グラデーション li
{ background-image: -webkit- linear-gradient(bottom, rgb(237,237,237) 6%, rgb(240,240,240) 27%, rgb(252,252,252) 78%); } gradient を使わずに同じことをするには、グラ デ画像を背景に指定する、など
40.
CSS3を使った装飾 コンテンツ
Web Fonts でアイコン <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ca bin+Sketch:700"> Google Web Fonts を使用 section:before { content: "#"; font-size: 25px; display: block; position: absolute; top: 3px; left: 5px; font-family: 'Cabin Sketch', cursive; } 同じことをするにはアイコン画像を用意
41.
CSS3を使った装飾 コンテンツ 横幅に合わせて省略表示 section
article { min-width: device-width; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 同じことをするには要素を重ねて「...」の部分を 表示し省略されているように見せる、とか、 Javascript で固定文字数で切って表示する、 など
42.
まとめ Webサイトのスマートフォン対応は急務 スマートフォンの標準ブラウザはほぼHTML5& CSS3に対応 いまから作り始めるならHTML5&CSS3を使う とよい 手間が少なくてすむ、かも
43.
ご清聴ありがとうございました
Télécharger maintenant