marginの結合

あるボックスのmargin設定で、例えば以下のような垂直方向のmarginに結合(=marginの相殺)が起こります。
div.boxA{margin:10px 0;}
div.boxB{margin:10px 0;}
<div class=”boxA”>●●●</div>
<div class=”boxB”>●●●</div>
boxAもboxBも上下10pxのマージンを設定していることから単純に計算するとboxAとboxBの間には20pxのマージンがあることになります。
しかし、ここでマージンの結合が発生!実際は10pxとなります。以下に発生条件と適用値を列記します。
条件: 隣接または入れ子の関係にある複数のボックスであること。
適用値: 一般的な配置(position:static;)の場合以下参照。

[正の値]|[正の値] ─── 最大値
[正の値]|[負の値] ─── 最大値と最小値の和
[負の値]|[負の値] ─── 最小値

※float設定したボックス、絶対配置(position:absolute or fixed;)には適用されません。
※水平方向のマージンには適用されません。

Posted in CSS

clear:both;で回り込みを解除

clearプロパティはfloatプロパティで左寄せ、或いは右に寄せられた要素の回り込み解除に使うプロパティです。値は以下のとおりleft、right、both、noneとありますが通常使用するのはボス、bothです。
CSSにて段組みレイアウトを実現させる際には必要不可欠なfloatと同様必要不可欠なプロパティです。このclearがないと一旦回り込み指定を受けたボックスは延々と回り込み続けレイアウトを大きく崩します。
この回避にはfloat指示された直下のボックスには必ずclear指示を与える、またはあるボックス内部で完結させる、というようにしています。
例1
<div id=”sampleBOX”>
 <div lass=”left”>左に回りこみ </div>
 <div lass=”left”>左に回りこみ </div>
</div>
例2
<div lass=”left”>左に回りこみ </div>
<div lass=”left”>左に回りこみ </div>
<div lass=”sampleBOX> </div>
css
#sampleBOX{clear:both;}
.left{float:left;}
一般的に見出しとなるh2やh3には回り込みは不要と考えていますので、共通内容記述のcommon.cssにてh1,h2,h3{clear:both;}という基本設定をしています。これにより回り込みによるレイアウト崩れの防止になります。
<clearプロパティの値>
left ・・・左寄せされた要素に対する回り込みを解除。
right ・・・右寄せされた要素に対する回り込みを解除。
both ・・・全ての要素に対する回り込みを解除。
none ・・・デフォルト。回り込みを解除せず。

Posted in CSS

ショートハンドプロパティで効率的に

CSSコーディングを効率的かつ見やすく仕上げるには、短縮表示OKなショートハンド対応のプロパティを効果的に使います。
よく使うものではmargin、padding、background、borderなどがあります。
●margin、padding
[4つの値を指定] margin:上 右 下 左 ;
[3つの値を指定] margin:上 左右 下 ;
[2つの値を指定] margin: 上下 左右 ;
[1つの値を指定] margin: 上下左右 ;
・単位はpx、%、emなど
ちなみに、emとはフォントの高さを1とする単位で、exとは小文字の「x」の高さを1とする単位です。
●background
background:  色  | 画像 |  リピート指定  | 表示指定  | 左右位置  |上下位置
初期値      透明 | なし  | repeat        | scroll      | 0px      |0px
色 : #fff
画像 :url(sample.gif)
リピート指定 : repeat|no-repeat|repeat-x|repeat-y
表示指定 : scroll|fix
左右位置 : 数値指定(px、%、em) left|center|right
上下位置 : 数値指定(px、%、em) top|center|bottom
左右位置と上下位置については注意が必要です。leftなどキーワード指定では順不同ですが、数値の場合には上記順番になります。
また数値入力の場合表示位置を左、または上からのオフセットとなります。どの値についても省略可能。
●border
border:   線幅  | 線種  | 色     ;
初期値   ブラウザ| solid | ブラウザ
線幅:数値(px,em)
色: #ccc
線種:
solid (1本線)、
double(2本線)、
dashed(破線) 、
dotted(点線)、
groove (立体的に窪んだ線)、
ridge (立体的に隆起した線)、
inset (上と左のボーダーが暗く、下と右のボーダーが明るく表示され、囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部指定では不可。 )
outset(上と左のボーダーが明るく、下と右のボーダーが暗く表示され、囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部指定では不可。)

