覚えておくと便利なCSS
覚えておくと便利なCSS
clear:both;で回り込みを解除
clearプロパティはfloatプロパティで左寄せ、或いは右に寄せられた要素の回り込み解除に使うプロパティです。値は以下のとおりleft、right、both、noneとありますが通常使用するのはボス、bothです。
CSSにて段組みレイアウトを実現させる際には必要不可欠なfloatと同様必要不可欠なプロパティです。このclearがないと一旦回り込み指定を受けたボックスは延々と回り込み続けレイアウトを大きく崩します。
この回避にはfloat指示された直下のボックスには必ずclear指示を与える、またはあるボックス内部で完結させる、というようにしています。
一般的に見出しとなるh2やh3には回り込みは不要と考えていますので、共通内容記述のcommon.cssにてh1,h2,h3{clear:both;}という基本設定をしています。これにより回り込みによるレイアウト崩れの防止になります。
＜clearプロパティの値＞
left ・・・左寄せされた要素に対する回り込みを解除。
right ・・・右寄せされた要素に対する回り込みを解除。
both ・・・全ての要素に対する回り込みを解除。
none ・・・デフォルト。回り込みを解除せず。
ショートハンドプロパティで効率的に
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（上と左のボーダーが明るく、下と右のボーダーが暗く表示され、囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部指定では不可。）
複数の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ですが。
widthのワナ
現在IEはバージョン７.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;
}
classやidの名前はわかりやすく
見出しのとおりです。
例えばあるボックスに対して、#box_1を適用させたとします。
同じような性質なのでついつい、#box_2、#box_3・・・
これが５つも６つもあったら後でリコーディングする際に多いに戸惑いますしミスコードも誘発します。
制作中は記述した本人はよくわかっててよいのですが納品後２ヶ月後に修正、といった場合制作担当者は一気にへこむことでしょう。
「他人のコードは読み辛い」という観点から、人が見てもすぐわかる名前を書かなければなりません。
#left-box,#center-box,#right-boxのように。
セーフカラーは短縮表記
ウェブサイトデータ一式を納品した後に、企業の担当者様にたまに聞かれるのがカラーの短縮表記。RGBカラーは一般的に#000000のように６桁の英数字で表します。
しかしセーフカラーについてはこれを３桁に短縮できます。
例えば、「#ff0000 」—> 「#f00」のように。
つまり左から1、3、5番目の英数字を拾って表記すればOK。
CSSを記述する際、私はセーフカラーの場合100%短縮表記で記述します。ラクだし見やすいし実用性に富んでいます。
![[check]](image/face/check.png)
