ボックスのpaddingとmarginを操る

ボックス要素にpaddingとmarginを設定しなければいけない場合、marginはwidthにはいったっけ？
とか、marginの相殺とか、わけわかんなくなって「あーうっとーしい！！」ってなることがある。

floatさせると思わぬところでレイアウト崩れを起こしてしまいがち。
CSS3の勧告候補の『box-sizing』プロパティを指定することによって、widthやheightで指定した横幅や高さにpaddingやborderの大きさを含むかどうかを指定することができる。

content-boxとborder-boxの2種類。
content-boxと指定した場合は、paddingとborderの値を含まない。
border-boxと指定した場合は、paddingとborderの値を含める。

これはOperaブラウザだけなので、独自実装な-moz、-webkit、-ms-boxを記述する必要がある。

各ブラウザごとに
Firefox　 -moz-box-sizing
Safari 3 -webkit-box-sizing
Internet Explorer 8 -ms-box-sizing
Opera box-sizing

CSS

box-style {
   padding: 10px;
   width: 500px;
   border: solid 2px #DDD;
   background: #CCC;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -box-sizing: border-box;
}

これでpaddingとborderを含む横幅500pxのボックスができあがり。

OpenPNEを編集：2

SNSへ招待されて、最初にプロフィールを入力するテンプレート
webapp/modules/pc/templates/h_regist_prof.tpl

プロフィールの確認
webapp/modules/pc/templates/h_regist_prof_confirm.tpl

PCの場合メールアドレスの入力
webapp/modules/pc/templates/o_regist_pc_address.tpl

プロフィールの変更
webapp/modules/pc/templates/h_ｃｏｎｆｉｇ_prof.tpl

CSSでプルダウンメニュー

とりあえず覚書。
CSSで作ったメニューリストに、リストでプルダウンメニューを作る。

#menu_area {
	height: 48px;
	width: 1000px;
	margin-bottom: 10px;
	position: relative;
	background-image: url(images/menubg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}
#menu_area ul {
	list-style-type: none;
	height: 48px;
	width: 1000px;
	text-align: right;

}
#menu_area ul li {
	display: inline;
}
#menu_area ul li ul#nav li {
	float: none;
	margin: 0;
}
/*プルダウンメニュー部分*/
#menu_area ul li ul#nav li a {
	position: relative;
	background-image: none;
	background-color: #333;
	font-size: 10px;
	filter: alpha(opacity=90);
	opacity: 0.9;
	color: #FFF;
	text-decoration: none;
	display: block;
	line-height: 1.5em;
	height: 2em;
	padding-right: 10px;
}

#menu_area ul li ul#nav a:hover {
	color: #000;
	position: relative;
	z-index: 100;
	visibility: visible;
	background-color: #FFBF01;
}

#menu_area ul li:hover ul#nav,
#menu_area ul li a:hover ul#nav {
	overflow: visible;
	height: auto;
	z-index: 10;
	visibility: visible;
}
IE6ではhover疑似クラスは表示されないので、小細工。
ul#nav { /* IE6 対策 */
        behavior: url("csshover3.htc");
}

上記ファイルはここから。

OpenPNEを編集：1

ページを表示するためのテンプレートファイルが格納されている場所。
webapp/modules/pc/templates

スキンの格納場所。
public-html/skin

レイアウトはボックスの大きさ違いで3つにわかれている。
#LayoutA
2カラムでTOPページに使われるサイズ

#LayoutB
2カラムでメールボックスに使われる、#Centerの幅の大きなデザイン

#LayoutC
1カラムで、#containerの中央にボックスのくるデザイン

リンク先に合わせたアイコンを表示する

属性セレクタでCSSによってスタイルを適用する。

a [href$=".pdf"] {background:url (pdf.gif) norepeat 0 0.2em;}
a [href$=".doc"] {background:url (doc.gif) norepeat 0 0.2em;}
a [href$=".xls"] {background:url (xls.gif) norepeat 0 0.2em;}

上記は属性セレクタを理解できるブラウザ向けの指定。
a [href$=".pdf"]は、href属性値が.pdfで終わるa要素を示す。

IE6以下は属性セレクタを利用できないため以下のようになる。

* href a.pdf {background:url (pdf.gif) norepeat 0 0.2em;}
* href a.doc {background:url (doc.gif) norepeat 0 0.2em;}
* href a.xls {background:url (xls.gif) norepeat 0 0.2em;}
* href a{/* IE-expression (attr-selector) */
behavior: expression (
this.className += this.getAttribute ("href") .match (^.pdf$/) ?"pdf":'',
this.className += this.getAttribute ("href") .match (^.doc$/) ?"doc":'',
this.className += this.getAttribute ("href") .match (^.xls$/) ?"xls":'',
this.style.behavior ="none") ;
}

HTML

PDFドキュメント

DOCドキュメント

XLSドキュメント

href属性値からファイル種を特定するためのXHTMLソースにはアイコンをつけるためのコードを書く必要がない。