Posted in CSS

IME-MODEでフォームの入力補助

CSSプロパティのime-modeを使うと、テキストフィールド、テキストエリアなどフォームの入力時の入力モードが指定できます。
対応ブラウザはIE、またFirefoxは3~。
active     全角日本語を指定 (半角/全角キー有効)
inactive 半角英数を指定  (半角/全角キー有効)
disabled 半角英数に固定 (半角/全角キー無効)
auto          ブラウザの入力モードを引き継ぐ(デフォルト)
記述例
input { ime-mode : active ;  }
input { ime-mode : inactive ;  }
input { ime-mode : disabled ;  }
動作確認
●active 

●inactive 

●disabled 

Posted in CSS

複数のCSSで

通常のウェブサイト制作の場合には迷わず複数のCSSを使用して制作します。
例えばimport_home.cssを外部参照した場合のその中身は以下の記述がしてあります。
@import url(“reset.css”);
@import url(“common.css”);
@import url(“home.css”);
reset.cssはすべての要素を初期化する記述内容。
*(ワイルドカード)でもよいのですがCSSを分けるメリットが他にもありあすので。
次いで、common.cssで全ページ共通内容の記述内容を、
そして、home.cssでトップページ特有のスタイルを設定する、といった具合です。
ひとつのCSSファイルにすべて記述する方法も一般的ですが、行数が長くなり目的の記述箇所を探すのが大変だったりしますので、私は専ら複数CSSでのコーディングです。
WordPressは単一CSSですが。

Posted in CSS

classやidの名前はわかりやすく

見出しのとおりです。
例えばあるボックスに対して、#box_1を適用させたとします。
同じような性質なのでついつい、#box_2、#box_3・・・
これが5つも6つもあったら後でリコーディングする際に多いに戸惑いますしミスコードも誘発します。
制作中は記述した本人はよくわかっててよいのですが納品後2ヶ月後に修正、といった場合制作担当者は一気にへこむことでしょう。
「他人のコードは読み辛い」という観点から、人が見てもすぐわかる名前を書かなければなりません。
#left-box,#center-box,#right-boxのように。

Posted in CSS

widthのワナ

現在IEはバージョン7.0(このエントリーの時点ではIE8β版がリリース)でとても柔軟性のあるブラウザで多少のミスコードも許容してくれます。
今となってはひと昔前となりますが、IE5.5から6.0への渡河期には私も含め多くのウェブデザイナがwidthの迷宮に迷い込んだものです。5.5と6.0、このわずかなバージョンアップはwidth(幅)の認識範囲がまるで違ったのです。あるボックスの左辺を下記のように表したとき、
|margin|
|padding|
|border|
|ボックス内側|
|border|
|padding|
|margin|
5.5のwidth—> padding|border|ボックス内側|border|padding
6.0のwidth—>|ボックス内側|
つまり5.5ではborderとpaddingを含んでしまうので、6.0でも同様のレイアウトを維持させる場合テクニックが必要となります。
結局は足し算引き算の問題になるのですが、これが結構悩ましいのです。7.0主流の現在でも一応5.5に対応したコーディングはしています。こんな具合に。
#sample
{
padding:0 5px 0 10px;
border:1px;
width: 500px;
voice-family: “”}””;
voice-family: inherit;
width: 483px;
}

Posted in CSS

セーフカラーは短縮表記

ウェブサイトデータ一式を納品した後に、企業の担当者様にたまに聞かれるのがカラーの短縮表記。RGBカラーは一般的に#000000のように6桁の英数字で表します。
しかしセーフカラーについてはこれを3桁に短縮できます。
例えば、「#ff0000 」—> 「#f00」のように。
つまり左から1、3、5番目の英数字を拾って表記すればOK。
CSSを記述する際、私はセーフカラーの場合100%短縮表記で記述します。ラクだし見やすいし実用性に富んでいます。

Posted in CSS