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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Kota Nonaka
July 06, 2018
Programming
2
86
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
410
React Nativeと半年間戦ってわかったコト / What I learned after fighting React Native for half a year
uutarou10
1
260
TypeScript+Firebaseで作るサーバーレスアプリケーション/Create serverless app with TypeScript + Firebase
uutarou10
1
1.2k
GatsbyでPWAやってみた / Tried PWA using Gatsby
uutarou10
1
430
初心者による初心者のためのKubernetesハンズオン
uutarou10
4
3.3k
Other Decks in Programming
See All in Programming
Basic Architectures
denyspoltorak
0
660
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
izumin5210
7
2.3k
Smart Handoff/Pickup ガイド - Claude Code セッション管理
yukiigarashi
0
130
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
bengo4com
1
230
AIによる高速開発をどう制御するか? ガードレール設置で開発速度と品質を両立させたチームの事例
tonkotsuboy_com
7
2k
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
tasshi
0
200
登壇資料を作る時に意識していること #登壇資料_findy
konifar
4
970
CSC307 Lecture 04
javiergs
PRO
0
660
Unicodeどうしてる? PHPから見たUnicode対応と他言語での対応についてのお伺い
youkidearitai
PRO
1
1.1k
ぼくの開発環境2026
yuzneri
0
100
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
170
AIエージェント、”どう作るか”で差は出るか? / AI Agents: Does the "How" Make a Difference?
rkaga
4
2k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.3k
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
420
Building an army of robots
kneath
306
46k
GraphQLとの向き合い方2022年版
quramy
50
14k
A Tale of Four Properties
chriscoyier
162
24k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
72
Code Reviewing Like a Champion
maltzj
527
40k
Practical Orchestrator
shlominoach
191
11k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
14k
Visualization
eitanlees
150
17k
Documentation Writing (for coders)
carmenintech
77
5.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