Suche senden
Hochladen
css基本。
•
Als PPTX, PDF herunterladen
•
0 gefällt mir
•
1,142 views
W
web12
Folgen
Melden
Teilen
Melden
Teilen
1 von 28
Jetzt herunterladen
Empfohlen
先日開催した勉強会のスライドです
CSS設計のお勉強
CSS設計のお勉強
MarlboroLand
2019/11/1の勉強会で発表したものです。
SMACSS入門
SMACSS入門
iPride Co., Ltd.
CSS設計についてまとめた資料です。 本資料の構成は以下の通りです。 はじめに CSS設計準備 ・ ブラウザに対する理解 ・ normalize.css / reset CSS ・ 新しいリセット用CSSのご紹介 私的CSS設計における ベストプラクティス - コンパイル言語について
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
takumaro web
社内LT。超ライトな内容ですが、CSS設計の話をしてます。
モダンCSS設計と BEMという開発手法
モダンCSS設計と BEMという開発手法
Kenji Karahashi
CSS設計に関わるあれこれ。 基本〜実践的な内容です。 OOCSS, BEM, SMACSSとかも出てきます。
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
新規サイト制作におけるフロントエンドの環境を統一化しようと試みて作ってみましたー
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
下記勉強会の発表資料です。 --------------------------------------------------------- 使いたくなる UI をつくる! フロントエンド 勉強会 : ATND http://atnd.org/events/42371 ---------------------------------------------------------
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
WDF.Vol.8で話したCSSについてのスライドです。 HTMLの見た目を制御するCSS。 CSS3やsassなど技術的な話題を目にすることは多いですが その運用方法について多くは語られていません。 大規模サイトを大人数で制作する状況でCSSはどうあるべきか。 DMM.comという巨大サイトの運用を通じて得た経験を話したいと思います。
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
Empfohlen
先日開催した勉強会のスライドです
CSS設計のお勉強
CSS設計のお勉強
MarlboroLand
2019/11/1の勉強会で発表したものです。
SMACSS入門
SMACSS入門
iPride Co., Ltd.
CSS設計についてまとめた資料です。 本資料の構成は以下の通りです。 はじめに CSS設計準備 ・ ブラウザに対する理解 ・ normalize.css / reset CSS ・ 新しいリセット用CSSのご紹介 私的CSS設計における ベストプラクティス - コンパイル言語について
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
takumaro web
社内LT。超ライトな内容ですが、CSS設計の話をしてます。
モダンCSS設計と BEMという開発手法
モダンCSS設計と BEMという開発手法
Kenji Karahashi
CSS設計に関わるあれこれ。 基本〜実践的な内容です。 OOCSS, BEM, SMACSSとかも出てきます。
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
新規サイト制作におけるフロントエンドの環境を統一化しようと試みて作ってみましたー
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
下記勉強会の発表資料です。 --------------------------------------------------------- 使いたくなる UI をつくる! フロントエンド 勉強会 : ATND http://atnd.org/events/42371 ---------------------------------------------------------
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
WDF.Vol.8で話したCSSについてのスライドです。 HTMLの見た目を制御するCSS。 CSS3やsassなど技術的な話題を目にすることは多いですが その運用方法について多くは語られていません。 大規模サイトを大人数で制作する状況でCSSはどうあるべきか。 DMM.comという巨大サイトの運用を通じて得た経験を話したいと思います。
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
2015年7月29日 松戸WordPress部勉強会スライド
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
実務でよく使う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ハックするワザ
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
2012.06.30 CSS Nite LP, Disk 23 こもり資料
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
11/18イベント登壇資料です。
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
2016年5月13日 CodeGrid 四周年記念パーティーでの「ヒューマンリーダブルな CSS 記述法(異次元編、α版)」の資料です。大規模な運用でも、CSSをヒューマンリーダブルに保つ方法について、その試みを提案しました。スライド中のデモは https://github.com/storywriter/HRCSS で公開しています。
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
第45回 WordBench 大阪での発表資料です。 あとがき:http://www.torounit.com/blog/2015/09/15/2088/
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
2014/09/17に話した内容のスライド。 Google Slideから移動
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
2014/03/29 WordBench東京 春のデザイナー祭り!のスライド
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
オブジェクト指向のCSSの話とか、smacssとbemの話とか、社内勉強会で好き勝手にしゃべってみました
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
Yumi uniq Ishizaki
http://html555.jp/2012/04/25/cording-speed-up/
コーディングが上達するコツ
コーディングが上達するコツ
evol-ni
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
Introduction of CSS Validator with an Idea of a E2E Testing Automation Platform.
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
HTML5のマークアップの特徴を一言で表すとすれば「セマンティクス」。それ故に、HTML5では文脈に合わせてマークアップしなければいけません。もはや、マークアップは単純作業ではなくクリエイティブなものになっているのです。マークアップにも心得と作法がよりいっそう重要になってきています。本セッションでは、HTML5仕様ではマークアップに何を求めているのか(心得)、そして、我々はどのようにマークアップをすべきか(作法)、について具体的に解説します。
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
2105/08/30 Back to Basics
UAスタイルシートと リセットCSS
UAスタイルシートと リセットCSS
知己 久保
10月4日に大阪で開催された「Co:Labo NambaJelly」にて登壇し、HTMLとCSSがどう変わったのか?や、この勉強会についてご紹介しました。 [ 勉強会詳細: ] ( http://r360studio.com/coworklabo/ )
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
最近実務で実戦投入したフロント技術について、導入した際のメリット・デメリットを記しました。 ちなみにその実務というのは、会社のプロダクト「LIGBLOG(liginc.co.jp)」のリニューアルです。 第5回HTML5minutes登壇時の資料です。
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
MTDDC Tokyo 2015で話した内容です。 MTのデモでは、モジュールをダブルクリックするとHTMLやCSSの編集エリアが表示される。 HTML, CSSの編集エリアは、Emmetも利用できるようにしています。 保存すると、Data APを利用して記事を編集・保存し、再構築まで行うようになっています。 ただ実際に使うのは難しいかも。
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
知己 久保
共有用。
Webコーディングの基本+α
Webコーディングの基本+α
takapiya
Weitere ähnliche Inhalte
Was ist angesagt?
2015年7月29日 松戸WordPress部勉強会スライド
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
実務でよく使う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ハックするワザ
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
2012.06.30 CSS Nite LP, Disk 23 こもり資料
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
11/18イベント登壇資料です。
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
2016年5月13日 CodeGrid 四周年記念パーティーでの「ヒューマンリーダブルな CSS 記述法(異次元編、α版)」の資料です。大規模な運用でも、CSSをヒューマンリーダブルに保つ方法について、その試みを提案しました。スライド中のデモは https://github.com/storywriter/HRCSS で公開しています。
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
第45回 WordBench 大阪での発表資料です。 あとがき:http://www.torounit.com/blog/2015/09/15/2088/
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
2014/09/17に話した内容のスライド。 Google Slideから移動
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
2014/03/29 WordBench東京 春のデザイナー祭り!のスライド
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
オブジェクト指向のCSSの話とか、smacssとbemの話とか、社内勉強会で好き勝手にしゃべってみました
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
Yumi uniq Ishizaki
http://html555.jp/2012/04/25/cording-speed-up/
コーディングが上達するコツ
コーディングが上達するコツ
evol-ni
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
Introduction of CSS Validator with an Idea of a E2E Testing Automation Platform.
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
HTML5のマークアップの特徴を一言で表すとすれば「セマンティクス」。それ故に、HTML5では文脈に合わせてマークアップしなければいけません。もはや、マークアップは単純作業ではなくクリエイティブなものになっているのです。マークアップにも心得と作法がよりいっそう重要になってきています。本セッションでは、HTML5仕様ではマークアップに何を求めているのか(心得)、そして、我々はどのようにマークアップをすべきか(作法)、について具体的に解説します。
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
2105/08/30 Back to Basics
UAスタイルシートと リセットCSS
UAスタイルシートと リセットCSS
知己 久保
10月4日に大阪で開催された「Co:Labo NambaJelly」にて登壇し、HTMLとCSSがどう変わったのか?や、この勉強会についてご紹介しました。 [ 勉強会詳細: ] ( http://r360studio.com/coworklabo/ )
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
最近実務で実戦投入したフロント技術について、導入した際のメリット・デメリットを記しました。 ちなみにその実務というのは、会社のプロダクト「LIGBLOG(liginc.co.jp)」のリニューアルです。 第5回HTML5minutes登壇時の資料です。
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
MTDDC Tokyo 2015で話した内容です。 MTのデモでは、モジュールをダブルクリックするとHTMLやCSSの編集エリアが表示される。 HTML, CSSの編集エリアは、Emmetも利用できるようにしています。 保存すると、Data APを利用して記事を編集・保存し、再構築まで行うようになっています。 ただ実際に使うのは難しいかも。
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
知己 久保
共有用。
Webコーディングの基本+α
Webコーディングの基本+α
takapiya
Was ist angesagt?
(20)
CSS の歩き方
CSS の歩き方
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
コーディングが上達するコツ
コーディングが上達するコツ
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
UAスタイルシートと リセットCSS
UAスタイルシートと リセットCSS
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Webコーディングの基本+α
Webコーディングの基本+α
css基本。
1.
CSS基本。
2.
CSSとは?
3.
Cascading Style Sheetsとは?WEBサイトのレイアウトやデザインを指定する。HTMLは『構造言語』CSSは『表現言語』
4.
CSSを使うメリット1.高度で柔軟なデザイン
5.
CSSを使うメリット2.デザインの統一1つのCSSファイルがあればHTMLファイルがいくつあってもページのデザインをそろえることができます。
6.
CSSを使うメリット3.デザインの切り替え1つのCSSファイルでデザインを統一しておけばCSSを修正するだけで複数のページの見栄えを一度に変えられます。HTMLを1ページずつ修正する手間は要りません。
7.
CSSの文法
8.
CSSの基本的な記述方法
9.
CSSの基本的な記述方法2
10.
ほかにもクラスでデザインスタイルを指定。IDでデザインスタイルを指定。が、ありますが
11.
今日は省略。
12.
では次。
13.
CSSの読み込み方
14.
1.HTML内にCSSを組み込む。
15.
2.CSSファイルを読み込む。
16.
以上CSS基本。でした。
17.
ここでちょこっとおさらい。
18.
要素、属性といえば?
19.
HTML
20.
セレクタ、プロパティといえば?
21.
CSS
22.
構造言語は?
23.
HTML
24.
表現言語は?
25.
CSS
26.
しつこいですが
27.
骨組みはHTML装飾はCSSですよーー。
28.
お疲れ様でした。
Jetzt herunterladen