Submit Search
Upload
CSS の歩き方
•
5 likes
•
12,396 views
Seiichiro Mishiba
Follow
2015年7月29日 松戸WordPress部勉強会スライド
Read less
Read more
Report
Share
Report
Share
1 of 67
Recommended
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
WDF.Vol.8で話したCSSについてのスライドです。 HTMLの見た目を制御するCSS。 CSS3やsassなど技術的な話題を目にすることは多いですが その運用方法について多くは語られていません。 大規模サイトを大人数で制作する状況でCSSはどうあるべきか。 DMM.comという巨大サイトの運用を通じて得た経験を話したいと思います。
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
CSS設計に関わるあれこれ。 基本〜実践的な内容です。 OOCSS, BEM, SMACSSとかも出てきます。
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
下記勉強会の発表資料です。 --------------------------------------------------------- 使いたくなる UI をつくる! フロントエンド 勉強会 : ATND http://atnd.org/events/42371 ---------------------------------------------------------
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
新規サイト制作におけるフロントエンドの環境を統一化しようと試みて作ってみましたー
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
第45回 WordBench 大阪での発表資料です。 あとがき:http://www.torounit.com/blog/2015/09/15/2088/
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
2016年5月13日 CodeGrid 四周年記念パーティーでの「ヒューマンリーダブルな CSS 記述法(異次元編、α版)」の資料です。大規模な運用でも、CSSをヒューマンリーダブルに保つ方法について、その試みを提案しました。スライド中のデモは https://github.com/storywriter/HRCSS で公開しています。
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
Yumi uniq Ishizaki
オブジェクト指向のCSSの話とか、smacssとbemの話とか、社内勉強会で好き勝手にしゃべってみました
Recommended
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
WDF.Vol.8で話したCSSについてのスライドです。 HTMLの見た目を制御するCSS。 CSS3やsassなど技術的な話題を目にすることは多いですが その運用方法について多くは語られていません。 大規模サイトを大人数で制作する状況でCSSはどうあるべきか。 DMM.comという巨大サイトの運用を通じて得た経験を話したいと思います。
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
CSS設計に関わるあれこれ。 基本〜実践的な内容です。 OOCSS, BEM, SMACSSとかも出てきます。
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
下記勉強会の発表資料です。 --------------------------------------------------------- 使いたくなる UI をつくる! フロントエンド 勉強会 : ATND http://atnd.org/events/42371 ---------------------------------------------------------
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
新規サイト制作におけるフロントエンドの環境を統一化しようと試みて作ってみましたー
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
第45回 WordBench 大阪での発表資料です。 あとがき:http://www.torounit.com/blog/2015/09/15/2088/
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
2016年5月13日 CodeGrid 四周年記念パーティーでの「ヒューマンリーダブルな CSS 記述法(異次元編、α版)」の資料です。大規模な運用でも、CSSをヒューマンリーダブルに保つ方法について、その試みを提案しました。スライド中のデモは https://github.com/storywriter/HRCSS で公開しています。
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
Yumi uniq Ishizaki
オブジェクト指向のCSSの話とか、smacssとbemの話とか、社内勉強会で好き勝手にしゃべってみました
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
2014/09/17に話した内容のスライド。 Google Slideから移動
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. アイコンとテキストが1pxズレてる...!とかいうときに5秒で揃えるワザ 11. text-indent:-9999pxの上位互換的なワザ 12. デバイズごとに快適な閲覧をしてもらうために設定すべきviewportのワザ 【jsで無理やりごにょごにょ編】 13. select要素をデザインするワザ 14. input[type=“file”]要素をデザインするワザ 15. ユーザーエージェントを利用してブラウザ&OSハックするワザ
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
Frontrend in Kanazawa -(2014年10月18日開催)で使用したスライドです。 http://labo.dmm.com/frontrend/
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
Introduction of CSS Validator with an Idea of a E2E Testing Automation Platform.
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
2012.06.30 CSS Nite LP, Disk 23 こもり資料
コーディングが上達するコツ
コーディングが上達するコツ
evol-ni
http://html555.jp/2012/04/25/cording-speed-up/
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
takumaro web
CSS設計についてまとめた資料です。 本資料の構成は以下の通りです。 はじめに CSS設計準備 ・ ブラウザに対する理解 ・ normalize.css / reset CSS ・ 新しいリセット用CSSのご紹介 私的CSS設計における ベストプラクティス - コンパイル言語について
SMACSS入門
SMACSS入門
iPride Co., Ltd.
2019/11/1の勉強会で発表したものです。
CSS設計のお勉強
CSS設計のお勉強
MarlboroLand
先日開催した勉強会のスライドです
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
11/18イベント登壇資料です。
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
HTML5のマークアップの特徴を一言で表すとすれば「セマンティクス」。それ故に、HTML5では文脈に合わせてマークアップしなければいけません。もはや、マークアップは単純作業ではなくクリエイティブなものになっているのです。マークアップにも心得と作法がよりいっそう重要になってきています。本セッションでは、HTML5仕様ではマークアップに何を求めているのか(心得)、そして、我々はどのようにマークアップをすべきか(作法)、について具体的に解説します。
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
Shin Takeuchi
#1 9つの箱とセマンティクスHTML #2 各サービスにおける現状のブラウザシェア #3 コーディングルール #4 CSS4 #5 レビュー&ディスカッション
css基本。
css基本。
web12
壊れやすいCSS
壊れやすいCSS
Masahiro Kobayashi
2015.02.24 第9回HTML5ビギナーズ CSSとCSS設計について学ぼう! で使用したスライドです
モダンCSS設計と BEMという開発手法
モダンCSS設計と BEMという開発手法
Kenji Karahashi
社内LT。超ライトな内容ですが、CSS設計の話をしてます。
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
最近実務で実戦投入したフロント技術について、導入した際のメリット・デメリットを記しました。 ちなみにその実務というのは、会社のプロダクト「LIGBLOG(liginc.co.jp)」のリニューアルです。 第5回HTML5minutes登壇時の資料です。
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
CSS Nite LP32 Sass で行なった「Sass/Compass よくあるトラブルと 解決方法・回避方法」のスライドです
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
2014/03/29 WordBench東京 春のデザイナー祭り!のスライド
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
拓樹 谷
2014年11月8日 大阪 「Web制作者のためのCSS設計の教科書」出版記念イベント x CSSオジサン #0 のスライドです。
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
More Related Content
What's hot
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
2014/09/17に話した内容のスライド。 Google Slideから移動
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. アイコンとテキストが1pxズレてる...!とかいうときに5秒で揃えるワザ 11. text-indent:-9999pxの上位互換的なワザ 12. デバイズごとに快適な閲覧をしてもらうために設定すべきviewportのワザ 【jsで無理やりごにょごにょ編】 13. select要素をデザインするワザ 14. input[type=“file”]要素をデザインするワザ 15. ユーザーエージェントを利用してブラウザ&OSハックするワザ
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
Frontrend in Kanazawa -(2014年10月18日開催)で使用したスライドです。 http://labo.dmm.com/frontrend/
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
Introduction of CSS Validator with an Idea of a E2E Testing Automation Platform.
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
2012.06.30 CSS Nite LP, Disk 23 こもり資料
コーディングが上達するコツ
コーディングが上達するコツ
evol-ni
http://html555.jp/2012/04/25/cording-speed-up/
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
takumaro web
CSS設計についてまとめた資料です。 本資料の構成は以下の通りです。 はじめに CSS設計準備 ・ ブラウザに対する理解 ・ normalize.css / reset CSS ・ 新しいリセット用CSSのご紹介 私的CSS設計における ベストプラクティス - コンパイル言語について
SMACSS入門
SMACSS入門
iPride Co., Ltd.
2019/11/1の勉強会で発表したものです。
CSS設計のお勉強
CSS設計のお勉強
MarlboroLand
先日開催した勉強会のスライドです
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
11/18イベント登壇資料です。
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
HTML5のマークアップの特徴を一言で表すとすれば「セマンティクス」。それ故に、HTML5では文脈に合わせてマークアップしなければいけません。もはや、マークアップは単純作業ではなくクリエイティブなものになっているのです。マークアップにも心得と作法がよりいっそう重要になってきています。本セッションでは、HTML5仕様ではマークアップに何を求めているのか(心得)、そして、我々はどのようにマークアップをすべきか(作法)、について具体的に解説します。
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
Shin Takeuchi
#1 9つの箱とセマンティクスHTML #2 各サービスにおける現状のブラウザシェア #3 コーディングルール #4 CSS4 #5 レビュー&ディスカッション
css基本。
css基本。
web12
壊れやすいCSS
壊れやすいCSS
Masahiro Kobayashi
2015.02.24 第9回HTML5ビギナーズ CSSとCSS設計について学ぼう! で使用したスライドです
モダンCSS設計と BEMという開発手法
モダンCSS設計と BEMという開発手法
Kenji Karahashi
社内LT。超ライトな内容ですが、CSS設計の話をしてます。
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
最近実務で実戦投入したフロント技術について、導入した際のメリット・デメリットを記しました。 ちなみにその実務というのは、会社のプロダクト「LIGBLOG(liginc.co.jp)」のリニューアルです。 第5回HTML5minutes登壇時の資料です。
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
CSS Nite LP32 Sass で行なった「Sass/Compass よくあるトラブルと 解決方法・回避方法」のスライドです
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
2014/03/29 WordBench東京 春のデザイナー祭り!のスライド
What's hot
(20)
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
コーディングが上達するコツ
コーディングが上達するコツ
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
SMACSS入門
SMACSS入門
CSS設計のお勉強
CSS設計のお勉強
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
css基本。
css基本。
壊れやすいCSS
壊れやすいCSS
モダンCSS設計と BEMという開発手法
モダンCSS設計と BEMという開発手法
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Viewers also liked
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
拓樹 谷
2014年11月8日 大阪 「Web制作者のためのCSS設計の教科書」出版記念イベント x CSSオジサン #0 のスライドです。
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
Web design
Web design
kazuko kaneuchi
Webデザイン概論の講義資料です。 主な対象は業務支援システムの開発されている方です。
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
光利 吉田
ノンデザイナーのためのWebデザイン講座
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
Eigoro Yamamura
Creator's village in EHIMEの資料
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
Webサイトの構築に際して、デザイナーの領域とされていたデザインのトーン&マナーの方向性を導き出すため、簡便な手法をまとめた資料です。
デザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
nanapi勉強会「チームで作るデザイン / チームを作るデザイン」2014.11.11
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
Ayaka Sumida
後日少し加筆した「おかわり」バージョンはこちらです。 http://www.slideshare.net/ayakasumida/wordcamp-kansai-2015-51661812 WordCamp Kansai 2015 で行ったワークショップの冒頭部分です。
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
Sasaki Kouhei
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
2012年2月16日 福井工業高等専門学校で行いましたデザインセミナーでのスライドです。
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
BP study #46
Viewers also liked
(12)
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
Web design
Web design
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
デザインのためのデザイン
デザインのためのデザイン
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Similar to CSS の歩き方
コーディングがラクになる!? “自分仕様”のさくさくコーディング法
コーディングがラクになる!? “自分仕様”のさくさくコーディング法
Rico Sengan
2014年10月29日、銀座GAT/CALLEGEにて開催されたセミナー資料
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
Chieko Aihara
2013.1.18赤羽デザイン勉強会でのおまけのお話です。
What's Sketch.app
What's Sketch.app
littlebustersreply
Ps / Ai / Fw / Sketch ガチンコバトル勉強会 in 岡山で発表した、Sketch.appのスライドです。発表時はでも中心だったので、それなりに分かるよう加筆しています。
かんたんキレイなウェブデザイン
かんたんキレイなウェブデザイン
Shuhei Iitsuka
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
Kei Nakazawa
Flash LiteのアニメーションをJS+CSSに書き換えてみるハンズオンです。変換技術の紹介もいくつかしています。
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
知己 久保
MTDDC Tokyo 2015で話した内容です。 MTのデモでは、モジュールをダブルクリックするとHTMLやCSSの編集エリアが表示される。 HTML, CSSの編集エリアは、Emmetも利用できるようにしています。 保存すると、Data APを利用して記事を編集・保存し、再構築まで行うようになっています。 ただ実際に使うのは難しいかも。
CSS Design and Programming
CSS Design and Programming
Taku AMANO
CSS3 Design Recipe
CSS3 Design Recipe
Kazunari Hara
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
https://www.facebook.com/TonosamaLabo
掲示板にBootstrap使ってみたよ!
掲示板にBootstrap使ってみたよ!
ferretdayo
CSSフレームワークであるBootstrapを初めて使ってみたので、そのBootstrapについて、ご紹介を。 フレームワークは初めて使ってみたのですが、便利であったため、PHPのフレームワークのCakePHPなどに手を出してみたいと思いました。
バレンタイン直前開催Web勉強会
バレンタイン直前開催Web勉強会
Takahide Hosokawa
当日参加者向けスライド
WordPressのデフォルトテーマ Twenty Twelveから見る レスポンシブウェブデザインと モバイルファーストの考え方@Co-Edo
WordPressのデフォルトテーマ Twenty Twelveから見る レスポンシブウェブデザインと モバイルファーストの考え方@Co-Edo
Chieko Aihara
赤羽デザイン勉強会の再演ですが少し内容が変わっています。
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
schoo WEB-campus http://schoo.jp/class/251
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Naoki Kanazawa
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ by Schoo http://schoo.jp/class/251
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
Kazunari Hara
テックヒルズ #2(http://atnd.org/events/25630)の内容です。
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
Atushi Sugiyama
WordBench神戸2012/11/10発表資料
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
Shinichi Sato
Similar to CSS の歩き方
(20)
コーディングがラクになる!? “自分仕様”のさくさくコーディング法
コーディングがラクになる!? “自分仕様”のさくさくコーディング法
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
What's Sketch.app
What's Sketch.app
かんたんキレイなウェブデザイン
かんたんキレイなウェブデザイン
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
CSS Design and Programming
CSS Design and Programming
CSS3 Design Recipe
CSS3 Design Recipe
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
掲示板にBootstrap使ってみたよ!
掲示板にBootstrap使ってみたよ!
バレンタイン直前開催Web勉強会
バレンタイン直前開催Web勉強会
WordPressのデフォルトテーマ Twenty Twelveから見る レスポンシブウェブデザインと モバイルファーストの考え方@Co-Edo
WordPressのデフォルトテーマ Twenty Twelveから見る レスポンシブウェブデザインと モバイルファーストの考え方@Co-Edo
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
More from Seiichiro Mishiba
絶望的に方向音痴な僕が神社サイトを作ってみた
絶望的に方向音痴な僕が神社サイトを作ってみた
Seiichiro Mishiba
第二回もくもく勉強会@日本橋 2017年2月18日
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
Seiichiro Mishiba
第23回 WordPress 勉強会@松戸 2016年7月13日
Word press をはじめたら覚えておきたい7つの事
Word press をはじめたら覚えておきたい7つの事
Seiichiro Mishiba
2016年2月24日:第21回 WordPress 勉強会@松戸
初心者でもすぐできる Wordpress バックアップのススメ
初心者でもすぐできる Wordpress バックアップのススメ
Seiichiro Mishiba
WordPress バックアップのススメ 〜バックアップから復元までやってみよう〜
はじめてのGit
はじめてのGit
Seiichiro Mishiba
2015年7月:ゆるゆるカフェ
カスタムフィールドを使ってハッピーになろう
カスタムフィールドを使ってハッピーになろう
Seiichiro Mishiba
松戸WordPress部:2015年6月24日
はじめてのカスタマイズ
はじめてのカスタマイズ
Seiichiro Mishiba
松戸WordPress部:はじめてのカスタマイズ
データベースと仲良くなろう
データベースと仲良くなろう
Seiichiro Mishiba
データベースと仲良くなろう〜WordPressのバックアップから引っ越しまで〜 2015年4月11日 ゆるゆるカフェ
もっとはじめてのオリジナルテーマ制作
もっとはじめてのオリジナルテーマ制作
Seiichiro Mishiba
2015年2月18日:松戸WordPress部:もっとはじめてのオリジナルテーマ制作
ゆるゆるカフェに行ってきました
ゆるゆるカフェに行ってきました
Seiichiro Mishiba
2015年1月14日松戸WordPress部ライトニングトーク
FoundationのSassを使いはじめた人と使いたいと考えている人へ
FoundationのSassを使いはじめた人と使いたいと考えている人へ
Seiichiro Mishiba
2015年1月10日ゆるゆるカフェ
はじめてのオリジナルテーマ制作
はじめてのオリジナルテーマ制作
Seiichiro Mishiba
松戸WordPress部スライド
松戸WP部バックアップとリストア
松戸WP部バックアップとリストア
Seiichiro Mishiba
とあるぼっち開発者の憂鬱とGit
とあるぼっち開発者の憂鬱とGit
Seiichiro Mishiba
More from Seiichiro Mishiba
(14)
絶望的に方向音痴な僕が神社サイトを作ってみた
絶望的に方向音痴な僕が神社サイトを作ってみた
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
Word press をはじめたら覚えておきたい7つの事
Word press をはじめたら覚えておきたい7つの事
初心者でもすぐできる Wordpress バックアップのススメ
初心者でもすぐできる Wordpress バックアップのススメ
はじめてのGit
はじめてのGit
カスタムフィールドを使ってハッピーになろう
カスタムフィールドを使ってハッピーになろう
はじめてのカスタマイズ
はじめてのカスタマイズ
データベースと仲良くなろう
データベースと仲良くなろう
もっとはじめてのオリジナルテーマ制作
もっとはじめてのオリジナルテーマ制作
ゆるゆるカフェに行ってきました
ゆるゆるカフェに行ってきました
FoundationのSassを使いはじめた人と使いたいと考えている人へ
FoundationのSassを使いはじめた人と使いたいと考えている人へ
はじめてのオリジナルテーマ制作
はじめてのオリジナルテーマ制作
松戸WP部バックアップとリストア
松戸WP部バックアップとリストア
とあるぼっち開発者の憂鬱とGit
とあるぼっち開発者の憂鬱とGit
CSS の歩き方
1.
松戸WordPress部 2015年7月29日 の歩き方 写真AC http://www.photo-ac.com/
2.
名前 三柴 誠一郎 出身 愛媛県 拠点 千葉県松戸市 特徴 絶望的に方向音痴 趣味 カメラ、 旅、
料理、 滝めぐり 自己紹介 活動 松戸でWordPressに関するセミナーを運営 https://www.facebook.com/groups/wordpress.banana.cluster/ https://wpmatsudo.doorkeeper.jp/ 経歴 1996年にIT会社へ入社。業務システムの 企画・構築・運用等の経験を経て2014年 からフリーランスとして活動中。
3.
第1歩 最近の CSS について 第2歩 CSS
の基本をおさらいしよう 第3歩 CSS の設計について 本日のアジェンダ
4.
CSS 書くのって 大変じゃないですか? 写真素材ぱくたそ https://www.pakutaso.com
5.
これまでの当たり前
6.
画面に動きをつけたい 見栄えをよくしたい JavaScript Photoshop Illustrator
7.
これらの多くの事が CSS(CSS3) で 出来るようになった
8.
レスポンシブWebデザイン スマホ対応 H T M L 5 Bootstrap Webフォント 角 丸 アニメーション グラデーション インブラウザデザイン モーダルウィンドウ アコーディオン・メニュー アイコンフォント CSSハック 疑 似 要 素 ベンダープレフィックス プリプロセッサ CMS ドロップシャドウ 疑 似 ク ラ ス グリッドシステム ABテスト
9.
JavaScript Photoshop Illustrator テキストなので ・修正が簡単 ・ファイルサイズが小さい …etc CSS
10.
CSS のコード量が 肥大化している
11.
肥大化 あるある
12.
書き換えているのに 画面が変わらない! 肥大化 あるある
13.
セレクタ名が決められない! 肥大化 あるある
14.
というか、前のセレクタ名直したい! 肥大化 あるある
15.
(修正後)そこじゃない! 肥大化 あるある
16.
もう・・・無理・・・ 肥大化 あるある
17.
そうなる前に
18.
CSS の基本を理解しよう! 設計の考え方を学ぼう!
19.
第1歩 最近の CSS について 第2歩 CSS
の基本をおさらいしよう 第3歩 CSS の設計について 本日のアジェンダ
20.
基本ルール① カスケーディング
21.
カスケーディング .entry-title { color: red; } .entry-title
{ color: blue; } こちらのルールが適用 CSS
22.
カスケーディング .large { font-size: 32px; } .small
{ font-size: 14px; } <h1 class=“small large”>タイトル</h1> こちらのルールが適用 CSS HTML
23.
基本ルール② 詳細度
24.
詳細度 詳細度 セレクタ !important インライン記述 IDセレクタ クラスセレクタ 属性セレクタ・疑似クラス 要素セレクタ・疑似要素 ユニバーサルセレクタ 高い 低い
25.
!important h1 { color: red
!important; } h1 { color: blue; } <h1 class=“entry-title”>title</h1> CSS HTML こちらのルールが適用
26.
インライン記述 h1 { color: blue; } <h1
style=“color: green”>title</h1> CSS HTML こちらのルールが適用
27.
IDセレクタ #head{ color: yellow; } .entry-title { color:
red; } <h1 id=“head” class=“entry-title”>title</h1> CSS HTML こちらのルールが適用
28.
クラスセレクタ .entry-title { color: red; } h1
{ color: blue; } <h1 class=“entry-title”>title</h1> CSS HTML こちらのルールが適用
29.
属性セレクタ a[title=“maru”] { color: red; } a
{ color: blue; } <a title=“maru” href=“#”>link</a> CSS HTML こちらのルールが適用
30.
疑似クラス li:first-child { color: red; } li
{ color: blue; } <ul> <li>list-1<li> <li>list-2<li> </ul> CSS HTML こちらのルールが適用
31.
要素セレクタ h1 { color: red; } *
{ color: blue; } <h1 class=“entry-title”>title</h1> CSS HTML こちらのルールが適用
32.
ユニバーサルセレクタ * { color: gray; } CSS すべての要素にマッチするセレクタ どのセレクタよりも優先度は低い
33.
ただし
34.
セレクタが複数ある場合 div h1.entry-title { color:
red; } .primary .entry-title { color: green; } .entry-title { color: blue; } <div class=“primary”> <h1 class=“entry-title”>title</h1> </div> CSS HTML
35.
セレクタが複数ある場合 div h1.entry-title { color:
red; } .primary .entry-title { color: green; } .entry-title { color: blue; } CSS こちらのルールが適用 ・同じ詳細度の場合は1つのクラスセレクタより2つのクラスセレクタが優先 ・詳細度の低いセレクタがいくらあっても詳細度の高いセレクタが優先
36.
おさらいしよ〜 写真素材ぱくたそ https://www.pakutaso.com
37.
文字は何色? div h1.entry-title { color:
red; } div .entry-title { color: green; } .entry-title { color: blue; } CSS <div class=“primary”> <h1 class=“entry-title”>title</h1> </div> HTML
38.
文字は何色? .primary .entry-title { color:
red; } div.primary h1 { color: green; } .entry-title { color: blue; } CSS <div class=“primary”> <h1 class=“entry-title”>title</h1> </div> HTML
39.
文字は何色? .primary h1.entry-title { color:
red; } div.primary .entry-title { color: green; } .primary .entry-title { color: blue; } CSS <div class=“primary”> <h1 class=“entry-title”>title</h1> </div> HTML
40.
第1歩 最近の CSS について 第2歩 CSS
の基本をおさらいしよう 第3歩 CSS の設計について 本日のアジェンダ
41.
CSSの設計について
42.
代表的な CSS 設計手法(考え方)紹介 自分にあった手法を考える この後の流れ
43.
OOCSS BEM 代表的なCSS設計手法
44.
オブジェクト指向の概念を取り入れ 元・米Yahoo!のニコール・サリバンによって考案 OOCSSとは 参考) https://github.com/stubbornella/oocss
45.
構造と装飾の分離 コンテナーとコンテンツの分離 OOCSSの原則
46.
構造と装飾の分離
47.
OOCSS ぽいサイトのコードを確認してみる .btn { position:
relative; display: inline-block; padding: 6px 12px; font-size: 13px; font-weight: bold; line-height: 20px; color: #333; white-space: nowrap; vertical-align: middle; cursor: pointer; background-color: #eee; background-image: linear-gradient(#fcfcfc, #eee); border: 1px solid #d5d5d5; border-radius: 3px; } CSS ボタン(構造)のルールを定義
48.
OOCSS っぽいのサイトのコードを確認してみる .btn-primary { color:
#fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); background-color: #60b044; background-image: linear-gradient(#8add6d, #60b044); border-color: #5ca941 } .btn-danger { color: #900 } .btn-sm { padding: 2px 10px } CSS 装飾のルールを定義文字を白 背景を緑色 文字を赤 余白を変更(小さく) 参考)GitHUB https://github.com/
49.
<a class=“btn”>PUSH</a>HTML 構造(ボタン)のセレクタを指定
50.
<a class=“btn btn-primary”>PUSH</a>HTML 構造(ボタン)のセレクタを指定 装飾のセレクタを指定
51.
<a class=“btn btn-danger”>PUSH</a>HTML 装飾(別)のセレクタを指定
52.
<a class=“btn btn-primary
btn-sm”>PUSH</a>HTML 複数のセレクタを指定 ※色とサイズを別々に定義しているから出来る
53.
コンテナーとコンテンツの分離
54.
場所の依存をなくす #header .btn { -
- - } #sidebar .btn { - - - } #footer .btn { - - - }
55.
OOCSS BEM 代表的なCSS設計手法
56.
命名規則について定められている Block, Element, Modifier
の略 ロシアの Yandex 社によって考案 BEMとは
57.
Block__Element_Modifier BEMの命名規則 Element Modifier Block 構成のルートとなる要素。Element, Modifier への基点。 Block
の子要素。アンダースコア2つでつなぐ。 Block, Element のバリエーションの異なる要素。 アンダースコア1つでつなぐ。 ハイフン2つでつなぐ(MindBEMding)という記方もある(こちらが一般的?)
58.
BEM ぽいサイトのコードを確認してみる .m-btn02 { display:
block; background: #363a3f; border: 1px solid #1a1c1f; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 0.5px rgba(255, 255, 255, 0.1) inset, 0 0 1px rgba(255, 255, 255, 0.4) inset; padding: 11px 13px 10px; line-height: 1; font-weight: normal; text-align: center; border-radius: 3px; font-size: 12px; color: #fff; box-sizing: border-box; } CSS block のルールを定義 Block
59.
BEM ぽいサイトでコードを確認してみる .m-btn02.m-btn02__icon { height:
1em; display: inline-block; margin-right: 7px; } .m-btn02.m-btn02--inline { display: inline-block; } .m-btn02.m-btn02--color-orange { background: #ff3c00; border-color: #ef3300; } CSS Element, Modifier のルールを定義 Element Modifier Modifier 参考)comico http://www.comico.jp/
60.
<a class=“m-btn02”>PUSH</a>HTML Blockのセレクタを指定
61.
<a class=“m-btn02 m-btn02--inline”>PUSH</a>HTML Block--Modifire
のセレクタを指定
62.
<a class=“m-btn02 m-btn02--inline
m-btn02--color-orange”>PUSH</a>HTML Block--Modifire のセレクタをさらに指定
63.
その他の手法
64.
OOCSSをベースに作成された 元・米Yahoo!の ジョナサン・スヌーク によって考案 SMACSS
65.
いろいろ考え方を参考に 自分にあった手法を考える
66.
名前はなるべく省略しない セレクタにその要素が必要か一旦考える セレクタにその階層が必要か一旦考える コピーするときはコンポーネント設計を一旦考える 私的に行っていること(まとめ)
67.
ご清聴ありがとうございました! 写真AC http://www.photo-ac.com/