CSS

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. σϞϯετϨʔγϣϯ