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
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
210
VR HMDとしてのVision Pro+ゲーム開発について
yasei_no_otoko
0
100
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
480
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
140
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
260
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.1k
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
920
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.2k
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.6k
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
140
Featured
See All Featured
For a Future-Friendly Web
brad_frost
175
9.4k
Unsuck your backbone
ammeep
668
57k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
BBQ
matthewcrist
85
9.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Producing Creativity
orderedlist
PRO
341
39k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
The Art of Programming - Codeland 2020
erikaheidi
51
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
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