Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSS

Avatar for 4D Japan 4D Japan
August 01, 2020
Technology
31
0

 CSS

Avatar for 4D Japan

4D Japan

August 01, 2020

More Decks by 4D Japan

See All by 4D Japan
4D 21 R2 R3
Avatar for 4D Japan miyako
0
33
4D 21 LTS
Avatar for 4D Japan miyako
0
18
4D 21
Avatar for 4D Japan miyako
0
47
4D 20 R10
Avatar for 4D Japan miyako
0
50
4D 20 R9
Avatar for 4D Japan miyako
0
41
4D 20 R7 & R8
Avatar for 4D Japan miyako
0
86
Unicodeの話 (2007)
Avatar for 4D Japan miyako
0
54
Unicodeの話 (2008)
Avatar for 4D Japan miyako
0
60
Google Apps Integration (2012)
Avatar for 4D Japan miyako
0
58

Other Decks in Technology

See All in Technology
あけおめLINE 傾向とその対策
Avatar for nasa9084 nasa9084
0
320
ScotSecure West 2026 - Glasgow
Avatar for Ray Bugg raybugg
0
160
2026-09-08 そのJavaモダナイゼーション、AIに丸投げで大丈夫？IBM Bobで変わる品質と効率
Avatar for YutaNonaka yutanonaka
1
180
おい、エージェントを使って終わらせろ
Avatar for nwiizo nwiizo
3
900
AWS DevOps Agent スキルをつかいこなそう / Master AWS DevOps Agent Skills
Avatar for Masanori Yamaguchi kinunori
1
350
Antigravity SDK for the Java Developer
Avatar for Guillaume Laforge glaforge
0
190
Cloudflare Workers 向けアプリを C# で構築する ～WASM Native AOT への道～
Avatar for neno nenonaninu
1
1.4k
人間はどの意思決定を手放せるのか
Avatar for Yoshitaka Kawashima kawasima
15
8.1k
10Xに技術的負債をもたらした「2つの境界の歪み」その構造と解消への営み
Avatar for 10xinc 10xinc
0
2.4k
JSONataとAWS Step Functionsで目指すRuntimelessな世界
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
0
470
Von-Neumann Machines, Dreams & The Futures of IT
Avatar for Uwe Friedrichsen ufried
0
130
Claude Codeを「使うほど育つ」AI秘書にするノウハウ
Avatar for みのるん minorun365
PRO
33
32k

Featured

See All Featured
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
50
10k
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
1k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.4k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
290
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
340
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
600
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
500
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
8k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k

