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

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

ただいまの
回答率

90.51%

  • CSS

    7553questions

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

CSSでのレイアウト設計について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 593

kuzurotto

score 395

CSSでのレイアウト設計についてです。

WordPressのテンプレートで賢威を使っていたことがあります。

そのテンプレートのCSSファイルを覗くと、
共通の分部をCSSで緻密に細かくレイアウト設計していました。

といいますより、現代のサイトはCSS設計がほとんどだと思います。

例えば、各ページでサイト名のレイアウトはすべて同じという場合下記のように表現できると思います。

<h1 class="sitename">サイト名<h1>
h1.sitename{
    font-size:3em;
    text-align:center;
}

上記は簡単な例ですが、制作し始めて間もない頃は規模が小さいからいいのですが、
制作が進むにつれ、ページでのidやclassの割り振りも多くなり、CSSへの記述も多くなるので、
classやidが重複してしまいそうな気がします。

実際CSSの設計をしている方は、どんな考え方のもと設計をしているのでしょうか?

特に考えているわけではなく、とりあえず設計していき、
重複しているものがあればその都度修正したり、
同じCSSの内容があれば統合したり
そんな感じでやっているのでしょうか?

個人でやってるならそれでいいかもしれないんですが、
チームで開発している場合、そうもいかないと思うんです。

チームでの共同制作の場合

Aさん→Aファイルの制作+CSS設計もする
Bさん→Bファイルの制作+CSS設計もする
・・・
・・・
・・・
・・・

で完成させるのか

Aさん→Aファイルの制作のみ
Bさん→Bファイルの制作のみ
・・・
・・・
・・・
・・・
デザイナーさん→A~のすべてのファイルのCSS設計をするのか

チーム制作の場合、実際、どういった流れで制作しているのでしょうか?
前者の場合、idやclassが重複したり同じ内容のcssがあったりすると思うのですが、チーム制作の経験がないため分かりません。

コツというかポイントみたいなものがあればアドバイスいただきたいです。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+4

個人でやってるならそれでいいかもしれないんですが、 
チームで開発している場合、そうもいかないと思うんです。

おっしゃるとおり、複数人での開発ではそれぞれがそれぞれの信念・信条のもと好きにCSSを書いていくと、class名がバッティングしたり、同じ機能のclassやidが別の名前で出来上がっていったりと…。

こうした事態を防ぎ、CSSを設計する上での考え方を統一するためのSMACSS(スマックス)、BEM(ベム)などといった設計ルールがあります。

例えばSMACSSに準拠すると

  • ベース(reset.cssなどの全体にデフォルトのスタイルを規定)
  • レイアウト(ヘッダ、フッタ、サイドバーなどのサイズはレイアウトを規定)
  • モジュール(ボタンやフォームなどのパーツなどをモジュールとして規定)
  • ステート(選択済み、選択中、表示、非表示といったモジュールの状態を規定)
  • テーマ(色などのテーマを規定)

といった一定のルールのもとCSSを書いていくことができます。
classの命名規則も定められていますが、もちろん単なる考え方ですので気に入らない部分は柔軟に変更したり、別のルールの考え方を混ぜて使ったりすることもあります。

こういった決まり事を規約としてあらかじめチームで決めておくことで、レイアウトを書く人、Aモジュール(+ステート)を書く人、Bモジュールを書く人といった具合でスムーズに分業をすることができます。

それぞれの規約の詳細は下記のような記事をご参照ください。

CSSルールまとめ SMACSS. OOCSS. BEM
CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/26 15:33

    ありがとうございます。
    参考にさせていただきます。

    キャンセル

同じタグがついた質問を見る

  • CSS

    7553questions

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