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
82
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
380
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.2k
GatsbyでPWAやってみた / Tried PWA using Gatsby
uutarou10
1
420
初心者による初心者のためのKubernetesハンズオン
uutarou10
4
3.2k
Other Decks in Programming
See All in Programming
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
660
PipeCDのプラグイン化で目指すところ
warashi
1
280
XP, Testing and ninja testing
m_seki
3
250
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Goで作る、開発・CI環境
sin392
0
230
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
We Have a Design System, Now What?
morganepeng
53
7.7k
Typedesign – Prime Four
hannesfritz
42
2.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Code Reviewing Like a Champion
maltzj
524
40k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The World Runs on Bad Software
bkeepers
PRO
69
11k
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