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
75
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
270
React Nativeと半年間戦ってわかったコト / What I learned after fighting React Native for half a year
uutarou10
1
220
TypeScript+Firebaseで作るサーバーレスアプリケーション/Create serverless app with TypeScript + Firebase
uutarou10
1
1k
GatsbyでPWAやってみた / Tried PWA using Gatsby
uutarou10
1
390
初心者による初心者のためのKubernetesハンズオン
uutarou10
4
3.1k
Other Decks in Programming
See All in Programming
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
ゆるい個人開発のススメ
kuroppe1819
10
990
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
Elm 0.19.0 Changes
bkuhlmann
0
490
What We Can Learn From OSS
inouehi
0
420
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
700
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
200
Goのmultiple errorsについて (2024年4月版)
syumai
3
860
SIMD Parallel Programming with the Vector API
josepaumard
0
170
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
200
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Writing Fast Ruby
sferik
621
60k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Gamification - CAS2011
davidbonilla
76
4.6k
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