Submit Search
Upload
Zen-Codingはみんなのもの
•
7 likes
•
2,174 views
masaaki komori
Follow
CSS Nite in SENDAI, Vol.5
Read less
Read more
Report
Share
Report
Share
1 of 38
Download now
Download to read offline
Recommended
Lp14 komori
Lp14 komori
masaaki komori
CSS Nite LP, Disk 14
concrete5 CMS FES 2016(CMS夏祭り2016)
concrete5 CMS FES 2016(CMS夏祭り2016)
Kazuhiro Matsuda
CMS夏祭り2016にて登壇資料 concrete5 web site http://djkazu.supervinyl.net http://ayanyan.net concrete5 theme Demosite http://heydj.supervinyl.net http://oh-love.ayanyan.net concrete5 Marketplace http://www.concrete5.org/marketplace/themes/hey-dj
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
Mignon Style
2016年4月11日〜16日に開催されたWP-D Week [LevelUp!!] WP-D Fes #04 https://week.wp-d.org/ でのLTのスライドです。
新入生歓迎LT祭り2014
新入生歓迎LT祭り2014
Azusa Uezu
HTMLで作ったサイトをWordPressに組み込んでみよう!
HTMLで作ったサイトをWordPressに組み込んでみよう!
Daisuke Koshimizu
WordBench福岡201300628
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
10月4日に大阪で開催された「Co:Labo NambaJelly」にて登壇し、HTMLとCSSがどう変わったのか?や、この勉強会についてご紹介しました。 [ 勉強会詳細: ] ( http://r360studio.com/coworklabo/ )
ios+Android最近気付いいたこと
ios+Android最近気付いいたこと
Hiratsuka Shunsuke
it is doc which has some thing which i studied recentry about smp developing.
LINEスタンプの作り方
LINEスタンプの作り方
Aoi Motomura
私流LINEスタンプの作り方の説明です。
Recommended
Lp14 komori
Lp14 komori
masaaki komori
CSS Nite LP, Disk 14
concrete5 CMS FES 2016(CMS夏祭り2016)
concrete5 CMS FES 2016(CMS夏祭り2016)
Kazuhiro Matsuda
CMS夏祭り2016にて登壇資料 concrete5 web site http://djkazu.supervinyl.net http://ayanyan.net concrete5 theme Demosite http://heydj.supervinyl.net http://oh-love.ayanyan.net concrete5 Marketplace http://www.concrete5.org/marketplace/themes/hey-dj
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
Mignon Style
2016年4月11日〜16日に開催されたWP-D Week [LevelUp!!] WP-D Fes #04 https://week.wp-d.org/ でのLTのスライドです。
新入生歓迎LT祭り2014
新入生歓迎LT祭り2014
Azusa Uezu
HTMLで作ったサイトをWordPressに組み込んでみよう!
HTMLで作ったサイトをWordPressに組み込んでみよう!
Daisuke Koshimizu
WordBench福岡201300628
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
10月4日に大阪で開催された「Co:Labo NambaJelly」にて登壇し、HTMLとCSSがどう変わったのか?や、この勉強会についてご紹介しました。 [ 勉強会詳細: ] ( http://r360studio.com/coworklabo/ )
ios+Android最近気付いいたこと
ios+Android最近気付いいたこと
Hiratsuka Shunsuke
it is doc which has some thing which i studied recentry about smp developing.
LINEスタンプの作り方
LINEスタンプの作り方
Aoi Motomura
私流LINEスタンプの作り方の説明です。
Yat-wbnara201602
Yat-wbnara201602
YAT blog
アイキャッチを作ってWordPressに表示しよう
WordBench 東京 とは
WordBench 東京 とは
Mignon Style
WordBench 東京 勉強会「WordBench 東京とは」のスライドです。2017年1月作成 http://wordbench.org/category/tokyo/
いまさらですが IAってなんだろう
いまさらですが IAってなんだろう
芳彦 佐伯
IAとかUIとかUX…ここ数年これらの言葉をよく聞くようになりましが、はたして自分はちゃんと理解できてるのか?と疑問になりまして、まずはIAをちゃんと理解してみよう!と思ったらいきなり深みにハマりました…
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
【知っておきたい「Web制作イマドキの注目ポイント」 】セミナーを担当しました。当日使ったスライドを受講していただいた方のフォローアップ目的で公開いたします。 http://r360studio.com/seminar/imedio20140411/index.html http://r360studio.com/seminar/narass20141007/index.html
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法
Yoshiko Sarakai
10/12 WordBench神戸 WordPressの学習方法
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
Bariiiii
Bariiiii
Syo Igarashi
書籍管理ツール
私のWordPress勉強法
私のWordPress勉強法
Kazuyuki Takano
WordBench山梨で行ったセッションのスライドです。
宮崎の山の中でリモートワークしてみた
宮崎の山の中でリモートワークしてみた
Tomoe Sawai
5/26 Tech美られでぃ での発表内容です!
習ったことはありませんがこんな感じでWebデザインを教えてます
習ったことはありませんがこんな感じでWebデザインを教えてます
Kyo Kaji
「関西フロントエンドUG 年忘れLT大会」で発表したLTスライドです
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/2/21 サイト http://unofficialtokyo.com を Twenty Sixteen で構築した際の手順やコツを紹介しました。
今日からできるカラーデザインチェック
今日からできるカラーデザインチェック
Kunio Sakamoto
2016年10月1日(土)に高松で開催されたアクセシビリティセミナーのスライドです。マークアップは大事ですが、デザイナーが見た目の部分を直していくのもすごく大事です。
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
2012/11/16 Web勉強会(HTML+CSS+JS入門の入門)
JavaScript(主にVue.js)関連の本をたくさん読んだので雑に紹介する
JavaScript(主にVue.js)関連の本をたくさん読んだので雑に紹介する
YutaNishina1
20190820_fukuokaJS
一歩踏み込むWordPress
一歩踏み込むWordPress
正樹 平野
2014/712 クリエイティブコネクトというイベントで話したスライドです。
Dream sparkで夢のマイホーム
Dream sparkで夢のマイホーム
tosaka 2
CombGigでLTしたスライドです DreamSparkの紹介を行っています
「フォントはしゃべる」というお話
「フォントはしゃべる」というお話
Cherry Pie Web
2014/05/10 WordBench神戸でお話した内容を、公開しても問題ないように写真や文字を差し替えたものです。
WordCampバンコクに行ってきた
WordCampバンコクに行ってきた
Shoko Matsuo
WordPressの大きなイベントが、タイのバンコクで行われたので、その時の話をします。
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
WordBench 東京2016の発表資料です。WordPressでよく言われる「テーマは見た目、プラグインは機能」という言葉に対して真っ向から勝負を挑みます。
学内勉強会をやりたい
学内勉強会をやりたい
Ryohei Kawashima
ICTトラコン7で話した内容です。
WordBench Saitama vol.6
WordBench Saitama vol.6
masaaki komori
WordBench 埼玉 vol.6 こもりの資料
WordCamp Yokohama 2010 Komori
WordCamp Yokohama 2010 Komori
masaaki komori
WordCamp Yokohama のこもりのスライド
More Related Content
What's hot
Yat-wbnara201602
Yat-wbnara201602
YAT blog
アイキャッチを作ってWordPressに表示しよう
WordBench 東京 とは
WordBench 東京 とは
Mignon Style
WordBench 東京 勉強会「WordBench 東京とは」のスライドです。2017年1月作成 http://wordbench.org/category/tokyo/
いまさらですが IAってなんだろう
いまさらですが IAってなんだろう
芳彦 佐伯
IAとかUIとかUX…ここ数年これらの言葉をよく聞くようになりましが、はたして自分はちゃんと理解できてるのか?と疑問になりまして、まずはIAをちゃんと理解してみよう!と思ったらいきなり深みにハマりました…
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
【知っておきたい「Web制作イマドキの注目ポイント」 】セミナーを担当しました。当日使ったスライドを受講していただいた方のフォローアップ目的で公開いたします。 http://r360studio.com/seminar/imedio20140411/index.html http://r360studio.com/seminar/narass20141007/index.html
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法
Yoshiko Sarakai
10/12 WordBench神戸 WordPressの学習方法
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
Bariiiii
Bariiiii
Syo Igarashi
書籍管理ツール
私のWordPress勉強法
私のWordPress勉強法
Kazuyuki Takano
WordBench山梨で行ったセッションのスライドです。
宮崎の山の中でリモートワークしてみた
宮崎の山の中でリモートワークしてみた
Tomoe Sawai
5/26 Tech美られでぃ での発表内容です!
習ったことはありませんがこんな感じでWebデザインを教えてます
習ったことはありませんがこんな感じでWebデザインを教えてます
Kyo Kaji
「関西フロントエンドUG 年忘れLT大会」で発表したLTスライドです
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/2/21 サイト http://unofficialtokyo.com を Twenty Sixteen で構築した際の手順やコツを紹介しました。
今日からできるカラーデザインチェック
今日からできるカラーデザインチェック
Kunio Sakamoto
2016年10月1日(土)に高松で開催されたアクセシビリティセミナーのスライドです。マークアップは大事ですが、デザイナーが見た目の部分を直していくのもすごく大事です。
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
2012/11/16 Web勉強会(HTML+CSS+JS入門の入門)
JavaScript(主にVue.js)関連の本をたくさん読んだので雑に紹介する
JavaScript(主にVue.js)関連の本をたくさん読んだので雑に紹介する
YutaNishina1
20190820_fukuokaJS
一歩踏み込むWordPress
一歩踏み込むWordPress
正樹 平野
2014/712 クリエイティブコネクトというイベントで話したスライドです。
Dream sparkで夢のマイホーム
Dream sparkで夢のマイホーム
tosaka 2
CombGigでLTしたスライドです DreamSparkの紹介を行っています
「フォントはしゃべる」というお話
「フォントはしゃべる」というお話
Cherry Pie Web
2014/05/10 WordBench神戸でお話した内容を、公開しても問題ないように写真や文字を差し替えたものです。
WordCampバンコクに行ってきた
WordCampバンコクに行ってきた
Shoko Matsuo
WordPressの大きなイベントが、タイのバンコクで行われたので、その時の話をします。
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
WordBench 東京2016の発表資料です。WordPressでよく言われる「テーマは見た目、プラグインは機能」という言葉に対して真っ向から勝負を挑みます。
学内勉強会をやりたい
学内勉強会をやりたい
Ryohei Kawashima
ICTトラコン7で話した内容です。
What's hot
(20)
Yat-wbnara201602
Yat-wbnara201602
WordBench 東京 とは
WordBench 東京 とは
いまさらですが IAってなんだろう
いまさらですが IAってなんだろう
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
Bariiiii
Bariiiii
私のWordPress勉強法
私のWordPress勉強法
宮崎の山の中でリモートワークしてみた
宮崎の山の中でリモートワークしてみた
習ったことはありませんがこんな感じでWebデザインを教えてます
習ったことはありませんがこんな感じでWebデザインを教えてます
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
今日からできるカラーデザインチェック
今日からできるカラーデザインチェック
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
JavaScript(主にVue.js)関連の本をたくさん読んだので雑に紹介する
JavaScript(主にVue.js)関連の本をたくさん読んだので雑に紹介する
一歩踏み込むWordPress
一歩踏み込むWordPress
Dream sparkで夢のマイホーム
Dream sparkで夢のマイホーム
「フォントはしゃべる」というお話
「フォントはしゃべる」というお話
WordCampバンコクに行ってきた
WordCampバンコクに行ってきた
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
学内勉強会をやりたい
学内勉強会をやりたい
Viewers also liked
WordBench Saitama vol.6
WordBench Saitama vol.6
masaaki komori
WordBench 埼玉 vol.6 こもりの資料
WordCamp Yokohama 2010 Komori
WordCamp Yokohama 2010 Komori
masaaki komori
WordCamp Yokohama のこもりのスライド
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
第14回リクリセミナー「Web制作の未来、あなたの未来」最終版
WordCamp Tokyo 2011 komori
WordCamp Tokyo 2011 komori
masaaki komori
WordCamp Tokyo 2011、こもりセッションスライド。
CSS Nite Vol.39 - komori -
CSS Nite Vol.39 - komori -
masaaki komori
WP Performance Optimization
WP Performance Optimization
masaaki komori
WordPressのパフォーマンス改善について
20111028 Conversion Meetup Vol.1
20111028 Conversion Meetup Vol.1
masaaki komori
こもりまさあき
Mastering Sublime Text 2
Mastering Sublime Text 2
masaaki komori
2012.11.09 CSS Nite After Dark Vol.5 こもり資料。 #スライド最後のパッケージ一覧をアップデートしています。また、今後何か追加をするとしたら、下記Gistだけ書き換えますのでご了承ください。 https://gist.github.com/3819427
Viewers also liked
(8)
WordBench Saitama vol.6
WordBench Saitama vol.6
WordCamp Yokohama 2010 Komori
WordCamp Yokohama 2010 Komori
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
WordCamp Tokyo 2011 komori
WordCamp Tokyo 2011 komori
CSS Nite Vol.39 - komori -
CSS Nite Vol.39 - komori -
WP Performance Optimization
WP Performance Optimization
20111028 Conversion Meetup Vol.1
20111028 Conversion Meetup Vol.1
Mastering Sublime Text 2
Mastering Sublime Text 2
Similar to Zen-Codingはみんなのもの
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
WCAF vol.10 こもり資料
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
WCAN mini Design vol.9 資料
groundwork-pasona-tech
groundwork-pasona-tech
masaaki komori
パソナテック<SKILL BASECAMP 2013> 「Groundwork ! 未来のWeb制作現場で通用するクリエイターとなるために、いま刷新すべきセオリー」資料 ※こちらのスライドの内容と重複しますが、ロクナナさんの10周年記念のビデオで実際の操作画面とかがご覧頂けます。 ロクナナ10周年記念サイト https://67.org/ws10th/ こもりまさあきのWeb制作環境 [67WS10周年記念] http://www.youtube.com/watch?v=gKeAJJhX2Og
うちの開発におけるXD利用法
うちの開発におけるXD利用法
Kazuma Sekiguchi
Adobe XD Meeting #15で話をしたときの資料です。
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
masaaki komori
~ Getting started prototyping with Framer. ※このスライドは、2014年6月19日のCSS Niteで話した内容です。 http://cssnite.jp/afterdark/cpi/vol11/
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
Hiroyuki Ogawa
ワイヤーフレームとは?
ワイヤーフレームとは?
Kazuma Sekiguchi
ワイヤーフレームとはどういうものか?という概略 ワイヤーフレームだけでは説明しきれないところをどう補うか、が課題 Adobe XD Meeting #05での発表内容です
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Yusuke Kawabata
PHP Conference kansai 2015 発表資料(公開用)です。
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
masaaki komori
WebSig 24/7 Vol. 31 こもり資料
HTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
HTML5 Conference 2012
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
ワードプレスとは? 竜胆(りんどう)Webデザイン
ワードプレスとは? 竜胆(りんどう)Webデザイン
古川 恵子
【5月25日、26日 会津若松市開催】ワードプレスを使って、自分でホームページを作りませんか?
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
Kazumich YAMAMOTO
WDHA#038 CMS会議 AOMORI で紹介した a-blog cms 2.1を活用したWeb制作のワークフロー のスライドです。
初めてのWebプログラミング講座
初めてのWebプログラミング講座
DIVE INTO CODE Corp.
2017年11月23日開催
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
ssuser6f5294
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン
第1回 IT講座 IT基礎知識
第1回 IT講座 IT基礎知識
Shunya Komori
中学生・高校生向けにIT講座を開いてきました。 第1回目は自己紹介、webの世界について、ITの基礎知識について学びました。 ■ 第1回 IT講座 IT基礎知識 https://www.slideshare.net/s-komori/1-it-it-82954806 ■ 第2回 IT講座 ゲームを作るって? https://www.slideshare.net/s-komori/2-it-83019937 ■ 第3回 IT講座 ゲームを作ってみよう! 基礎編 https://www.slideshare.net/s-komori/3-it-82957912 ■ 第4回 IT講座 ゲームを作ってみよう! 応用編 https://www.slideshare.net/s-komori/4-it-82958211 ■ 第5回 IT講座 ゲームを作ってみよう! 実践編 https://www.slideshare.net/s-komori/5-it-82958449 【連絡先】 小森俊哉/Shunya Komori 株式会社デイブレイク Webディレクター http://www.day-b.jp/
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
sogawaminoru
090601 担当者のコトバに振り回されるな!
090601 担当者のコトバに振り回されるな!
Ryohei Katayama
2009年6月6日 第24回Websig会議 担当者のコトバに振り回されるな! 1から10を読み取るロジカルコミュニケーション
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Naoki Kanazawa
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ by Schoo http://schoo.jp/class/251
Similar to Zen-Codingはみんなのもの
(20)
Web Design Process for The Future
Web Design Process for The Future
Web Design Process for The Future
Web Design Process for The Future
groundwork-pasona-tech
groundwork-pasona-tech
うちの開発におけるXD利用法
うちの開発におけるXD利用法
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
ワイヤーフレームとは?
ワイヤーフレームとは?
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
HTML5時代のWebデザイン
HTML5時代のWebデザイン
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
ワードプレスとは? 竜胆(りんどう)Webデザイン
ワードプレスとは? 竜胆(りんどう)Webデザイン
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
初めてのWebプログラミング講座
初めてのWebプログラミング講座
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
第1回 IT講座 IT基礎知識
第1回 IT講座 IT基礎知識
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
090601 担当者のコトバに振り回されるな!
090601 担当者のコトバに振り回されるな!
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
More from masaaki komori
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
masaaki komori
2017/7/26 JP_Stripes Vol.3 こもり
InstaVR使ってみた
InstaVR使ってみた
masaaki komori
【ハンズオンセミナー】はじめての★InstaVR -誰でも簡単♪誰もが感動するVRアプリを作ろう!- at 2017.4.13 Thu
Framerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディング
masaaki komori
WPJ Conference Vol.1 DESIGN meets CODE at 2017.2.4 SAT.
Prototyping with Sketch
Prototyping with Sketch
masaaki komori
html5j Webプラットフォーム部 第15回勉強会
プロトタイピングツール戦国時代
プロトタイピングツール戦国時代
masaaki komori
20160704 ヤフージャパン社内セミナー資料
Bootstrapではじめる、 Webサイト設計のモダンアプローチ
Bootstrapではじめる、 Webサイト設計のモダンアプローチ
masaaki komori
「Webサイト設計・UI実装・アクセシビリティのモダンアプローチ」イベント資料
レスポンシブEメールを作ろう
レスポンシブEメールを作ろう
masaaki komori
at TAMコワーキングスペース(東京/大阪)
Bootstrapはこう使う
Bootstrapはこう使う
masaaki komori
20150301『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント発表資料
デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作
masaaki komori
20150301『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント発表資料
2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws
masaaki komori
2015年1月21日銀座GATにて開催されたイベントのスライドです(http://event.67.org/2015/web)。 電子書籍「Development Environments for Web Designers 〜Webサイト制作の時流に乗り遅れないために、覚えておきたい開発環境の作り方」はこちらで販売しております。 https://gumroad.com/l/GFXe/
Webデザインと開発の未来
Webデザインと開発の未来
masaaki komori
こもりまさあき 2014. 09.05 | Developers Summit 2014 Kansai スライド資料
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
masaaki komori
2014年5月13日、高円寺こけむさズのSketch 3 勉強会で使ったスライド。特に内容はありませんが、試しに動画を埋め込んでいます。 Sketch 3 Book for Beginner http://bit.ly/1v9nBhd
インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1
masaaki komori
こけむさずの会。第一回目の引用しまくりスライドw
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
2012.06.30 CSS Nite LP, Disk 23 こもり資料
Sublime Text 2 Basics
Sublime Text 2 Basics
masaaki komori
2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka
Getting Started with Sublime Text 2
Getting Started with Sublime Text 2
masaaki komori
HTML5 Web Design Workflow
HTML5 Web Design Workflow
masaaki komori
WEB TOUCH MEETING Vol.51「HTML5時代のWebデザインワークフロー」
Web Site Optimization for Beginners
Web Site Optimization for Beginners
masaaki komori
Webサイト高速化勉強会@タネマキ用資料
Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53
masaaki komori
2012年9月24日「WordPressサイト構築から学ぶAWSハンズオン」おまけ資料
WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化
masaaki komori
WordCamp Tokyo 2012 ~ Pro Tips for Speeding Up WordPress: Optimization of Front-End ~
More from masaaki komori
(20)
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
InstaVR使ってみた
InstaVR使ってみた
Framerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディング
Prototyping with Sketch
Prototyping with Sketch
プロトタイピングツール戦国時代
プロトタイピングツール戦国時代
Bootstrapではじめる、 Webサイト設計のモダンアプローチ
Bootstrapではじめる、 Webサイト設計のモダンアプローチ
レスポンシブEメールを作ろう
レスポンシブEメールを作ろう
Bootstrapはこう使う
Bootstrapはこう使う
デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作
2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws
Webデザインと開発の未来
Webデザインと開発の未来
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
Sublime Text 2 Basics
Sublime Text 2 Basics
Getting Started with Sublime Text 2
Getting Started with Sublime Text 2
HTML5 Web Design Workflow
HTML5 Web Design Workflow
Web Site Optimization for Beginners
Web Site Optimization for Beginners
Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53
WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化
Zen-Codingはみんなのもの
1.
Zen-Codingはみんなのもの こもりまさあき
2.
1972年生まれのフリーランス 大学時代から都内にある某DTPの会社で5年ほど入出力から デザイン、ネットワーク管理業務などに従事。 現在は、Webをはじめとしたネットワーク関連業務のほか、 テクニカルライティングや講師などの活動が中心。 時と場合によって職種が変わるため、肩書きはなし。 近著に「HTML+CSSコーディングベストプラクティス」他。 こもりまさあき 簡単に自己紹介を http://eee.am/cipher
3.
これからお話しすること • Zen-Codingって何? • Zen-Codingの導入と覚えておきたいこと •
Zen-Codingに関する大きな勘違い • 環境にあわせたZen-Codingの使い方 • CSSもZen-Codingで入力して効率 UP • まとめ
4.
Zen-Codingって?
5.
• ひとことで言ってしまえば「マクロ」 • あらかじめ用意された省略形や書式を使い、 コードの入力補完をすることができる テキストエディタ用プラグイン •
Dreamweaver でも使える!* Zen-Codingとは *: 配布中の最新版は、Dreamweaver CS4用となってますが、その他のバージョンでも利用可能
6.
Zen-Codingの導入と覚えておきたいこと
7.
• 配布サイト(https://code.google.com/p/zen-coding/) から 「Zen
Coding for Dreamweaver」をダウンロード • Extension Managerでインストール * ダウンロードとインストール *: DW CS3で使用する場合は「Issues」で公開されている「zen_editor.js」を入れ替える →https://code.google.com/p/zen-coding/issues/detail?id=121 Zen Coding.mxp
8.
1. コードビューで、Zen-Codingの省略形を入力 Zen-Codingの基本となる使い方
9.
2. 入力した省略形を展開する Zen-Codingの基本となる使い方
10.
3. 登録されているコードが自動的に挿入される Zen-Codingの基本となる使い方
11.
省略形を入力して展開、登録されたコードが入力される
12.
• いくつかの記号を使った書式を覚えれば、 複雑な文書構造もまるで数式のように入力できる 例えばこんな感じで #wrapper>(#header>h1+p)+(ul#nav>li*4>a) +(.section>#article+#aside)+#footer>address より高度に使いこなすためには?
13.
<divid="wrapper"> <divid="header"> <h1></h1> <p></p> </div> <ulid="nav"> <li><ahref=""></a></li> <li><ahref=""></a></li> <li><ahref=""></a></li> <li><ahref=""></a></li> </ul> <divclass="section"> <divid="article"></div> <divid="aside"></div> </div> <divid="footer"> <address></address> </div> </div>
14.
まるでマジック
15.
• # を使ってid属性、.
でclass属性を指定 覚えておきたい記号いろいろ h2#newsRelease.note ↓ <h2 id=”newsRelease”class=”note”></h2> ※divの場合は、要素名を省略できる
16.
• [ ]
は、任意の属性を指定 覚えておきたい記号いろいろ a[title rel=”nofollow”] ↓ <a href="" title="" rel="nofollow"></a> ※属性名だけ、属性名+値でも可。複数指定する場合は、半角スペースで区切る
17.
• + は、連続する要素の指定に 覚えておきたい記号いろいろ h1#siteId+p ↓ <h1
id=”siteId”></h1> <p></p>
18.
• > は、親子関係の要素を入力 覚えておきたい記号いろいろ div#header>h1+p ↓ <div
id=”header”> <h1></h1> <p></p> </div>
19.
• ( )
は、要素をグループ化する 覚えておきたい記号いろいろ (ul>li)+div#contents ↓ <ul> <li></li> </ul> <div id=”contents”></div>
20.
• * は、任意の要素の繰り返しを指定 覚えておきたい記号いろいろ ul>li*2 ↓ <ul> <li></li> <li></li> </ul>
21.
• $ は、自動で番号をわりあてる 覚えておきたい記号いろいろ ul>li.navItems$$*2 ↓ <ul> <li
class="navItems01"></li> <li class="navItems02"></li> </ul>
22.
覚えるのはたったこれだけ。どうですか?
23.
Zen-Codingのこと、誤解してませんか?
24.
• 違います(キリッ) • 原稿ありきでのマークアップでも大丈夫 •
CSSの入力も、Zen-Codingを使えばサクサク • 作業内容や作業スタイルにあわせて使える HTMLをゼロから書くものじゃないの?
25.
つまり、コーディングに関わるすべての人が恩恵を受けられる
26.
スニペットや入力補完と組み合わせて、より効率的に
27.
環境にあわせてZen-Codingを使おう
28.
• HTMLの文書構造をゼロから書き上げる場合は、 Expand Abbreviation[
Ctrl + , ]を使おう! • 書式さえ覚えれば、文書構造は一気に書ける 文書構造をゼロからマークアップする
29.
取りかかる前に大まかな構造を頭に描くのがポイント
30.
• 適用したいテキストを選択して、 Wrap with
Abbreviation[ Ctrl + H ]を選択 • 表示されたダイアログに省略形を入力 原稿ありきでマークアップする
31.
• 連続するリスト項目や段落のマークアップは面倒… • DWの「クイックタグ編集」の拡張版ともいえる たとえば、こんな原稿も一発で home products … ↓ ul#nav>li.navItems* <ul
id=”nav”> <li class=”navItems”>home</li> <li class=”navItems”>products</li> <li class=”navItems”>support</li> <li class=”navItems”>contact</li> </ul>
32.
つまり、原稿ありきでもZen-Codingは使えるんです
33.
CSSだって、Zen-Codingでサクサク
34.
• 省略形を入力して、Expand Abbreviation! •
基本、プロパティ名の頭文字の組み合わせ CSSも省略形を展開して高速入力 m → margin:; fz → font-size:; lh → line-height:; bgc → background-color:; bdrs → border-radius:;
35.
• プロパティによっては、: でオプションを指定可能 •
よく使うものだけでも覚えれば、サクサク入力できる いくつかの入力オプション m:0 → margin: 0; m:3 → margin: 0 0 0; ff:ss → font-family: sans-serif; fw:b → font-weight: bold;
36.
省略形が…。大丈夫、チートシートがあります
37.
まとめ • Zen-Codingは、作業スタイルにあわせて適用できる • スニペットや補完と併用して、さらに効率化 •
CSSの入力も省略形でよりスピーディになる • 省略形や入力書式は、チートシートで確認しよう • 普段使うものから徐々にはじめてみましょう
38.
いまのやり方にプラスして幸せに
Download now