Hereticalogue

MobileSafariはCSSもさっくり読み込んでくれますが、処理の重いjsライブラリを使っていると落ちる事があって、現にこのブログもがんがん落ちていたので別の定義で上書きする時の記述方法をメモ。

/*************************

FOR IPHONE / IPOD TOUCH

*************************/
@media only screen and (max-device-width:480px){
	#elementName{
		property : value ;
	}
}

コンテンツエリア内に入るデザインパターンを定義するときに、コンポーネント単位でのクラス管理のための定義を行うわけですが、区画を区切るものとしてclass="xxxSection"とclass="xxxArea"の扱いについて。

Section or Area

でそれぞれの用語の意味を調べてみましたよ。

[area]

面積、地域、領域

[section]

部分、区画、部門

ということで、階層構造的には

モジュールルート要素 > areaクラス > sectionクラス > 下層要素

となるのが妥当かなと考えています。よってエリアに機能を持たせる（コンポーネント化する）場合、

<div id="moduleElement">
<h2>K.M&Co.</h2>
<p>会社説明がはいりますはいります</p>
<div class="profileArea">
<h3>Information</h3>
<div class="section">
<ul>
<li>ここに内容</li>
<li>会社の説明とか</li>
</ul>
</div><!-- //section -->
</div><!-- //profileArea -->

<div clas="accessArea">
<h3>Access</h3>
<div class="section">
<dl>
<dt>電車でお越しの場合</dt>
<dd>山手線を十周した後、渋谷駅で下車、
南口で「んまーーっ！」とお叫びになっていただきますと、
迎えのものが参ります。</dd>
<dt>周辺地図</dt>
<dd>地図画像ここに入ります</dd>
</dl>
</div><!-- //section -->
</div><!-- //accessArea -->

のように、class="xxxxArea"（ｘｘｘｘには該当する任意の名前）でラップした各要素内を用意。さらに内部で繰り返しの要素が出現する場合、それをclass="section"でグループ化するのがいいのかなと考えました。

いま会社でcssガイドライン的なものを作っててそれの覚え書き的なものとしてメモっとります。

その１：netscape4.xへの適用を無効に

適用箇所：htmlソース

<link rel="stylesheet" media="all" type="text/css"

href="common/css/cssfilter.css" />

その2：windowsIE4.xへの適用を無効に

適用箇所：cssfilter.css内

@charset "Shift_JIS";
/* styleDelete windows ie under4.x  */
@import "import.css";

その３：macIE4.xへの適用を無効に

適用箇所：import.css内

@charset "Shift_JIS";
/* styleDelete mac ie under4.x  */

/*それそれのモジュールを読み込む*/
@import url("structure.css");
@import url("head.css");
@import url("primary.css");
@import url("secondary.css");
@import url("foot.css");

• structure.css･･･body,head,cont,footなどの定義をまとめる用
• それ以下・・・各セクションの親要素につけているidをcssファイル名に命名

タスク

structure.cssでそれぞれのモジュールとして他cssファイルのルート要素への定義を行うのか、それはそれぞれのファイルの先頭で行うのか決めかねてる。