Submit Search
Upload
Webの勉強会#8
•
0 likes
•
123 views
M
MarlboroLand
Follow
最近よく使われるようになったCSSのプロパティについて説明
Read less
Read more
Technology
Report
Share
Report
Share
1 of 71
Download now
Download to read offline
Recommended
re:Invent 社内共有会資料(サーバーワークス)
re:Invent 社内共有会資料(サーバーワークス)
Aya Komuro
Uncem PSR - Le misure per Comuni e Unioni montane - Biella 7 giungo 2016
Uncem PSR - Le misure per Comuni e Unioni montane - Biella 7 giungo 2016
Clara Crosa Galant
cv kkd
cv kkd
Kamlesh Dhawal
Unit 6 The Biosphere
Unit 6 The Biosphere
JoseAngelSotocaPulpon
Tema 7 España y la Unión Europea
Tema 7 España y la Unión Europea
JoseAngelSotocaPulpon
Tema 5 La Población en España y en Europa
Tema 5 La Población en España y en Europa
JoseAngelSotocaPulpon
контрольна робота №1 (зошит)
контрольна робота №1 (зошит)
Iren50
Discourse as dialogue
Discourse as dialogue
mhdhk
Recommended
re:Invent 社内共有会資料(サーバーワークス)
re:Invent 社内共有会資料(サーバーワークス)
Aya Komuro
Uncem PSR - Le misure per Comuni e Unioni montane - Biella 7 giungo 2016
Uncem PSR - Le misure per Comuni e Unioni montane - Biella 7 giungo 2016
Clara Crosa Galant
cv kkd
cv kkd
Kamlesh Dhawal
Unit 6 The Biosphere
Unit 6 The Biosphere
JoseAngelSotocaPulpon
Tema 7 España y la Unión Europea
Tema 7 España y la Unión Europea
JoseAngelSotocaPulpon
Tema 5 La Población en España y en Europa
Tema 5 La Población en España y en Europa
JoseAngelSotocaPulpon
контрольна робота №1 (зошит)
контрольна робота №1 (зошит)
Iren50
Discourse as dialogue
Discourse as dialogue
mhdhk
Unit 1 The Human Body and Interaction
Unit 1 The Human Body and Interaction
JoseAngelSotocaPulpon
Heat interface units brochure - Docherty Group
Heat interface units brochure - Docherty Group
Docherty Group
Tema 3 Los Inicios de la Edad Contemporánea
Tema 3 Los Inicios de la Edad Contemporánea
JoseAngelSotocaPulpon
Coworking en Argentina encuesta 2015 - el plan C
Coworking en Argentina encuesta 2015 - el plan C
Marcela Basch
Best visa consultants in chandigarh
Best visa consultants in chandigarh
Travelfizz
Tema 6 La Organización de España
Tema 6 La Organización de España
JoseAngelSotocaPulpon
在开始交易二元期权前,您需要懂得的一切
在开始交易二元期权前,您需要懂得的一切
888BinarySignals
Я - патріот України
Я - патріот України
Елена Оносова
Demographics of Substance Abuse
Demographics of Substance Abuse
Get Real Recovery
нагороди
нагороди
Елена Оносова
Semiótica de la arquitectura
Semiótica de la arquitectura
luisfelipedeljesus ALVAREZvelasquez
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
Css3講座
Css3講座
SeiyaH
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
Basic CSS Introduction
Basic CSS Introduction
Minoru Hayakawa
やさしいSassり方
やさしいSassり方
祐磨 堀
Sass Hello World
Sass Hello World
Kazuma Kimura
Sass 超入門
Sass 超入門
Michinari Odajima
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
lyca chigyo
LESSについて
LESSについて
okaSlide80
a-blog cms Training Camp 2014 Autumn「来年作るべきCMSのテーマとは?」
a-blog cms Training Camp 2014 Autumn「来年作るべきCMSのテーマとは?」
Seiko Kuchida
More Related Content
Viewers also liked
Unit 1 The Human Body and Interaction
Unit 1 The Human Body and Interaction
JoseAngelSotocaPulpon
Heat interface units brochure - Docherty Group
Heat interface units brochure - Docherty Group
Docherty Group
Tema 3 Los Inicios de la Edad Contemporánea
Tema 3 Los Inicios de la Edad Contemporánea
JoseAngelSotocaPulpon
Coworking en Argentina encuesta 2015 - el plan C
Coworking en Argentina encuesta 2015 - el plan C
Marcela Basch
Best visa consultants in chandigarh
Best visa consultants in chandigarh
Travelfizz
Tema 6 La Organización de España
Tema 6 La Organización de España
JoseAngelSotocaPulpon
在开始交易二元期权前,您需要懂得的一切
在开始交易二元期权前,您需要懂得的一切
888BinarySignals
Я - патріот України
Я - патріот України
Елена Оносова
Demographics of Substance Abuse
Demographics of Substance Abuse
Get Real Recovery
нагороди
нагороди
Елена Оносова
Semiótica de la arquitectura
Semiótica de la arquitectura
luisfelipedeljesus ALVAREZvelasquez
Viewers also liked
(11)
Unit 1 The Human Body and Interaction
Unit 1 The Human Body and Interaction
Heat interface units brochure - Docherty Group
Heat interface units brochure - Docherty Group
Tema 3 Los Inicios de la Edad Contemporánea
Tema 3 Los Inicios de la Edad Contemporánea
Coworking en Argentina encuesta 2015 - el plan C
Coworking en Argentina encuesta 2015 - el plan C
Best visa consultants in chandigarh
Best visa consultants in chandigarh
Tema 6 La Organización de España
Tema 6 La Organización de España
在开始交易二元期权前,您需要懂得的一切
在开始交易二元期权前,您需要懂得的一切
Я - патріот України
Я - патріот України
Demographics of Substance Abuse
Demographics of Substance Abuse
нагороди
нагороди
Semiótica de la arquitectura
Semiótica de la arquitectura
Similar to Webの勉強会#8
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
Css3講座
Css3講座
SeiyaH
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
Basic CSS Introduction
Basic CSS Introduction
Minoru Hayakawa
やさしいSassり方
やさしいSassり方
祐磨 堀
Sass Hello World
Sass Hello World
Kazuma Kimura
Sass 超入門
Sass 超入門
Michinari Odajima
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
lyca chigyo
LESSについて
LESSについて
okaSlide80
a-blog cms Training Camp 2014 Autumn「来年作るべきCMSのテーマとは?」
a-blog cms Training Camp 2014 Autumn「来年作るべきCMSのテーマとは?」
Seiko Kuchida
マークアップ講座 02 CSS
マークアップ講座 02 CSS
eiji sekiya
Enduring CSS
Enduring CSS
Takazudo
シラサギ勉強会1201
シラサギ勉強会1201
okusakazuya
Front end develop environment
Front end develop environment
Ryuto Yasugi
SMACSS入門
SMACSS入門
iPride Co., Ltd.
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
Kei Nakazawa
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
Miho Yamamori
Zero Startup Web 2017 Nov
Zero Startup Web 2017 Nov
Chime LLC
Similar to Webの勉強会#8
(20)
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Css3講座
Css3講座
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Basic CSS Introduction
Basic CSS Introduction
やさしいSassり方
やさしいSassり方
Sass Hello World
Sass Hello World
Sass 超入門
Sass 超入門
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
LESSについて
LESSについて
a-blog cms Training Camp 2014 Autumn「来年作るべきCMSのテーマとは?」
a-blog cms Training Camp 2014 Autumn「来年作るべきCMSのテーマとは?」
マークアップ講座 02 CSS
マークアップ講座 02 CSS
Enduring CSS
Enduring CSS
シラサギ勉強会1201
シラサギ勉強会1201
Front end develop environment
Front end develop environment
SMACSS入門
SMACSS入門
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
Zero Startup Web 2017 Nov
Zero Startup Web 2017 Nov
More from MarlboroLand
Gitの使い方
Gitの使い方
MarlboroLand
web開発環境
web開発環境
MarlboroLand
Webの勉強会#14
Webの勉強会#14
MarlboroLand
Webの勉強会#12
Webの勉強会#12
MarlboroLand
Webの勉強会#11
Webの勉強会#11
MarlboroLand
Webの勉強会#10
Webの勉強会#10
MarlboroLand
Webの勉強会#9
Webの勉強会#9
MarlboroLand
Webの勉強会#6
Webの勉強会#6
MarlboroLand
Webの勉強会#5
Webの勉強会#5
MarlboroLand
初心者向け、プログラムのお話
初心者向け、プログラムのお話
MarlboroLand
Webサイト制作の環境構築(for Windows)
Webサイト制作の環境構築(for Windows)
MarlboroLand
CSS設計のお勉強
CSS設計のお勉強
MarlboroLand
More from MarlboroLand
(12)
Gitの使い方
Gitの使い方
web開発環境
web開発環境
Webの勉強会#14
Webの勉強会#14
Webの勉強会#12
Webの勉強会#12
Webの勉強会#11
Webの勉強会#11
Webの勉強会#10
Webの勉強会#10
Webの勉強会#9
Webの勉強会#9
Webの勉強会#6
Webの勉強会#6
Webの勉強会#5
Webの勉強会#5
初心者向け、プログラムのお話
初心者向け、プログラムのお話
Webサイト制作の環境構築(for Windows)
Webサイト制作の環境構築(for Windows)
CSS設計のお勉強
CSS設計のお勉強
Recently uploaded
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
Recently uploaded
(8)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
Webの勉強会#8
1.
2016/10/7 Ver.1.0 Hirotaka Ichimura 1 最近のCSS
2.
使いやすくなったCSS 文字サイズ 横並び アニメーション ブラウザ 2 アジェンダ
3.
01 使いやすくなったCSS 3
4.
4 昔のIEが使われなくなり 過去ブラウザの対応による CSSの適用状況が変わっています 01 使いやすくなったCSS
5.
5 これにより今まで控えてきた CSSのプロパティも 日の目を浴びるようになりました 01 使いやすくなったCSS
6.
6 今回は、その中から 仕事でも使われるようになった CSSのプロパティについて説明 01 使いやすくなったCSS
7.
7 簡単な使い方を 入力してみたいと思います 01 使いやすくなったCSS
8.
8 今まで使えなかったCSSを 積極的に 使っていこう!! 今回の 目的
9.
02 文字サイズ 9
10.
10 今まで文字サイズは PX、%、emが一般的 02 文字サイズ
11.
11 PXは絶対値 %、emは相対値 02 文字サイズ
12.
12 %、emは 親要素に書いた CSSの影響を受ける 02 文字サイズ
13.
13 それを防ぐために html要素を基準とする 「rem」を使う 02 文字サイズ Root emの略
14.
14 さらにhtmlに指定する 文字サイズの 初期値を62.5%にする 02 文字サイズ 10px/16px =0.625
15.
15 これでhtmlの 文字サイズは 10pxが基準となり pxの10分の1が remの値となる 02 文字サイズ ある要素の文字サイズが 16pxのとき1.6rem 22pxのとき2.2rem となる
16.
16 remが効かないブラウザには PXを追加で指定する 02 文字サイズ font-size: 14px; font-size:
1.4rem;
17.
03 横並び 17
18.
18 昔からよく使われている 横並びは float:left; 03 横並び
19.
19 floatの解除に使う clearfixはクラス指定せず 親要素に直接書く 03 横並び
20.
20 03 横並び 親要素:after { clear:both; content:''; display:block; }
21.
21 テーブルの様に使える display:table; display:table-cell; 03 横並び
22.
22 1列で構成される ナビゲーションなんかに最適 03 横並び ナビ1 ナビ2
ナビ3 ナビ4
23.
23 親要素に table-layout:fixed;と 横幅を設定する 03 横並び
24.
24 03 横並び 親要素 { display:
table; table-layout: fixed; width: 100%; }
25.
25 2列には出来ない 03 横並び 注意!
26.
26 横並び専用のプロパティ display: flex; 03 横並び
27.
27 親要素をflexコンテナ 子要素をflexアイテムと呼ぶ 03 横並び
28.
28 justify-contentプロパティで 並び方の調整ができる 03 横並び
29.
29 03 横並び flex-start >
左揃え flex-end > 右揃え center > 中央揃え space-between > 均等の間隔で整列 space-around > 均等の間隔で整列、両端 の余白が半分になる
30.
30 flex-directionプロパティで 並ぶ方向を決める事ができる 03 横並び
31.
31 03 横並び flex-direction:row; >
左から右 flex-direction:row-reverse; > 右から左 flex-direction:column; > 上から下 flex-direction:column-reverse; > 下から上
32.
32 flex-wrapプロパティで 子要素の一行表示、折り返しを 決める事ができる 03 横並び
33.
33 03 横並び flex-wrap:nowrap; >
一行に全部表示 flex-wrap:wrap; > 折り返して表示 flex-wrap:wrap-reverse; > 折り返すが、 wrapの逆で、上へ折り返す
34.
34 高さはデフォルトで 揃うようになっているが align-items: stretch; を指定する 03 横並び
35.
35 上下中央は justify-content: center; align-items: center; を使う 03
横並び
36.
36 03 横並び align-items: center; display:
flex; height: 500px; justify-content: center; width: 500px;
37.
04 アニメーション 37
38.
38 CSSのアニメーション機能は 3種類 04 アニメーション
39.
39 04 アニメーション transition animation transform 1 2 3
40.
40 transitionは 手軽にアニメーションさせる ことができる 04 アニメーション
41.
41 transition-property > 適用するプロパティ名を指定 transition-duration
> 時間 transition-timing-function >変化のタイミング transition-delay > 変化が始まるタイミング 04 アニメーション
42.
42 transitionプロパティは ショートハンドで 一括指定が可能 04 アニメーション
43.
43 親要素 { transition: color
1.0s linear 0.5s; } 子要素:hover { color: red; } 04 アニメーション
44.
44 animationだと ローディングアニメーションが 作れる 04 アニメーション
45.
45 animation-name > アニメーション名の指定 animation-duration
> アニメーションの時間 animation-timing-function > アニメーションのタイ ミング animation-delay > 開始時間 animation-iteration-count > 繰返し回数 animation-direction > 反転再生するかどうか 04 アニメーション
46.
46 animation-nameで 指定した名称に @keyframes 名称で アニメーション時間を%で 区切って指定 04 アニメーション
47.
47 animationプロパティは ショートハンドで 一括指定が可能 04 アニメーション
48.
48 animation-name: anime1; animation-duration: 2s; animation-timing-function:
ease; animation-iteration-count: infinite; animation-direction:alternate; 04 アニメーション
49.
49 @keyframes anime1 { 0%
{ width: 50px; height: 50px; background-color: aqua; } 04 アニメーション 100% { width: 200px; height: 50px; background-color: blue; } }
50.
50 transformは 要素を変形させることができる 04 アニメーション
51.
51 transform関数を指定することで 要素に変形、移動、縮尺、回転、傾斜などの 変形を適用することができる 04 アニメーション
52.
52 詳細についてはコチラ http://www.htmq.com/css3/transform.shtml 04 アニメーション
53.
53 機能が多いので この中から拡大・縮小、回転を 説明 04 アニメーション
54.
54 transform: scale(2.0,2.0); 要素のサイズを縦横2倍にする transform: scale(0.5,0.5); 要素のサイズを縦横半分にする 04
アニメーション
55.
55 transform: rotateY(100deg); 要素をY軸に100度回転する 04 アニメーション
56.
56 組み合わせるとより複雑な アニメーションが可能 04 アニメーション
57.
57 04 アニメーション マウスオーバーすると 画像が拡大 1
58.
58 親要素にボックスのトリミング 子要素にアニメーション指定 hoverに拡大を指定 04 アニメーション
59.
59 .wrapper { height: 225px; overflow:
hidden; width: 300px; .expansion1 { transition: transform 0.5s linear; &:hover { cursor: pointer; transform: scale(1.5, 1.5); } } } 04 アニメーション
60.
60 04 アニメーション マウスオーバーすると 画像が回転 2
61.
61 要素にアニメーション指定 hoverに回転を指定 04 アニメーション
62.
62 .rotate1 { width: 300px; transition:
transform 0.5s linear; &:hover { cursor: pointer; transform: rotateY(180deg); } } 04 アニメーション
63.
05 ブラウザ 63
64.
64 ここら辺のプロパティは ブラウザのバージョンによっては 動かないものがあります 05 ブラウザ
65.
65 StatCounterで ブラウザシェアを調べる 05 ブラウザ
66.
66 Can I useでCSSプロパティの 対応状況を調べる 05
ブラウザ
67.
67 動作はするけど ベンダープレフィックスが必要 05 ブラウザ
68.
68 gulpで自動化する 05 ブラウザ ファイルを見せて説明
69.
06 参考サイト 69
70.
70 • http://scene-live.com/page.php?page=57 • https://ics.media/entry/13117 •
http://11neko.com/css3-transition/ • http://www.htmq.com/css3/animation-direction.shtml • http://www.htmq.com/css3/transform.shtml • http://qiita.com/7968/items/eddfeb4b424d7c2d2d34 • http://gs.statcounter.com/ • https://ics.media/entry/3290 06 参考サイト
71.
71 以上!!
Download now