Transcript

  1. 4DϑΥʔϜͱCSS 4D Summit 2020

  2. ໨࣍ • CSSΛ࢖༻͢Δཧ༝ • αϙʔτ͞ΕΔଐੑ/͞Εͳ͍ଐੑ • όΠφϦʔ͔ΒϓϩδΣΫτ΁ • CSSηϨΫλʔ •

    ద༻ͷ༏ઌॱҐ • σβΠϯ্ͷ੍໿ • σϞϯετϨʔγϣϯ

  3. CSSΛ࢖༻͢Δཧ༝

  4. CSSΛ࢖༻͢Δཧ༝ όΠφϦʔ σʔλϕʔε ϓϩδΣΫτ σʔλϕʔε

  5. CSSΛ࢖༻͢Δཧ༝ • ޿͘Ұൠతʹ࢖༻͞Ε͍ͯΔ .button { font-family: Arial; font-size: 12px; color:

    #CCC; } input { Background-color: #333;

  6. CSSΛ࢖༻͢Δཧ༝ • ޿͘Ұൠతʹ࢖༻͞Ε͍ͯΔ • JSON ΦϒδΣΫτه๏ͱۙ ͍ܗࣜΛ͍ͯ͠Δ .button { font-family:

    Arial; font-size: 12px; color: #CCC; } input { Background-color: #333; button: { fontFamily: Arial, fontSize: 12, stroke: #CCC } input: { fill: #333

  7. CSSΛ࢖༻͢Δཧ༝ • ޿͘Ұൠతʹ࢖༻͞Ε͍ͯΔ • JSON ΦϒδΣΫτه๏ͱۙ ͍ܗࣜΛ͍ͯ͠Δ • ඪ४ςΩετܗࣜͰ͋Δ A

  8. αϙʔτ͞ΕΔଐੑɾ αϙʔτ͞Εͳ͍ଐੑ

  9. αϙʔτ͞ΕΔଐੑ 4D CSS borderStyle fill fontFamily fontSize fontStyle fontWeight stroke

    textAlign textDecoration verticalAlign border-style background-color font-family font-size font-style font-weight color text-align text-decoration vertical-align

  10. αϙʔτ͞ΕΔଐੑ 4D CSS borderStyle fill fontFamily fontSize fontStyle fontWeight stroke

    textAlign textDecoration verticalAlign border-style background-color font-family font-size font-style font-weight color text-align text-decoration vertical-align

  11. αϙʔτ͞ΕΔଐੑ

  12. αϙʔτ͞Εͳ͍ଐੑ 1. CSSηϨΫλʔͱͯࣝ͠ผ͞ ΕΔଐੑ type: “…”, class: “…”,

  13. αϙʔτ͞Εͳ͍ଐੑ 1. CSSηϨΫλʔͱͯࣝ͠ผ͞ ΕΔଐੑ 2. ܭࢉ͢Δඞཁͷ͋Δଐੑ method: “…”,

  14. αϙʔτ͞Εͳ͍ଐੑ 1. CSSηϨΫλʔͱͯࣝ͠ผ͞ ΕΔଐੑ 2. ܭࢉ͢Δඞཁͷ͋Δଐੑ 3. શͯͷϑΥʔϜଐੑ windowMaxHeight: “…”,

    windowTitle: “…”, Etc.

  15. αϙʔτ͞Εͳ͍ଐੑ 1. CSSηϨΫλʔͱͯࣝ͠ผ͞ ΕΔଐੑ 2. ܭࢉ͢Δඞཁͷ͋Δଐੑ 3. શͯͷϑΥʔϜଐੑ 4. ஋͕഑ྻ΍JSONϙΠϯλʔͱ

    ͯ͠ࢦఆ͞Ε͍ͯΔଐੑ choiceList: […], excludedList: […], events: […], list: { $ref: … }

  16. όΠφϦʔ͔Β
 ϓϩδΣΫτ΁

  17. όΠφϦʔ͔ΒϓϩδΣΫτ΁ όΠφϦʔϞʔυ styleSheets_mac.css styleSheets_windows.css

  18. όΠφϦʔ͔ΒϓϩδΣΫτ΁ ϓϩδΣΫτϞʔυ

  19. όΠφϦʔ͔ΒϓϩδΣΫτ΁ ϓϩδΣΫτϞʔυ

  20. όΠφϦʔ͔ΒϓϩδΣΫτ΁ 1. ελΠϧγʔτΛ࢖༻͠ͳ͍ΦϒδΣΫτ 2. ελΠϧγʔτΛ࢖༻͢ΔΦϒδΣΫτ

  21. όΠφϦʔ͔ΒϓϩδΣΫτ΁ ελΠϧγʔτΛ࢖༻͠ͳ͍ΦϒδΣΫτ 1 2 3 4 5

  22. "objects": { "Text": { "type": "text", "top": 24, "left": 23,

    "width": 275, "height": 23, "fill": "#FFFACD", "borderStyle": "solid", "fontFamily": "Monaco", "fontSize": 18, "textAlign": "center", "text": "Hello 4D Summit" } } 1 2 3 4 5 όΠφϦʔ͔ΒϓϩδΣΫτ΁ ελΠϧγʔτΛ࢖༻͠ͳ͍ΦϒδΣΫτ

  23. "objects": { "Text": { "type": "text", "top": 24, "left": 23,

    "width": 275, "height": 23, "fill": "#FFFACD", "borderStyle": "solid", "fontFamily": "Monaco", "fontSize": 18, "textAlign": "center", "text": "Hello 4D Summit" } } όΠφϦʔ͔ΒϓϩδΣΫτ΁ ελΠϧγʔτΛ࢖༻͠ͳ͍ΦϒδΣΫτ 1 2 3 4 5 ϓϩδΣΫτϞʔυͰͷϓϩύςΟϦετ

  24. όΠφϦʔ͔ΒϓϩδΣΫτ΁ ελΠϧγʔτΛ࢖༻͢ΔΦϒδΣΫτ 1 2 3 4 5

  25. 1 2 3 4 5 όΠφϦʔ͔ΒϓϩδΣΫτ΁ ελΠϧγʔτΛ࢖༻͢ΔΦϒδΣΫτ "objects": { "Text":

    { "type": "text", "top": 79, "left": 23, "width": 275, "height": 25, "fill": "#008000", "borderStyle": "solid", "class": "HeaderStyle", "stroke": "#FFFFFF", "textAlign": "center", "text": "Hello 4D Developers" } }

  26. 3 όΠφϦʔ͔ΒϓϩδΣΫτ΁ ελΠϧγʔτΛ࢖༻͢ΔΦϒδΣΫτ "objects": { "Text": { "type": "text", "top":

    79, "left": 23, "width": 275, "height": 25, "fill": "#008000", "borderStyle": "solid", "class": "HeaderStyle", "stroke": "#FFFFFF", "textAlign": "center", "text": "Hello 4D Developers" } } /* styleSheets_mac.css */ .HeaderStyle { font-family: Monaco; font-size: 18px; } ϓϩδΣΫτϞʔυͰͷϓϩύςΟϦετ

  27. 1 2 3 4 5 όΠφϦʔ͔ΒϓϩδΣΫτ΁ ελΠϧγʔτΛ࢖༻͢ΔΦϒδΣΫτ "objects": { "Text":

    { "type": "text", "top": 79, "left": 23, "width": 275, "height": 25, "fill": "#008000", "borderStyle": "solid", "class": "HeaderStyle", "stroke": "#FFFFFF", "textAlign": "center", "text": "Hello 4D Developers" } }

  28. CSS ηϨΫλʔ

  29. CSS ηϨΫλʔ • ελΠϧΛద༻͢ΔཁૉΛબ୒͢Δͷʹ࢖༻͢Δύλʔϯ • 4D Ͱ͸5ͭͷηϨΫλʔΛαϙʔτ͍ͯ͠·͢: ElementɺIDɺClassɺUniversalɺAttributes

  30. CSS ηϨΫλʔ ΦϒδΣΫτͷλΠϓ ΦϒδΣΫτ໊ Ϋϥε શΦϒδΣΫτ ಛఆͷଐੑ Element ID Class

    Universal Attributes CSS 4D

  31. CSS ηϨΫλʔ ΦϒδΣΫτͷλΠϓ ΦϒδΣΫτ໊ Ϋϥε શΦϒδΣΫτ ಛఆͷଐੑ 4D

  32. CSS ηϨΫλʔ ΦϒδΣΫτͷλΠϓ ΦϒδΣΫτ໊ Ϋϥε શΦϒδΣΫτ ಛఆͷଐੑ 4D “button", "buttonGrid",

    "checkbox", "combo", "dropdown", "groupBox", "input", "line", "list", "listbox", "oval", "picture", "pictureButton", "picturePopup", "plugin", "progress", "radio", "rectangle", "ruler", "spinner", "splitter", "stepper", "subform", "tab", "text", "view", "webArea", "write"

  33. CSS ηϨΫλʔ ΦϒδΣΫτͷλΠϓ ΦϒδΣΫτ໊ Ϋϥε શΦϒδΣΫτ ಛఆͷଐੑ 4D text {

    … } button { … } input { … }

  34. CSS ηϨΫλʔ ΦϒδΣΫτͷλΠϓ ΦϒδΣΫτ໊ Ϋϥε શΦϒδΣΫτ ಛఆͷଐੑ 4D #myHeader {

    … } #okButton { … } #nameInput { … }

  35. CSS ηϨΫλʔ ΦϒδΣΫτͷλΠϓ ΦϒδΣΫτ໊ Ϋϥε શΦϒδΣΫτ ಛఆͷଐੑ 4D .header {

    … } text.header { … } .default { … }

  36. CSS ηϨΫλʔ ΦϒδΣΫτͷλΠϓ ΦϒδΣΫτ໊ Ϋϥε શΦϒδΣΫτ ಛఆͷଐੑ 4D * {

    … }

  37. CSS ηϨΫλʔ ΦϒδΣΫτͷλΠϓ ΦϒδΣΫτ໊ Ϋϥε શΦϒδΣΫτ ಛఆͷଐੑ 4D .buttonAction[action=accept] {

    … } text[text=Hello] { … } text[text~=Hello] { … }

  38. ద༻ͷ༏ઌॱҐ

  39. ద༻ͷ༏ઌॱҐ ϑΝΠϧϨϕϧͰͷ༏ઌॱҐ ΦϒδΣΫτఆٛ styleSheets_mac.css styleSheets_windows.css styleSheets.css 1 2 3 fontSize:

    12 font-size: 14px; font-size: 18px; fontSize: 12 ࣮ࡍͷදࣔ

  40. ద༻ͷ༏ઌॱҐ ϑΝΠϧϨϕϧͰͷ༏ઌॱҐ ΦϒδΣΫτఆٛ styleSheets_mac.css styleSheets_windows.css styleSheets.css 1 2 3 font-size:

    14px; font-size: 18px; font-size: 14px; ࣮ࡍͷදࣔ

  41. ద༻ͷ༏ઌॱҐ ϑΝΠϧϨϕϧͰͷ༏ઌॱҐ ΦϒδΣΫτఆٛ styleSheets_mac.css styleSheets_windows.css styleSheets.css 1 2 3 font-size:

    18px; font-size: 18px; ࣮ࡍͷදࣔ

  42. ద༻ͷ༏ઌॱҐ ηϨΫλʔϨϕϧͰͷ༏ઌॱҐ ΦϒδΣΫτ໊ ಛఆͷଐੑ Ϋϥε 1 2 3 #myText {

    font-size: 12px; text[text|=Hello] { font-size: 14px; .headerStyle { font-size: 18px; ΦϒδΣΫτఆٛ ΦϒδΣΫτͷܕ શΦϒδΣΫτ 4 5 text { font-size: 24px; * { font-size: 36px; "myText": { "type": "text", "class": "headerStyle", "text": "Hello 4D Summit" } font-size: 12px; ࣮ࡍͷදࣔ

  43. ద༻ͷ༏ઌॱҐ ηϨΫλʔϨϕϧͰͷ༏ઌॱҐ ΦϒδΣΫτ໊ ಛఆͷଐੑ Ϋϥε 1 2 3 text[text|=Hello] {

    font-size: 14px; .headerStyle { font-size: 18px; ΦϒδΣΫτఆٛ ΦϒδΣΫτͷܕ શΦϒδΣΫτ 4 5 text { font-size: 24px; * { font-size: 36px; "myText": { "type": "text", "class": "headerStyle", "text": "Hello 4D Summit" } font-size: 14px; ࣮ࡍͷදࣔ

  44. ద༻ͷ༏ઌॱҐ ηϨΫλʔϨϕϧͰͷ༏ઌॱҐ ΦϒδΣΫτ໊ ಛఆͷଐੑ Ϋϥε 1 2 3 .headerStyle {

    font-size: 18px; ΦϒδΣΫτఆٛ ΦϒδΣΫτͷܕ શΦϒδΣΫτ 4 5 text { font-size: 24px; * { font-size: 36px; "myText": { "type": "text", "class": "headerStyle", "text": "Hello 4D Summit" } font-size: 18px; ࣮ࡍͷදࣔ

  45. ద༻ͷ༏ઌॱҐ ηϨΫλʔϨϕϧͰͷ༏ઌॱҐ ΦϒδΣΫτ໊ ಛఆͷଐੑ Ϋϥε 1 2 3 ΦϒδΣΫτఆٛ ΦϒδΣΫτͷܕ

    શΦϒδΣΫτ 4 5 text { font-size: 24px; * { font-size: 36px; "myText": { "type": "text", "class": "headerStyle", "text": "Hello 4D Summit" } font-size: 24px; ࣮ࡍͷදࣔ

  46. ద༻ͷ༏ઌॱҐ ηϨΫλʔϨϕϧͰͷ༏ઌॱҐ ΦϒδΣΫτ໊ ಛఆͷଐੑ Ϋϥε 1 2 3 ΦϒδΣΫτఆٛ ΦϒδΣΫτͷܕ

    શΦϒδΣΫτ 4 5 * { font-size: 36px; "myText": { "type": "text", "class": "headerStyle", "text": "Hello 4D Summit" } font-size: 36px; ࣮ࡍͷදࣔ

  47. σβΠϯ্ͷ੍໿

  48. σβΠϯ্ͷ੍໿ ϑΥʔϜͰCSSΛ࢖༻͢ΔࡍʹؾΛ͚͍ͭͨ͜ͱ • CSS͸ϑΥʔϜΤσΟλʔ্Ͱ͸ద༻͞Εͳ͍ • CSSͰͷఆٛ͸ɺϑΥʔϜ͕ϥϯλΠϜͰϩʔυ͞Ε ͨͱ͖ʹҰ౓͚ͩద༻͞ΕΔ • ϓϩύςΟϦετ಺Ͱͷมߋ͸શͯΦϒδΣΫτఆٛ ʹอଘ͞ΕɺCSSͰͷఆٛΑΓ༏ઌ͞ΕΔ

    • CSSͷ༏ઌॱҐΛɺImportant λάΛ࢖༻͢Δ͜ͱͰ ڧ੍తʹ্࣋ͪ͛Δ͜ͱ͕Մೳ

  49. σϞϯετϨʔγϣϯ