質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

2126閲覧

OOCSSの構造と見た目の分離とは共通の部分が構造で、共通でない部分は見た目ということでしょうか?

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

0クリップ

投稿2016/03/07 06:38

OOCSSの構造と見た目の分離とは共通の部分が構造で、共通でない部分は見た目ということでしょうか?

下記を見るとそのようになっていますよね。
OOCSSの原則は

* ・構造と見た目の分離 * ・コンテナーとコンテンツの分離

構造と見た目の分離
これは、繰り返し定義される様なbackgroundやborderなどの見た目と構造自体を別で定義することです。
以下のコードでは、ボタン自体の構造を分離したことで、見た目を変えることでバリエーションを作ることが出来ます。
.btn {/* ボタンの構造 */
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
}

.btn-red {/* ボタンの見た目 */
background-color: red;
color: white;
}

ボタン

5o5o_wagon👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

モジュールとスキンね。

詳しくはこことか見てもらえるとわかると思うので。

投稿2016/03/14 01:09

ogaaaan

総合スコア765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/03/14 05:55

共通を構造としてしまっていいのか、それとも構造は共通のCSSすべてではなくこのプロパティのみが該当するのかを知りたかったです。 早速リンク先を見て見ます。
退会済みユーザー

退会済みユーザー

2016/03/16 08:45

リンク先を見ました。 *下記をみると、color: black;が構造の部分にあるので、こちらが正しいのであれば、構造とはボックスモデルの事ではなく、共通のプロパティのことということになりますね。 構造 .mod { margin: 10px; color: black; border: 1px solid black; } 見た目 .mod-red { color: red; border-color: red; background-color: #FFCCCC; } *大本 HTML <div class="line"> <div class="unit size1of3"> <div class="mod"> <p><strong>.mod</strong>は基本的なコンテナです。</p> </div> </div> <div class="unit size1of3"> <div class="mod mod-red"> <p>.modに<strong>.mod-red</strong>というスキンをあてています。</p> </div> </div> <div class="unit size1of3 lastUnit"> <div class="mod mod-blue"> <p>.modに<strong>.mod-blue</strong>というスキンをあてています。</p> </div> </div> </div> > CSS .line { width: 100%; } .unit { float: left; } .size1of3 { width: 33.3333%; } .mod { margin: 10px; color: black; border: 1px solid black; } .lastUnit { display: table-cell; float: none; width: auto; } .mod-red { color: red; border-color: red; background-color: #FFCCCC; } .mod-blue { color: blue; border-color: blue; background-color: #66CCFF;
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問