Webデザインのマークアップ、命名規則、スタイリングどのようにしますか？

Webデザインを次のようにするとき、どのようにマークアップ、スタイリングしますか？またidやclassなどはどのように命名しますか？
あなたのやり方を教えてください。
色は適当につけたので気にしないでください
できれば、3つのボックス間の余白は同じくらいで3pxほどにしたいです。

![イメージ説明]WIDTH:600

行動規範の内容に同意します

回答2件

lang
1<body>
2  <div id="container">
3    <div id="left_area">
4    </div>
5    <div id="contents">
6      <div class="contents_box">
7      </div>
8      <div class="contents_box">
9      </div>
10    </div>
11  </div>
12</body>

大まかに左の領域(Menu想定)とコンテンツ部分に分かれるように構成します。
命名規則として区切り文字は-ではなく_を使用するようにしています。
これは仮えばJavaScriptからDOM操作するとした時に-(マイナス)と明確に区別できた方が可読性が良く見通しが良いと考えているためです。
例が同じものを並べているように見えたのでclassでまとめましたが別の物なら別の名前をそれぞれにつけます。

lang
1body {
2  text-align: center;
3}
4#container {
5  width : 1000px;
6  height : auto;
7  margin : 0px auto;
8  padding : 0px;
9  text-align: left;
10  background : #cccccc;
11  color : #ffffff;
12}
13#left_area {
14  width : 287px;
15  height : 540px;
16  margin : 0px 3px 0px 0px;
17  padding : 5px;
18  float : left;
19  background: #666666;
20
21}
22#contents {
23  width : 700px;
24  height : auto;
25  margin : 0px;
26  padding : 0px;
27  float : left;
28}
29.contents_box {
30  width : 690px;
31  height : 264px;
32  margin : 0px 0px 3px;
33  padding : 5px;
34  background : #333333;
35}

シンプルに実現することを目的にしています。
必要があればclear : both;用のclassなどを追加するでしょうね。

以下動作確認用。

lang
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<title>Name</title>
6</head>
7<body>
8  <div id="container">
9    <div id="left_area">
10    	test
11    </div>
12    <div id="contents">
13      <div class="contents_box">
14      	content_1
15      </div>
16      <div class="contents_box">
17      	contents_2
18      </div>
19    </div>
20  </div>
21  <style>
22    body {
23      text-align: center;
24    }
25	#container {
26	  width : 1000px;
27	  height : auto;
28	  margin : 0px auto;
29	  padding : 0px;
30	  text-align: left;
31	  background : #cccccc;
32	  color : #ffffff;
33	}
34	#left_area {
35	  width : 287px;
36	  height : 540px;
37	  margin : 0px 3px 0px 0px;
38	  padding : 5px;
39	  float : left;
40	  background: #666666;
41
42	}
43	#contents {
44	  width : 700px;
45	  height : auto;
46	  margin : 0px;
47	  padding : 0px;
48	  float : left;
49	}
50	.contents_box {
51	  width : 690px;
52	  height : 264px;
53	  margin : 0px 0px 3px;
54	  padding : 5px;
55	  background : #333333;
56	}
57  </style>
58</body>
59</html>

投稿2015/04/10 23:24

Cf_cwd

総合スコア730

汎用的に使える部分（l-floatなど）を入れたのでちょっと長くなってしまいました。

lang
1<style>
2.l-container{}
3.l-float{}
4.l-float:after{
5	display:block;
6  clear:both;
7  height:0px;
8  visibility:hidden;
9  content:".";
10}
11.l-float__child{float: left;}
12.p-main-container{width: 600px;}
13.p-left{
14	width: 200px;
15	height: 603px;
16	background: green;
17}
18.p-right{
19	float: right;
20	width: 397px;
21	height: 600px;
22}
23.p-right__container{
24	height: 300px;
25	background: blue;
26}
27.u-mt--small{margin-top: 3px;}
28</style>

lang
1  <div class="l-container p-main-container">
2    <div class="l-float">
3      <div class="l-float__child p-left"></div>
4      <div class="l-float__child p-right">
5        <div class="p-right__container"></div>
6        <div class="p-right__container u-mt--small"></div>
7      </div>
8    </div>
9  </div>

.mt--smallなどもサイト内で共通の作りにするときに基準を決める必要とかがあるのでちょっといい作りかはわからないです。

ただ、BemMindingを参考にさせて頂きcssのクラスを作っています。
l-...はサイト全体で使えるようなレイアウトなど
p-...そのページ内だけで使えるようなpartial的なもの
u-...微調整などに必要な部分

です。
あと3pxの調整でちょっとcssが汚くなってしまいました。。。
display:flex;なども使いたかったのですがブラウザ間の差異などを考えてfloatにしました！

あと、idの使い方ですが。
基本的にはid自体はjsを使用する際にしか使用しません。
例外はheaderなどの確実にページ内に一つしかないものは使ったりします。
また、jsを使用する際には
id="js-popup"
class="js-text"
の用に接頭にjs-をつけるようにしています。
こうすることでソースファイルを見ると「ここがjsのトリガーになってるんだ」とひと目でわかります

もしかしたらダメコードかもしれませんが自分はこういう感じに書きます！

投稿2015/04/10 06:01

編集2015/04/10 06:20