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
77
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
330
React Nativeと半年間戦ってわかったコト / What I learned after fighting React Native for half a year
uutarou10
1
230
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
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
Click-free releases & the making of a CLI app
oheyadam
2
120
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
Better Code Design in PHP
afilina
PRO
0
130
Amazon Qを使ってIaCを触ろう!
maruto
0
410
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
470
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
900
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.1k
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
Remix on Hono on Cloudflare Workers
yusukebe
1
290
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
327
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
Making the Leap to Tech Lead
cromwellryan
133
8.9k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Site-Speed That Sticks
csswizardry
0
25
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
89
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Building Adaptive Systems
keathley
38
2.3k
Embracing the Ebb and Flow
colly
84
4.5k
Side Projects
sachag
452
42k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
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