010old(新デフォルト)の構造

作業中

body
┣#head-bar
┣#overDiv
┣#top
┗#wrapper●○▲△
　┣#head_editmenu
　┗#wrapper2●○▲△
　　┣#header●○▲△
　　┃┗#header2●○▲△
　　┣#content●○▲△
　　┃┣#main●○▲△
　　┃┃┣#mainbody●○▲△
　　┃┃┃┣#mainbody2●○▲△
　　┃┃┃┗#ad
　　┃┃┣#attach●○▲△
　　┃┃┗#footnote●○▲△
　　┃┗#menu●○▲△
　　┃　┗#menu_body●○▲△
　　┃　　┗#menu_body2●○▲△
　　├＜br clear="all"＞
　　┣#foot_editmenu●○▲△
　　┗#footer●○▲△
　　　┗#recommend

ボックスイメージに色をつけた場合

サムネイル画像をクリックすると大きなサイズを表示します

解説

#head-bar

ページ最上部にある「＠Wiki　[PR] 匿名掲示板を無料レンタル」などの部分。外部cssではなくhtmlソース上で指定されている。

#overDiv

役割不明

#top

＆nbsp;≒半角スペースが入る。役割不明

#wrapper

レイアウト制御の包み。背景はピンク色。多数のdivを中に持ち、中に入るdivの色で大部分が隠されている。

#head_editmenu

「ログイン、ログアウト」などが表示される。色指定が無いため、#wrapperのピンク色が透けて見えている

#wrapper2

包み。背景色に緑を指定したが、中に入るdivの色で大部分が隠されている。黄色の#foot_editmenu上部に、色指定のない＜br clear="all"＞があり、一行分、緑色が見える。また黄色の#foot_editmenuに6pxの下マージンがあり、そこも緑になる。

#header

包み。紺色を指定したが、#header2の色に隠されている。

#header2

背景は銀色。この中に、サイト名とページ名が表示される。

#content

包み。背景は青色。 一行だけのページで青色がはっきり見える。これは#content:afterにより#contentボックス内の最後に、floatしていない擬似要素を生成したため、その擬似要素の位置まで#contentが青色で包もうとするからである。#content:afterがない場合

#main

包み。背景は灰色。通常のfloatなら左メニュー側にこの色は見えないのだが、#mainの 幅を100％にして、ネガティブマージンを使ったため、左メニュー側に灰色が見える。この灰色部分はメイン側の縦長さに連動する。他サイトのps-one_ggeneでは#mainと#menuの色を揃えることで、左メニューバーがずっと下まで続いているかのように偽装している。

#mainbody

包み。オリーブ色。親ボックスの#mainの内容領域にネガティブマージン分#menuが侵入してくる。親の#mainの内容領域線に対して、子の#mainbodyに左マージンを設け、侵入した#menuに重ならないようにしている。

#mainbody2

背景は白色。このなかに編集した文章が現われる。

#ad

JavaScriptによる広告が現われる。背景色指定なし。

#attach

アップロードされたファイル（添付ファイル）がある場合、リスト表示する。サイト管理人が表示・非表示を選択できる。ページ毎の表示・非表示は選べない。アップロードファイルを表示すると、#attachの中に#attachが現われるというバグがある。

#footnote

役割不明。いちおう背景は白色。

#menu

包み。背景色はteal（鴨色）という緑っぽい色。中に入るdivの色で隠されている。幅をpx指定してfloatさせているので、当サイトはハーフリキッドレイアウトである。

#menu_body

包み。背景は紫色。

#menu_body2

サイト管理人がメニュー指定したページが表示されている。どのページがメニューページに指定されたかは判りづらいが、そのページさえ判れば、容易に編集できる。

＜br clear="all"＞

htmlソース上に記述されているタグ。ソース上先行する浮動要素（floatした要素）より下方に表示される……らしい。NetFrontが対応しているか不明なタグ。

#foot_editmenu

背景は黄色。「新しいページ」「差分」などのリンクが入る。NetFrontでの表示が変な箇所でもある。

#footer

包み。背景は水色。

#recommend

色指定が無いので#footerの水色が見える。「おすすめリンク」「 | 転職ならen |」などが入る。エン・ジャパンという会社と＠ウィキを運営するアットフリークス関連のリンクである。