Submit Search
Upload
フロンエンドトレンドについて話そう
•
4 likes
•
903 views
Atushi Sugiyama
Follow
WordBench神戸2012/11/10発表資料
Read less
Read more
Technology
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 16
Download now
Download to read offline
Recommended
W3C日本会議発表資料
W3C日本会議発表資料
Makoto Murata
Webと出版と、CSSの未来の話
Webと出版と、CSSの未来の話
Shinyu Murakami
今更ながらCSS3を試してみた
今更ながらCSS3を試してみた
Takao Sumitomo
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
Hiroshi Urabe
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
CSS Framework
CSS Framework
Joe_noh
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
WordPressテーマ事始め
WordPressテーマ事始め
Masaya Kogawa
Recommended
W3C日本会議発表資料
W3C日本会議発表資料
Makoto Murata
Webと出版と、CSSの未来の話
Webと出版と、CSSの未来の話
Shinyu Murakami
今更ながらCSS3を試してみた
今更ながらCSS3を試してみた
Takao Sumitomo
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
Hiroshi Urabe
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
CSS Framework
CSS Framework
Joe_noh
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
WordPressテーマ事始め
WordPressテーマ事始め
Masaya Kogawa
html5j 電子出版部セッション「Webと本の未来どうなる?」
html5j 電子出版部セッション「Webと本の未来どうなる?」
Shinyu Murakami
WordCamp Yokohama 2010 Komori
WordCamp Yokohama 2010 Komori
masaaki komori
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
Shinyu Murakami
DOM Scripting ことはじめ
DOM Scripting ことはじめ
Tomohiro MITSUMUNE
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
Keisuke Todoroki
Vivliostyle.js における CSS Paged Media の実装
Vivliostyle.js における CSS Paged Media の実装
Shinyu Murakami
デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜 先生:イシジマ ミキ
デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜 先生:イシジマ ミキ
schoowebcampus
モダンすぎる静的サイトの作り方
モダンすぎる静的サイトの作り方
Yuya Matsushima
tansuの紹介
tansuの紹介
Yuya Matsushima
20130611 movable type nagoya seminar
20130611 movable type nagoya seminar
Six Apart
「日本語組版処理の要件(JLREQ)」とは何か
「日本語組版処理の要件(JLREQ)」とは何か
Shinyu Murakami
WordCampOsaka2012セッション資料
WordCampOsaka2012セッション資料
horike37
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
Takayuki Miyauchi
ゆるい勉強会スライド
ゆるい勉強会スライド
和広 上田
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Naoki Kanazawa
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Atushi Sugiyama
CSS組版について
CSS組版について
Shinyu Murakami
Webデザイナーのためのエディタ入門
Webデザイナーのためのエディタ入門
Naoki Kanazawa
Bootstrapを使ってみよう
Bootstrapを使ってみよう
Kawaji Masaki
Doctypeという黒魔術の話
Doctypeという黒魔術の話
亮 門屋
Bab 10
Bab 10
Cecep Supriatna
Bab 2
Bab 2
Cecep Supriatna
More Related Content
What's hot
html5j 電子出版部セッション「Webと本の未来どうなる?」
html5j 電子出版部セッション「Webと本の未来どうなる?」
Shinyu Murakami
WordCamp Yokohama 2010 Komori
WordCamp Yokohama 2010 Komori
masaaki komori
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
Shinyu Murakami
DOM Scripting ことはじめ
DOM Scripting ことはじめ
Tomohiro MITSUMUNE
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
Keisuke Todoroki
Vivliostyle.js における CSS Paged Media の実装
Vivliostyle.js における CSS Paged Media の実装
Shinyu Murakami
デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜 先生:イシジマ ミキ
デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜 先生:イシジマ ミキ
schoowebcampus
モダンすぎる静的サイトの作り方
モダンすぎる静的サイトの作り方
Yuya Matsushima
tansuの紹介
tansuの紹介
Yuya Matsushima
20130611 movable type nagoya seminar
20130611 movable type nagoya seminar
Six Apart
「日本語組版処理の要件(JLREQ)」とは何か
「日本語組版処理の要件(JLREQ)」とは何か
Shinyu Murakami
WordCampOsaka2012セッション資料
WordCampOsaka2012セッション資料
horike37
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
Takayuki Miyauchi
ゆるい勉強会スライド
ゆるい勉強会スライド
和広 上田
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Naoki Kanazawa
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Atushi Sugiyama
CSS組版について
CSS組版について
Shinyu Murakami
Webデザイナーのためのエディタ入門
Webデザイナーのためのエディタ入門
Naoki Kanazawa
Bootstrapを使ってみよう
Bootstrapを使ってみよう
Kawaji Masaki
Doctypeという黒魔術の話
Doctypeという黒魔術の話
亮 門屋
What's hot
(20)
html5j 電子出版部セッション「Webと本の未来どうなる?」
html5j 電子出版部セッション「Webと本の未来どうなる?」
WordCamp Yokohama 2010 Komori
WordCamp Yokohama 2010 Komori
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
DOM Scripting ことはじめ
DOM Scripting ことはじめ
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
Vivliostyle.js における CSS Paged Media の実装
Vivliostyle.js における CSS Paged Media の実装
デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜 先生:イシジマ ミキ
デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜 先生:イシジマ ミキ
モダンすぎる静的サイトの作り方
モダンすぎる静的サイトの作り方
tansuの紹介
tansuの紹介
20130611 movable type nagoya seminar
20130611 movable type nagoya seminar
「日本語組版処理の要件(JLREQ)」とは何か
「日本語組版処理の要件(JLREQ)」とは何か
WordCampOsaka2012セッション資料
WordCampOsaka2012セッション資料
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
ゆるい勉強会スライド
ゆるい勉強会スライド
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
CSS組版について
CSS組版について
Webデザイナーのためのエディタ入門
Webデザイナーのためのエディタ入門
Bootstrapを使ってみよう
Bootstrapを使ってみよう
Doctypeという黒魔術の話
Doctypeという黒魔術の話
Viewers also liked
Bab 10
Bab 10
Cecep Supriatna
Bab 2
Bab 2
Cecep Supriatna
Bab 10
Bab 10
Cecep Supriatna
Bab 11
Bab 11
Cecep Supriatna
Senkop hastasina yaklaşim
Senkop hastasina yaklaşim
Banu Arslan
Bab 4
Bab 4
Cecep Supriatna
Bab 5
Bab 5
Cecep Supriatna
Bab 8
Bab 8
Cecep Supriatna
Bab 6
Bab 6
Cecep Supriatna
Bab 4
Bab 4
Cecep Supriatna
Bab 6
Bab 6
Cecep Supriatna
Multiple sclerosis1793
Multiple sclerosis1793
Banu Arslan
Concrete5スターターテーマ考察
Concrete5スターターテーマ考察
Atushi Sugiyama
Bab 3
Bab 3
Cecep Supriatna
Menenji̇t ensefali̇t
Menenji̇t ensefali̇t
Banu Arslan
Bi̇li̇nç bulanikliği olan hastaya yaklaşim
Bi̇li̇nç bulanikliği olan hastaya yaklaşim
Banu Arslan
Vaginal kanamalar 2012
Vaginal kanamalar 2012
Banu Arslan
concrete5のECサイト構築事例
concrete5のECサイト構築事例
Atushi Sugiyama
Myasthenia gravis türkçe
Myasthenia gravis türkçe
Banu Arslan
Viewers also liked
(19)
Bab 10
Bab 10
Bab 2
Bab 2
Bab 10
Bab 10
Bab 11
Bab 11
Senkop hastasina yaklaşim
Senkop hastasina yaklaşim
Bab 4
Bab 4
Bab 5
Bab 5
Bab 8
Bab 8
Bab 6
Bab 6
Bab 4
Bab 4
Bab 6
Bab 6
Multiple sclerosis1793
Multiple sclerosis1793
Concrete5スターターテーマ考察
Concrete5スターターテーマ考察
Bab 3
Bab 3
Menenji̇t ensefali̇t
Menenji̇t ensefali̇t
Bi̇li̇nç bulanikliği olan hastaya yaklaşim
Bi̇li̇nç bulanikliği olan hastaya yaklaşim
Vaginal kanamalar 2012
Vaginal kanamalar 2012
concrete5のECサイト構築事例
concrete5のECサイト構築事例
Myasthenia gravis türkçe
Myasthenia gravis türkçe
Similar to フロンエンドトレンドについて話そう
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
_HTML5で組んでみた_
_HTML5で組んでみた_
Kelly Holonic
CSS Design and Programming
CSS Design and Programming
Taku AMANO
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
Fuminori Mori
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
HTML5 Web Design Workflow
HTML5 Web Design Workflow
masaaki komori
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
Web制作勉強会 #1
Web制作勉強会 #1
Moto Yan
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
schoowebcampus
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
schoowebcampus
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
知己 久保
HTML5とCSS3でWebが変わる!でも導入は簡単!
HTML5とCSS3でWebが変わる!でも導入は簡単!
Toshihito Gamo
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
Kei Nakazawa
Wordpress buddypress3
Wordpress buddypress3
Shoichi Otomo
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
Similar to フロンエンドトレンドについて話そう
(20)
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
_HTML5で組んでみた_
_HTML5で組んでみた_
CSS Design and Programming
CSS Design and Programming
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
HTML5 Web Design Workflow
HTML5 Web Design Workflow
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Web制作勉強会 #1
Web制作勉強会 #1
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
HTML5とCSS3でWebが変わる!でも導入は簡単!
HTML5とCSS3でWebが変わる!でも導入は簡単!
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
Wordpress buddypress3
Wordpress buddypress3
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Recently uploaded
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Recently uploaded
(9)
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
フロンエンドトレンドについて話そう
1.
WEBフロントエンド開発の トレンドについてのディスカッション
2.
自己紹介 http://www.pictron.net twitter:pictron2009 facebook 杉山敦
3.
最近の俺
仕事 飲み食い 5% 10% サッカー 読書 40% 15% 音楽 30%
4.
さて本題 フロントエンド開発、コーディングの セオリーやトレンドは? css framework,sass,less,レスポンシブ WordPressに関係ある?
5.
さて本題 もちろん関係おおあり。 そういう事をみんなでソース見ながら お話しようという感じです。
6.
そこでまずトレンドを探る意味で 他にもたくさんあるのですが 話題のHTML5のテンプレートから
ベストプラクティスを探る。
7.
HTML5でサイトを作る際の
コーディングや環境設定の 標準構成となるテンプレート BOILERPLATEをさらにカスタムビルド したページを作るのに必要最低限な構成
8.
ファイル構成を見てみよう
404.html favicon.ico apple-touch-icon.png robot.txt など必要なファイルのセオリーを確認
9.
使われているモジュール
normalize.css プロパティ標準化のリセットするCSS 定義量が少なくて済むと言われる
10.
使われているモジュール
Modernizr HTML5、CSS3 の機能の有無をテストし <html>にクラス名として追加
11.
Modernizr /* boxshadowが使えないスタイル */ #box{ background-color:#fff; border-right:2px
solid #ccc; border-bottom:2px solid #ccc; } /* boxshadowが使える場合のスタイル */ .boxshadow #box{ border:none; -moz-box-shadow:#666 1px 1px 3px; -webkit-box-shadow:#666 1px 1px 3px; box-shadow:#666 1px 1px 3px; }
12.
実はバージョンを経る過程で けっこう内容は変わってきている
13.
かつて入っていたモジュール
Respond.js Respond.jsとレスポンシブWebデザインをめぐる ベストプラクティス議論
14.
ヘッダーでやっている事 <!--[if lt IE
7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->! <!--[if IE 7]><html class=“no-js lt-ie9 lt-ie8”> <![endif]à! セマンテックでクリーンなコードのために Paul Irishが提唱するにはcss-hackではなく div.foo { color: inherit;}! .ie7 div.foo { color: #ff8000; }! CSSとしてエラーではない!分岐させる箇所を1つに
15.
もちろんWordPressのテーマ
16.
もちろんWordPressのテーマ
Download now