Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
CSS / Properties / color, font, text
Search
Masateru YOSHIMURA
June 02, 2020
Technology
2k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
CSS / Properties / color, font, text
よく使うCSSプロパティ:文字と色
Masateru YOSHIMURA
June 02, 2020
Transcript
7 slides
Α͘͏$44ϓϩύςΟɿจࣈͱ৭
ల։લ ల։ޙ ༻ྫ จࣈͷ৭ c color c#fff → color :
#fff; ΩʔϫʔυʹΑΔࢦఆ͠ͳ͍ɻ ඍົͳ৭͕Ͱ͖ͳ͍ͨΊɻ എܠͷ৭ bg background bg#fff → background : #fff; ৭ จࣈͱഎܠͷ৭ͷόϥϯεʹؾΛΖ͏ɻ എܠ͕Ͱจࣈ͕⒎Gʢ·ͨഎܠ͕⒎GͰจࣈ͕ʣʹ͢Δͱίϯτϥετ͕ڧ͗ͯ͢ʹ௧͍ɻ ͜ͷεϥΠυͷഎܠɺࠇʹݟ͑Δ͕࣮ʮೱ͍άϨʔʯʹͯ͋͠Δɻ
(PPHMFͰΧϥʔϐοΧʔͱݕࡧ Λίϐʔ͢Δ ͜͜Λૢ࡞ͯ͠ɺ ৭
ల։લ ల։ޙ ༻ྫ จࣈͷαΠζ fz font-size fz80 → font-size :
80px; QYҎ֎ʹSFNͳͲͷ୯Ґར༻Ͱ͖Δɻ ߦͷߴ͞ lh line-height lh1.8 → line-height : 1.8; ༰ʹԠͯ͡ʙͰઃఆ͢Δɻ ˞ඞͣઃఆ͢ΔΑ͏ʹ͠Α͏ จࣈ
ల։લ ల։ޙ ༻ྫ จࣈͷछྨ ff font-family ff → font-family :
serif; ffss → font-family : sans-serif; ϑΥϯτ໊ͰͷࢦఆͰ͖Δɻ จࣈͷଠ͞ fw font-weight fw700 → font-weight : 700; fwb → font-weight : bold; ·ͨΩʔϫʔυͰઃఆ͢ΔɻͲͪΒͰΑ͍ɻ จࣈ GPOUGBNJMZ۩ମతͳϑΥϯτ໊ΛϦετͯ͠ࢦఆ͕Ͱ͖Δɻྫ͑ɺ GPOUGBNJMZ)FMWFUJDB/FVF "SJBM )JSBHJOP,BLV(PUIJD1SP/ )JSBHJOP4BOT .FJSZP TBOTTFSJG ઌʹॻ͍ͯ͋Δͷ͕༏ઌͯ͠ࢦఆ͞ΕΔɻ
ల։લ ల։ޙ ༻ྫ จࣈἧ͑ ta text-align tac → text-align :
center; tar → text-align : right; ࣈؒ ls letter-spacing ls5 → letter-spacing : 5px; จࣈ
͜͏͍ͬͨ·ͱΊͷγʔτΛ ࣗͰ࡞Ͱ͖ΔΑ͏ʹͳΖ͏ ਓʹ࡞ͬͯΒ͍ͬͯΔ͏ֶͪͿ͕࢟ड͚ɻ ड͚Ͱ͍Δͱɺͳ͔ͳ͔֮͑Δ͜ͱ͕Ͱ͖·ͤΜɻ खॻ͖ͰेͳͷͰɺࣗͷϊʔτΛ࡞Ζ͏ɻ
More Decks by Masateru YOSHIMURA
See All by Masateru YOSHIMURA
Digital Design 2022-02
mathatelle
0
400
Digital Design 2022-01
mathatelle
0
290
Yoshimura Lab. 2022
mathatelle
0
1.4k
create-website-html-2021
mathatelle
0
180
Multiple pages
mathatelle
0
730
How to design the individual page
mathatelle
1
130
CodePen: Making your portfolio 2021
mathatelle
0
170
single page
mathatelle
0
900
How to optimize images for Better Web Design
mathatelle
0
2.2k
Other Decks in Technology
See All in Technology
異夢同船〜異なる夢でも同じ船でなんとかする〜
fortegp05
0
230
大江戸Ruby会議でデータベース クライアントの話をするのは 間違っているだろうか
yahonda
1
120
Context != Context: One window, many lifecycles (AI Native DevCon, Nov 2026)
birgitta410
0
140
Datadog の権限統制 〜Org 統合に向けて調べた注意点 / JDDUG-Meetup_24
visional_engineering_and_design
1
130
変更差分を読むために環境を整備しよう
pipepasta
1
180
「AIチャットからもできないの?」と言われたら ~業務アプリをMCP対応するときの認証・認可の勘所
oidfj
0
330
業務でAWSをあまり使っていない私が、AWSへのモチベを保つ方法
smt7174
0
200
長い仕事を任せる (Workflows、クラウドセッション、Kiro Web) | 目指せ Kiro マスター 10
inariku
PRO
3
190
Claude Codeで作ったアプリを安全に公開する/Built with Claude Japan 2026
yoshidashingo
0
250
アラートを見直していたら営業組織への理解にちょっとだけ繋がった話
z63d
1
200
常時稼働エージェントの作り方(Claude公式ブログを資料化)
minorun365
PRO
0
1.1k
AI対話型分析を作成し、リリースするまでの話 / The Road to Release: Buiding AI Conversational Analytics
yappli_developers
0
120
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
304
22k
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
4
4.4k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
530
Site-Speed That Sticks
csswizardry
13
1.6k
Ethics towards AI in product and experience design
skipperchong
2
460
Side Projects
sachag
456
43k
Java REST API Framework Comparison - PWX 2021
mraible
34
9.8k
Design in an AI World
tapps
1
390
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
2
3.9k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
350
Building Flexible Design Systems
yeseniaperezcruz
330
41k
Being A Developer After 40
akosma
PRO
92
590k