Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS ド入門ハンズオン/CSS beginner's hands-on
Search
Kota Nonaka
July 06, 2018
Programming
2
78
CSS ド入門ハンズオン/CSS beginner's hands-on
CSSを初めて書く人向けのハンズオン資料です。
Kota Nonaka
July 06, 2018
Tweet
Share
More Decks by Kota Nonaka
See All by Kota Nonaka
このあとからできる アクセシビリティ向上 / Accessibility improvements that can be made after this
uutarou10
0
360
React Nativeと半年間戦ってわかったコト / What I learned after fighting React Native for half a year
uutarou10
1
240
TypeScript+Firebaseで作るサーバーレスアプリケーション/Create serverless app with TypeScript + Firebase
uutarou10
1
1.1k
GatsbyでPWAやってみた / Tried PWA using Gatsby
uutarou10
1
410
初心者による初心者のためのKubernetesハンズオン
uutarou10
4
3.2k
Other Decks in Programming
See All in Programming
The Nature of Complexity in John Ousterhout’s Philosophy of Software Design
philipschwarz
PRO
0
150
タイムゾーンの奥地は思ったよりも闇深いかもしれない
suguruooki
1
790
ComposeでのPicture in Picture
takathemax
0
130
メモリウォールを超えて:キャッシュメモリ技術の進歩
kawayu
0
1.9k
Thank you <💅>, What's the Next?
ahoxa
1
570
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
1.1k
Laravel × Clean Architecture
bumptakayuki
PRO
0
130
Exit 8 for SwiftUI
ojun9
0
150
インプロセスQAにおいて大事にしていること / In-process QA Meetup
medley
0
100
カオスに立ち向かう小規模チームの装備の選択〜フルスタックTSという装備の強み _ 弱み〜/Choosing equipment for a small team facing chaos ~ Strengths and weaknesses of full-stack TS~
bitkey
1
120
Jakarta EE Meets AI
ivargrimstad
0
550
PHP で学ぶ OAuth 入門
azuki
1
220
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Adopting Sorbet at Scale
ufuk
76
9.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Rails Girls Zürich Keynote
gr2m
94
13k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
810
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Speed Design
sergeychernyshev
29
920
How GitHub (no longer) Works
holman
314
140k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Transcript
CSS ド入門ハンズオン のなか
そろそろ飽きたよね?
CSSを使うと装飾できる!
嬉しい!
対象者 • CSSマジでやったことないひと • それ以外の人には何の役にも立ちません 好きなYouTuberの動画でもみて時間潰しててください
CSSの適用方法 1. <style>タグを用いる方法 2. style属性を用いる方法 3. <link>タグを用いる方法 今日は触れないので自分でググってね
CSSの基本文法 セレクタ { プロパティ: 値; } •セレクタ どの要素に対して適用するか •プロパティ 何を変化させるか
•値 どうするか
CSSの基本文法 body { background-color: gray; } •セレクタ bodyの •プロパティ background-color(背景色)を
•値 gray(グレー)にする
None
やってみよう
https://bit.ly/2KDiuGQ
https://bit.ly/2KDiuGQ
Task1 背景色を変える • 背景はbackground-colorプロパティを用いて変更できる • 値には色を指定する https://bit.ly/2KDiuGQ
Task2 文字色を変える • 文字色はcolorプロパティを用いて変更できる • 値には色を指定する https://bit.ly/2KDiuGQ
Task3 スタイルを上書きする • スタイルは上から順番に読み込まれる • 同じプロパティを変えると上書きされる • 白は「#FFFFFF」でもいいし「white」とも指定できる https://bit.ly/2KDiuGQ
Task4 枠線をつける • (と、言いつつ今回は枠線の指定はしておきました) • 適切なセレクタを指定してください • クラスを指定したいときは「.クラス名」と指定する https://bit.ly/2KDiuGQ
Task5 余白を調整する • 余白はmarginというプロパティを使うと変更できる • 下側だけ変えたいときにはmargin-bottomというプロパティも 使える https://bit.ly/2KDiuGQ
Task6 画像の表示サイズを変える • 画像などの要素のサイズはwidthとheightを使うことで変更できる • 値には数字と単位を指定する(e.g. 300px) https://bit.ly/2KDiuGQ
Ϋι΄Ͳηϯε͕Ͷ͐
おわりに • 基本はセレクタを指定してそれに対するプロパティと値の組合せを 書いていく事で装飾していく • 使いこなすとアニメーションなどもCSSだけで実装する事ができる • 今日の答えは以下 https://bit.ly/2KRBX2F