cssの構造と見た目の分離は具体的には、何が構造側に含まれ、何が見た目側に含まれるのですか？widthやheightなんかは見た目側に含まるのですよね？分類する際の考え方をご教授頂けないでしょうか！？よろしくお願い致します！
ttp://hijiriworld.com/web/oocss/回答になるかな？
読んでみます。ありがとうございます。
構造はhtmlだよ
それは分かってます。oocssの話をしています。
htmlは文字及び画像・動画等の情報で構成されるツリー構造のデータベース。見た目や表示に関わる情報は一切持っていない。（画像や動画のwidth、heightはその情報固有の属性値）だまっててもh1が太字で大きく表示されるのはブラウザのデフォルトのCSSのせい。
オブジェクト志向CSSの構造とスキンについて勉強したら、わかると思う。例えばSNSのシェアボタンを例にして考えるとボタンは構造、FacebookやTwitterはスキン。<button class="button facebook">シェア</button><button class="button twitter">ツイート</button>
トピ主の理解は、ちょっと間違ってる。widthやheightは構造にもなりうるし、スキンにもなりうる。
どちらにもなりうるというところで混乱している状況なのですが、どういう切り分けで考えたら良いのでしょうか？
そもそも、見た目とスキンはちょっと違う。「構造＋スキン＝見た目」なのですね。視覚的な話ではなく、国語の文法だと思ってください。
で、切り分けは？
そもそもが理解出来てないから、切り分けも何も無いよ。修飾か被修飾かで切り分けたら？この言ってる意味がわからないならもうどうしようも無いよ。
飾るか、飾られるかで切り分けんの？構造の方にtext-alignとか飾るの使われたりしますけどねー。
そもそも言葉の意味を理解してないから、そういう解釈になるのだけれども、「飾る(decoration)」でなくて「修飾(modifier)」です。見た目＝視覚にとらわれすぎ。もうこれ以上説明無理。オブジェクト指向にtext-alignとか単体のCSSは関係ないです。
もう分かったから大丈夫。
切り分ける時に、width;100px;を一単位として考えるんじゃなく、.button｛width;100px;button;30px;｝を一単位で考えるんだと思うよ。こうすると、.buttonで何が指定されているかを知らなくとも、<button class="button">と書けば、誰でも同じ形のボタンが生成できる。っていうのがオブジェクト指向の考え方。で、この場合のbuttonが、構造なのかスキンなのかで切り分けて、その組み合わせてcssを指定していく。
一旦、cssのことを脇に置いて普通のGUIでのOOPでどのように設計、実装するかを考えてみたいと思います。ヒントを頂きましてありがとうございます！
みんなの回答 5 件
ttp://hijiriworld.com/web/oocss/
回答になるかな？
構造はhtmlだよ
htmlは文字及び画像・動画等の情報で構成されるツリー構造のデータベース。
見た目や表示に関わる情報は一切持っていない。（画像や動画のwidth、heightはその情報固有の属性値）
だまっててもh1が太字で大きく表示されるのはブラウザのデフォルトのCSSのせい。
オブジェクト志向CSSの構造とスキンについて勉強したら、わかると思う。
例えばSNSのシェアボタンを例にして考えるとボタンは構造、FacebookやTwitterはスキン。
<button class="button facebook">シェア</button>
<button class="button twitter">ツイート</button>
トピ主の理解は、ちょっと間違ってる。widthやheightは構造にもなりうるし、スキンにもなりうる。
切り分ける時に、width;100px;を一単位として考えるんじゃなく、
.button｛width;100px;button;30px;｝を一単位で考えるんだと思うよ。
こうすると、.buttonで何が指定されているかを知らなくとも、<button class="button">と書けば、誰でも同じ形のボタンが生成できる。
っていうのがオブジェクト指向の考え方。
で、この場合のbuttonが、構造なのかスキンなのかで切り分けて、その組み合わせてcssを指定していく。
関連するトピックス