Submit Search
Upload
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
•
6 likes
•
1,343 views
Mitsuo Kawashima
Follow
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
Read less
Read more
Internet
Report
Share
Report
Share
1 of 23
Download now
Download to read offline
Recommended
2014.2.8に燕三条リサーチコアさんにて開催された、 「明日から実践!利益を生み出すホームページ活用セミナー」で公演した小杉パートのスライドです。
接客するホームページを育てるための WordPress(ワードプレス)基礎講座(2014/2/8)
接客するホームページを育てるための WordPress(ワードプレス)基礎講座(2014/2/8)
Hijili Kosugi
新年最初のがっつり系です。 相当濃縮しているので、今年はこの流れをひとつずつやっていきます(/・ω・)/
2016.1.10 企業・店舗ブログの 書き方&見直し方が身につく ワークショップセミナー
2016.1.10 企業・店舗ブログの 書き方&見直し方が身につく ワークショップセミナー
Hijili Kosugi
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
「明日から使える!ホームページ改善セミナー」 というテーマで、長岡会場と新潟会場でお話しした内容の一部です。
2015年10月 新潟県中小企業団体中央会様主催セミナー
2015年10月 新潟県中小企業団体中央会様主催セミナー
Hijili Kosugi
2020年6月6日にオンラインで開催した 「いまさら聞けないjQuery入門for デザイナー」 #いまさらjQuery のスライド資料です。
いまさら聞けないjQuery入門for デザイナー
いまさら聞けないjQuery入門for デザイナー
Asuka Kobayashi
静的HTML・CSSファイルをWordPressのテーマにする方法
静的HTMLファイルをWordPressのテーマにするワークショップ
静的HTMLファイルをWordPressのテーマにするワークショップ
masaya yamao
第67回「WEB TOUCH MEETING+WordPressハンズオン勉強会」(KDDIウェブコミュニケーションズ協賛)での前座の発表スライドです。 WordPressについてのさわり程度の内容です
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
「現場のプロが教えるWEBデザイン 新・スタンダードテクニック」発売記念イベント 登壇スライド http://peatix.com/event/114573
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
Yuki Kuramochi
Recommended
2014.2.8に燕三条リサーチコアさんにて開催された、 「明日から実践!利益を生み出すホームページ活用セミナー」で公演した小杉パートのスライドです。
接客するホームページを育てるための WordPress(ワードプレス)基礎講座(2014/2/8)
接客するホームページを育てるための WordPress(ワードプレス)基礎講座(2014/2/8)
Hijili Kosugi
新年最初のがっつり系です。 相当濃縮しているので、今年はこの流れをひとつずつやっていきます(/・ω・)/
2016.1.10 企業・店舗ブログの 書き方&見直し方が身につく ワークショップセミナー
2016.1.10 企業・店舗ブログの 書き方&見直し方が身につく ワークショップセミナー
Hijili Kosugi
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
「明日から使える!ホームページ改善セミナー」 というテーマで、長岡会場と新潟会場でお話しした内容の一部です。
2015年10月 新潟県中小企業団体中央会様主催セミナー
2015年10月 新潟県中小企業団体中央会様主催セミナー
Hijili Kosugi
2020年6月6日にオンラインで開催した 「いまさら聞けないjQuery入門for デザイナー」 #いまさらjQuery のスライド資料です。
いまさら聞けないjQuery入門for デザイナー
いまさら聞けないjQuery入門for デザイナー
Asuka Kobayashi
静的HTML・CSSファイルをWordPressのテーマにする方法
静的HTMLファイルをWordPressのテーマにするワークショップ
静的HTMLファイルをWordPressのテーマにするワークショップ
masaya yamao
第67回「WEB TOUCH MEETING+WordPressハンズオン勉強会」(KDDIウェブコミュニケーションズ協賛)での前座の発表スライドです。 WordPressについてのさわり程度の内容です
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
「現場のプロが教えるWEBデザイン 新・スタンダードテクニック」発売記念イベント 登壇スライド http://peatix.com/event/114573
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
Yuki Kuramochi
テーマ制作時に何向けに制作するかで、テーマ作りのポイントなどが変わってくることがあります。今回は、その場合のテーマの作り込みの考え方をご紹介します。
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
Web nist
見た目が良いのに、なんとなく上手くいかない理由は、Web デザインにおける『核』を省いたまま、サイトを制作しているからです。その核とはコンテンツです。 コンテンツはあって当たり前。あとで流し込めば良いという先入観から制作を始めると、見た目はなんとなく良いけど中身がないという結果に陥ります。また、クライアントですら、自分たちが出していくべきコンテンツが何かを把握していない場合があります。私たちが考えているほど、コンテンツは訪問者のニーズを満たしていないわけです。 核があり、それを補助するサイトはプロフェッショナルの手を借りないと作ることができないはずです。セッションでは、Web サイトにおける『核』の重要性と、その見つけ方を紹介します。そして、見つけ出した核をどのようにコンテンツ設計やビジュアルに活かすのかを事例をみながら解説します。
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
Yasuhisa Hasegawa
Firefox,Safari,Chromeのインスペクタの違いを紹介& ブラウザのインスペクタを使っての簡単なCSS編集方法
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
Atsushi Ando
WordCamp Kansai 2015 で行ったテーマ作成ハンズオンの「子テーマ」の説明です。
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
Akari Doi
its sample
Slide
Slide
Takuya Yamamoto
最新デフォルトテーマ「Twenty Fourteen」を基に、WordPressテーマの基礎やカスタマイズ、オリジナルテーマ作成へのヒントを学びます。
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
Takehiro Ichinohe
WordBench京都 2013年3月17日
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
業界未経験の新人エンジニアが素敵な就職をするためにできることをまとめました。(3つ目のコンテンツ内容が現在空白です。後で追記するかもしれません)
新人エンジニアが就活のためにできること
新人エンジニアが就活のためにできること
Yosuke Kasagawa
Html+css講座プレゼンテーション
Html+css講座プレゼンテーション
takahasi
Cdp道場201407
Cdp道場201407
Koichiro Nishijima
WordCamp KOBE2011でお話させていただいた、「初めてのWordPress!オリジナルのテーマでブログを作る方法」についてのスライドです
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
parkn-park
2019年10月19日に大崎ブライトコアホールで開催された、CSS Nite LP64「Coder's High 2019」にて登壇しました『プロジェクトをうまく進めるために、コーダーが進化するためのテクニック』のスライドです。
プロジェクトをうまく進めるために、コーダーが進化するためのテクニック
プロジェクトをうまく進めるために、コーダーが進化するためのテクニック
Hajime Ogushi
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
masaki sukeda
2012年2月16日 福井工業高等専門学校で行いましたデザインセミナーでのスライドです。
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
20120418 アジャイルサムライ読書会 第1回
20120418 アジャイルサムライ読書会 第1回
株式会社コネクトスター(ConnectStar Co., Ltd.)
“部下を持ったら必ず読む 「任せ方」の教科書”でリーダーのあり方を学ぶ
“部下を持ったら必ず読む 「任せ方」の教科書”でリーダーのあり方を学ぶ
bijikin
後日少し加筆した「おかわり」バージョンはこちらです。 http://www.slideshare.net/ayakasumida/wordcamp-kansai-2015-51661812 WordCamp Kansai 2015 で行ったワークショップの冒頭部分です。
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
Ayaka Sumida
2015/05/15 DevLOVE関西 クリエイターの技術持ち寄り発表会~デザインそもそも論 https://devlove-kansai.doorkeeper.jp/events/23681 こちらで発表したスライドです。
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
Ayaka Sumida
2013年9月21日に札幌で開催された「Director's Night」に登壇した際に使用したスライドです。 ここに記載されていることが全てではないですし、今現在、西山が全て出来ているかと問われるとおそらくNOですが、ご参考ください。
Director's Night 20130921
Director's Night 20130921
Yasufumi Nishiyama
PHPカンファレンス2012@東京 ( http://www.ustream.tv/recorded/25414614 )
これくらいはやってほしいWebデザイン
これくらいはやってほしいWebデザイン
Yuya Takahashi
170615 Eyes, JAPAN Web Developers Meeting
みんなのコンポーネント志向 Web開発
みんなのコンポーネント志向 Web開発
Yuki Ito
11/18イベント登壇資料です。
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
More Related Content
What's hot
テーマ制作時に何向けに制作するかで、テーマ作りのポイントなどが変わってくることがあります。今回は、その場合のテーマの作り込みの考え方をご紹介します。
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
Web nist
見た目が良いのに、なんとなく上手くいかない理由は、Web デザインにおける『核』を省いたまま、サイトを制作しているからです。その核とはコンテンツです。 コンテンツはあって当たり前。あとで流し込めば良いという先入観から制作を始めると、見た目はなんとなく良いけど中身がないという結果に陥ります。また、クライアントですら、自分たちが出していくべきコンテンツが何かを把握していない場合があります。私たちが考えているほど、コンテンツは訪問者のニーズを満たしていないわけです。 核があり、それを補助するサイトはプロフェッショナルの手を借りないと作ることができないはずです。セッションでは、Web サイトにおける『核』の重要性と、その見つけ方を紹介します。そして、見つけ出した核をどのようにコンテンツ設計やビジュアルに活かすのかを事例をみながら解説します。
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
Yasuhisa Hasegawa
Firefox,Safari,Chromeのインスペクタの違いを紹介& ブラウザのインスペクタを使っての簡単なCSS編集方法
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
Atsushi Ando
WordCamp Kansai 2015 で行ったテーマ作成ハンズオンの「子テーマ」の説明です。
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
Akari Doi
its sample
Slide
Slide
Takuya Yamamoto
最新デフォルトテーマ「Twenty Fourteen」を基に、WordPressテーマの基礎やカスタマイズ、オリジナルテーマ作成へのヒントを学びます。
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
Takehiro Ichinohe
WordBench京都 2013年3月17日
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
業界未経験の新人エンジニアが素敵な就職をするためにできることをまとめました。(3つ目のコンテンツ内容が現在空白です。後で追記するかもしれません)
新人エンジニアが就活のためにできること
新人エンジニアが就活のためにできること
Yosuke Kasagawa
Html+css講座プレゼンテーション
Html+css講座プレゼンテーション
takahasi
Cdp道場201407
Cdp道場201407
Koichiro Nishijima
WordCamp KOBE2011でお話させていただいた、「初めてのWordPress!オリジナルのテーマでブログを作る方法」についてのスライドです
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
parkn-park
2019年10月19日に大崎ブライトコアホールで開催された、CSS Nite LP64「Coder's High 2019」にて登壇しました『プロジェクトをうまく進めるために、コーダーが進化するためのテクニック』のスライドです。
プロジェクトをうまく進めるために、コーダーが進化するためのテクニック
プロジェクトをうまく進めるために、コーダーが進化するためのテクニック
Hajime Ogushi
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
masaki sukeda
2012年2月16日 福井工業高等専門学校で行いましたデザインセミナーでのスライドです。
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
20120418 アジャイルサムライ読書会 第1回
20120418 アジャイルサムライ読書会 第1回
株式会社コネクトスター(ConnectStar Co., Ltd.)
“部下を持ったら必ず読む 「任せ方」の教科書”でリーダーのあり方を学ぶ
“部下を持ったら必ず読む 「任せ方」の教科書”でリーダーのあり方を学ぶ
bijikin
後日少し加筆した「おかわり」バージョンはこちらです。 http://www.slideshare.net/ayakasumida/wordcamp-kansai-2015-51661812 WordCamp Kansai 2015 で行ったワークショップの冒頭部分です。
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
Ayaka Sumida
2015/05/15 DevLOVE関西 クリエイターの技術持ち寄り発表会~デザインそもそも論 https://devlove-kansai.doorkeeper.jp/events/23681 こちらで発表したスライドです。
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
Ayaka Sumida
2013年9月21日に札幌で開催された「Director's Night」に登壇した際に使用したスライドです。 ここに記載されていることが全てではないですし、今現在、西山が全て出来ているかと問われるとおそらくNOですが、ご参考ください。
Director's Night 20130921
Director's Night 20130921
Yasufumi Nishiyama
PHPカンファレンス2012@東京 ( http://www.ustream.tv/recorded/25414614 )
これくらいはやってほしいWebデザイン
これくらいはやってほしいWebデザイン
Yuya Takahashi
What's hot
(20)
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
Slide
Slide
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
新人エンジニアが就活のためにできること
新人エンジニアが就活のためにできること
Html+css講座プレゼンテーション
Html+css講座プレゼンテーション
Cdp道場201407
Cdp道場201407
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
プロジェクトをうまく進めるために、コーダーが進化するためのテクニック
プロジェクトをうまく進めるために、コーダーが進化するためのテクニック
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
20120418 アジャイルサムライ読書会 第1回
20120418 アジャイルサムライ読書会 第1回
“部下を持ったら必ず読む 「任せ方」の教科書”でリーダーのあり方を学ぶ
“部下を持ったら必ず読む 「任せ方」の教科書”でリーダーのあり方を学ぶ
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
Director's Night 20130921
Director's Night 20130921
これくらいはやってほしいWebデザイン
これくらいはやってほしいWebデザイン
Similar to 第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
170615 Eyes, JAPAN Web Developers Meeting
みんなのコンポーネント志向 Web開発
みんなのコンポーネント志向 Web開発
Yuki Ito
11/18イベント登壇資料です。
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
第14回リクリセミナー「Web制作の未来、あなたの未来」最終版
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
WordBench神戸2012/11/10発表資料
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
Atushi Sugiyama
Web制作勉強会第一回の資料 配布資料(PDF) http://goo.gl/FJPaX
Web制作勉強会 #1
Web制作勉強会 #1
Moto Yan
CSSフレームワークであるBootstrapを初めて使ってみたので、そのBootstrapについて、ご紹介を。 フレームワークは初めて使ってみたのですが、便利であったため、PHPのフレームワークのCakePHPなどに手を出してみたいと思いました。
掲示板にBootstrap使ってみたよ!
掲示板にBootstrap使ってみたよ!
ferretdayo
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
HTML5ビギナーズ in dots.
まだやれる Css preprocesser
まだやれる Css preprocesser
Shinya Sugo
HTML5とCSS3でWebが変わる!でも導入は簡単!
HTML5とCSS3でWebが変わる!でも導入は簡単!
Toshihito Gamo
WCAF vol.10 こもり資料
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
WCAN mini Design vol.9 資料
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
WordCamp Tokyo2015ハンズオンスライド(配布版)
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
WordVolcano(2012.7.14@マルヤガーデンズ/鹿児島) ---------------------- HTML,CSS,PHPなどのコードをさわらずに、既存テーマとプラグインでビジネサイトを作ってみよう、というセッションを行いました。
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
なぜ僕がCSSを勉強したかというと、研修の時にサイトを自分たちで作った時になんか地味でかっこ悪いなと思い、なにかもっと派手に出来ないかなぁと考えたのがきっかけです。
cssについて
cssについて
rootage-inc
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/441/room ーーーーーーーーーーーーーーーーーーーーーーー
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
schoowebcampus
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/677/room ーーーーーーーーーーーーーーーーーーーーーーー
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
schoowebcampus
コードを用いてアニメーションやビジュアル表現を行うクリエイティブコーディングの世界。最初はシンプルな動きや見た目でも、少しのコードを追加するだけで驚くほどの変貌を遂げたり、些細な変化がインタラクションの手触りを大きく変えたり。そのようなコードでこだわりを重ねていくことの面白さを、いくつかの事例を交えながらお話します。
DIST.42 クリエイティブコーディングで生み出すWebデザインの世界観「コードでつくる動きと見た目のこだわり」
DIST.42 クリエイティブコーディングで生み出すWebデザインの世界観「コードでつくる動きと見た目のこだわり」
Ikeda Ryou
グリッドレイアウトをMasonry.jsを使って実施してみました。 高さの違うアイテムを自動的に再配置して、グリッドレイアウトしてくるJavaScriptライブラリです。 また、スマートフォンデバイス、タブレットデバイスなどにも自動でレイアウトが行われるので非常に配置がしやすいです。 BootsStrapで組み合わせると非常に早く、高機能なレイアウトが作成できます。 Masonryのどのあたりが便利なのかに重点をおいて説明してみました。 Webページでのスライドは以下になります。 http://ticklecode.com/present/140309_jscafe_Masonry/
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
Yoshinori Kobayashi
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
Masakazu Muraoka
Similar to 第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
(20)
みんなのコンポーネント志向 Web開発
みんなのコンポーネント志向 Web開発
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
Web制作勉強会 #1
Web制作勉強会 #1
掲示板にBootstrap使ってみたよ!
掲示板にBootstrap使ってみたよ!
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
まだやれる Css preprocesser
まだやれる Css preprocesser
HTML5とCSS3でWebが変わる!でも導入は簡単!
HTML5とCSS3でWebが変わる!でも導入は簡単!
Web Design Process for The Future
Web Design Process for The Future
Web Design Process for The Future
Web Design Process for The Future
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
cssについて
cssについて
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
DIST.42 クリエイティブコーディングで生み出すWebデザインの世界観「コードでつくる動きと見た目のこだわり」
DIST.42 クリエイティブコーディングで生み出すWebデザインの世界観「コードでつくる動きと見た目のこだわり」
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
1.
reset.cssとnormalize.css について考えていたら… 第9回 HTML5ビギナーズ CSSとCSS設計を学ぼう!
2.
河島 美津雄 自己紹介 株式会社フリーセル twitter :
@320kawashima html5jスタッフ、html5j ビギナー部 所属 Webデザイナー・フロントエンドエンジニア
3.
心持ちについて ちょっと喋らせて下さい ビギナー部での河島の理念 本題に入る前に、少しだけ勉強会をする心持ちについてお話しさせ てください。 理念とかちょっと大層なことを書いていますが、この理念を軸に web業界に貢献していきたいと思っています。
4.
心持ちについて ちょっと喋らせて下さい ビギナー部での河島の理念 日本のWebをたぎらせるベースづくりに貢献する この考え方のもとになったものは…
5.
心持ちについて ちょっと喋らせて下さい ビギナー部での河島の理念 日本のWebをたぎらせるベースづくりに貢献する これ
6.
先ほどの画像はhtml5jというコミュニティが主催したアワードのロゴなんですが、これに感化されてビギナー 部に参加しようと思いました。 もともとこのような勉強会には出来るだけ参加していたのですが、このアワードでグループを組んでアワード に応募する過程を通して、結論、楽しかったんです。 勉強会に参加するのはもちろん好きで参加しているんですが、一方では業界においていかれないようにとか 勉強しなきゃとかどちらかというとネガティブな意味合いも今思えばあったと思います。 しかしこのアワードに参加して、楽しいから追求するんだという概念が意識レベルで根付き、「自分もwebを たぎらせたいなー」と思うようになりました。 けど、何か特別なスキルなんて持ってない、人材ということで考えると変わりはいくらでもいるレベルだと自 分で認識して、けど何かしら業界貢献はしたい…と考えているところにビギナー部というのがあると知り 「webをたぎらるベースづくりだったらできるかも」ということで 、勉強会でお知り合いになった方を通し て入部させていただき今にいたります。このような勉強会での出会い・人のつながりも大事ですね。よかっ たら周りの人に声をかけて名刺交換なりfacebookで友達になったりしてつながりを広めていってください。 特に、web業界でこれからという0の状態で1を生み出すのは大変労力がいることだと思います。もちろん、 これはwebに限ったことではないと思いますが…。少しでも日本のweb業界の底上げに、またビギナーの方々 の役に立てればと思っております。
7.
本日の流れ アジェンダ ・ブラウザのデフォルトCSS ・ reset.css ・ normalize.css ・reset.cssとnormalize.cssについて考えていたら…
8.
既に設定されているCSS ブラウザのデフォルトCSS Webサイトを表示させるブラウザそのものに、デフォルトで設定されてい るスタイルシートが存在します。 しかし、何かの標準の規格があるわけではなく、ブラウザによって差異が あり、統一されているわけではありません。
9.
確かに違う… 実際にブラウザのデフォルトCSSでの表示は… ※重要なのは表示が違うということではなく、数値が違うということ。
10.
困った… ブラウザによって表示が違うことを解決するために 表示を統一するためのCSSを読み込ませましょう。 ちなみに、制作会社によってはあらかじめテンプレートが用意されていて、 使い回しでどんなCSSが使われているかよくわからずに何気なくコーディ ングしていることもあるかもしれません。 もしかしたら今の時代に合わないCSSを使っているかも… 勤務先でのブラウザの表示を統一しているCSSをチェックてみましょう! CSSを書く上でのベースになるものになります。 だた、デフォルトCSS自体は 考えられて作られていて見やすいらしいです。
11.
reset.css デフォルトで指定されていた値を0やnoneなどに設定して、リセットするもの。 有名どころだと ・YUI3 Reset CSS ・Eric
Meyer s Reset CSS 2.0 ・HTML5 Reset Stylesheet 一旦リセットしてから、目的のスタイルを指定していきます。 リセットしたものを実際に見てみよう! リセットして統一
12.
デフォルトを活かしつつ統一 normalize.css Normalizeを日本語に訳すと「標準に戻す,正常化する」となります。 デフォルトスタイルシートのブラウザごとの指定を統一して、有用なスタ イルは活用しようというもの。 HTML5、スマートフォン用のブラウザに も対応しています。 normalize.cssには細かい説明が入っています https://github.com/necolas/normalize.css/blob/master/normalize.css normalize.cssの中身は?
13.
reset.cssとnormalize.css、それぞれコーディング時で何が違ってくるのか 例えばh2を見てみると、pタグのようなテキストと同じ扱いにすることは まずないと思います。 reset.css(YUI3 Reset CSS)を使ったとして適応されている内容をみると marginやpaddingが0ということもあまりないかな… h2
{ font-size: 100%; font-weight: normal; margin: 0; padding: 0; } 何が変わってくる?
14.
デフォルトのCSS自体は良く考えられていると前述しましたが、活用でき るものをわざわざするリセットしていると、また指定し直さないといけな くなります。 何が変わってくる? reset.cssとnormalize.css、それぞれコーディング時で何が違ってくるのか
15.
デフォルトのCSS自体は良く考えられていると前述しましたが、活用でき るものをわざわざするリセットしていると、また指定し直さないといけな くなります。 何が変わってくる? reset.cssとnormalize.css、それぞれコーディング時で何が違ってくるのか ・二度手間 ・不要なコードが増える ・ムダなコードをブラウザに読み込みさせる
16.
読み込むものが多くなる どういうこと? 無駄なコードをブラウザに読み込ませるということは… すなわちパフォーマンスが悪くなる CSSだけに限ったものではありません。 画像やサーバーサイドなどの問題もあります。 ※CSSの影響は全体の割合としては大きな影響力はないかもしれませんが、考え方としては重要
17.
何をもって良いとするのか? 良いCSSの記述とは何なのか? CSSはWebサイトやwebアプリケーションを構成する一部。 そもそも制作物の目的のために存在します。 その制作物の目的は…
18.
CSSはWebサイトやwebアプリケーションを構成する一部。 そもそも制作物の目的のために存在します。 その制作物の目的は… 何をもって良いとするのか? 良いCSSの記述とは何なのか? ビジネスのためにあるものが多い
19.
どのような関係がある? Webパフォーマンスとビジネスの関係
20.
どのような関係がある? Webパフォーマンスとビジネスの関係 Webパフォーマンスの低下は ビジネスの機会損失に直結します 逆にamazonでは、サイトの表示速度を100ミリ秒 改善すると、収益が1%増加したとのこと
21.
・無駄なコードは書かない(圧縮も方法の一つ) ・ユニバーサルセレクタを使用しない ・@importは使用しない ・外部CSSファイルはできるだけ少なく (内部で読み込む選択肢もある) 何ができる? パフォーマンスを考えたCSS 状況によって、出来るで出来ないはあると思いますが…
22.
何ができる? パフォーマンスを考えたCSS パフォーマンスが遅くならないためにできることをしよう。 スマホの利用割合も増えてきているので、通信速度のことを考えるとや はりパフォーマンスのことは重要になってきます。 CSSの記述やCSS設計をする上でもちろんこのパフォーマンスを考え た上でなされているのですが、大前提すぎでちょっとフォーカスされ にくいと思い、パフォーマンスについてお話しさせていただきました。 ということで 結論…
23.
どうだったの? reset.cssとnormalize.cssについて考えていたら… ということでした。 ご清聴ありがとうございました! パフォーマンスのことに 行き着いてしまった
Download now