CSS

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

໨࣍ • CSSΛ࢖༻͢Δཧ༝ • αϙʔτ͞ΕΔଐੑ/͞Εͳ͍ଐੑ • όΠφϦʔ͔ΒϓϩδΣΫτ΁ • CSSηϨΫλʔ •
ద༻ͷ༏ઌॱҐ • σβΠϯ্ͷ੍໿ • σϞϯετϨʔγϣϯ

CSSΛ࢖༻͢Δཧ༝

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

CSSΛ࢖༻͢Δཧ༝ • ޿͘Ұൠతʹ࢖༻͞Ε͍ͯΔ .button { font-family: Arial; font-size: 12px; color:
#CCC; } input { Background-color: #333;

CSSΛ࢖༻͢Δཧ༝ • ޿͘Ұൠతʹ࢖༻͞Ε͍ͯΔ • JSON ΦϒδΣΫτه๏ͱۙ ͍ܗࣜΛ͍ͯ͠Δ .button { font-family:
Arial; font-size: 12px; color: #CCC; } input { Background-color: #333; button: { fontFamily: Arial, fontSize: 12, stroke: #CCC } input: { ﬁll: #333

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

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

αϙʔτ͞ΕΔଐੑ 4D CSS borderStyle ﬁll 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

αϙʔτ͞ΕΔଐੑ

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

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

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

αϙʔτ͞Εͳ͍ଐੑ 1. CSSηϨΫλʔͱͯࣝ͠ผ͞ ΕΔଐੑ 2. ܭࢉ͢Δඞཁͷ͋Δଐੑ 3. શͯͷϑΥʔϜଐੑ 4. ஋͕഑ྻ΍JSONϙΠϯλʔͱ
ͯ͠ࢦఆ͞Ε͍ͯΔଐੑ choiceList: […], excludedList: […], events: […], list: { $ref: … }

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

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

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

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

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

"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 όΠφϦʔ͔ΒϓϩδΣΫτ΁ ελΠϧγʔτΛ࢖༻͠ͳ͍ΦϒδΣΫτ

"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 ϓϩδΣΫτϞʔυͰͷϓϩύςΟϦετ

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

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" } }

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; } ϓϩδΣΫτϞʔυͰͷϓϩύςΟϦετ

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" } }

CSS ηϨΫλʔ

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

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

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

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"

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

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

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

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

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

ద༻ͷ༏ઌॱҐ

ద༻ͷ༏ઌॱҐ ϑΝΠϧϨϕϧͰͷ༏ઌॱҐ ΦϒδΣΫτఆٛ styleSheets_mac.css styleSheets_windows.css styleSheets.css 1 2 3 fontSize:
12 font-size: 14px; font-size: 18px; fontSize: 12 ࣮ࡍͷදࣔ

ద༻ͷ༏ઌॱҐ ϑΝΠϧϨϕϧͰͷ༏ઌॱҐ ΦϒδΣΫτఆٛ styleSheets_mac.css styleSheets_windows.css styleSheets.css 1 2 3 font-size:
14px; font-size: 18px; font-size: 14px; ࣮ࡍͷදࣔ

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

ద༻ͷ༏ઌॱҐ ηϨΫλʔϨϕϧͰͷ༏ઌॱҐ ΦϒδΣΫτ໊ ಛఆͷଐੑ Ϋϥε 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; ࣮ࡍͷදࣔ

ద༻ͷ༏ઌॱҐ ηϨΫλʔϨϕϧͰͷ༏ઌॱҐ ΦϒδΣΫτ໊ ಛఆͷଐੑ Ϋϥε 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; ࣮ࡍͷදࣔ

ద༻ͷ༏ઌॱҐ ηϨΫλʔϨϕϧͰͷ༏ઌॱҐ ΦϒδΣΫτ໊ ಛఆͷଐੑ Ϋϥε 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; ࣮ࡍͷදࣔ

ద༻ͷ༏ઌॱҐ ηϨΫλʔϨϕϧͰͷ༏ઌॱҐ ΦϒδΣΫτ໊ ಛఆͷଐੑ Ϋϥε 1 2 3 ΦϒδΣΫτఆٛ ΦϒδΣΫτͷܕ
શΦϒδΣΫτ 4 5 text { font-size: 24px; * { font-size: 36px; "myText": { "type": "text", "class": "headerStyle", "text": "Hello 4D Summit" } font-size: 24px; ࣮ࡍͷදࣔ

ద༻ͷ༏ઌॱҐ ηϨΫλʔϨϕϧͰͷ༏ઌॱҐ ΦϒδΣΫτ໊ ಛఆͷଐੑ Ϋϥε 1 2 3 ΦϒδΣΫτఆٛ ΦϒδΣΫτͷܕ
શΦϒδΣΫτ 4 5 * { font-size: 36px; "myText": { "type": "text", "class": "headerStyle", "text": "Hello 4D Summit" } font-size: 36px; ࣮ࡍͷදࣔ

σβΠϯ্ͷ੍໿

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

σϞϯετϨʔγϣϯ

CSS

CSS

More Decks by 4D Japan

Other Decks in Technology

Featured

Transcript