Poturi

基本テクニック

より洗練されたCSSを書くための基本テクニックを集めていきます。

属性の省略形

上下左右の省略形

上下左右の値を設定する際、状況に合わせて省略形を使うとコードがシンプルになります。

margin: 40px 30px 20px 10px;	/* 上, 右, 下, 左 */
margin: 30px 20px 10px;		/* 上, 左右, 下 */
margin: 20px 10px;		/* 上下, 左右 */
margin: 10px;			/* 上下左右 */

カラーの省略形

RGBを16進数で指定する際、同じ数字が重なる場合は3桁に省略できます。

color: #f90;	/* #ff9900と同じ */

属性の一括指定

複数の属性を一括指定する属性もあります。

border: 1px solid #000;
font: bold 10pt sans-serif;
background: #fff url("") no-repeat scroll 10px 8px;
list-style: disc inside url("marker.gif");

セレクタ

セレクタを使いこなすと、無駄なIDやクラスが減って、HTMLがすっきりします。 特に子孫セレクタは活躍する場面が多いように思います。

次の一覧表はW3Cのページにあるものを翻訳しました。

セレクタ一覧表
パターン 意味 名称
* すべての要素にマッチする ユニバーサルセレクタ
E 任意の要素Eにマッチする タイプセレクタ
E F 任意の要素Eの子孫である任意の要素Fにマッチする 子孫セレクタ
E > F 任意の要素Eの子供である任意の要素Fにマッチする 子供セレクタ
E:first-child 要素Eが親要素の中の最初の子供要素のとき、要素Eにマッチする 第一子擬似クラス
E:link
E:visited		 Eが未訪問のハイパーリンクのアンカーならば:linkに、訪問済みならば:visitedにマッチする リンク擬似クラス
E:active
E:hover
E:focus		 特定のユーザアクション中の要素Eにマッチする ダイナミック擬似クラス
E:lang(c) 自然言語cで書かれた要素Eにマッチする（どの言語が指定されているかは、構造化言語が特定する） lang()擬似クラス
E + F 要素Eが直前にある要素Fにマッチする 隣接セレクタ
E[foo] 属性foo（値は関係ない）が指定された任意の要素Eにマッチする 属性セレクタ
E[foo="warning"] 属性fooの値がwarningならば、属性fooを持つ任意の要素Eにマッチする 属性セレクタ
E[foo~="warning"] 属性fooの値がスペース区切りのリストで、その中のひとつがwarningならば、属性fooを持つ任意の要素Eにマッチする 属性セレクタ
E[lang|="en"] 要素Eのlang属性の値（ハイフン区切り）のひとつがenで始まる場合、任意の要素Eにマッチする 属性セレクタ
DIV.warning HTMLのみ。DIV[class~="warning"]と同じ クラスセレクタ
E#myid IDがmyidの任意の要素Eにマッチする IDセレクタ

リンク

autoを使ったセンター揃え

ブロック要素をセンターに配置するには、左右のmarginにautoを設定します。

#my_block {
	display: block;
	margin: 0 auto;
}

このテクニックを応用すると、ページ全体をセンターに配置することも可能です。

Validator

HTMLとCSSの正当性をチェックするには、W3CのValidatorを使うと便利です。厳密にチェックされるので、なかなか手ごわいです。

リンク

属性一覧表

CSSの属性をチェックするには、W3Cの仕様書を見るのが確実です。

リンク

文字実体参照

(X)HTMLでエスケープさせる必要がある文字は、実体参照を使います。

実体参照
文字 実体参照
& &
" "
< &lt;
> &gt;

IE6とIE7の共存

Webページを作成して表示をチェックするとき、Windowsでは、IE6、IE7、Firefox、Opera、MacではSafari、Firefox、Operaで見ておきたいところです。しかしWindowsマシンにIE7を入れると、強制的にIE6が使用不可になってしまいます。なんとか両方を同時に使えないものか調べてみたら、解決してくれるサイトがありました。

TredoSoftで、IE7を単独で起動するための方法と、専用の起動プログラムを配布しています。こういう地味なことにも注力してくれる人がいるってのはほんと助かります。

  1. MSのWebサイトから、IE7のインストーラIE7-WindowsXP-x86-jpn.exeをダウンロード
  2. TredoSoftの解説ページからIE7S.zipをダウンロード
  3. 両ファイルを解凍ソフトで解凍
  4. IE7-WindowsXP-x86-jpnのupdateディレクトリにあるxmllitesetup.exeを実行
  5. IE7SのIE7s.exeを、IE7-WindowsXP-x86-jpnのルートディレクトリに置く
  6. IE7s.exeを実行すると、IE7が単独で起動する

起動時にエラーが出ますが、まぁ動作チェックには問題ありません。

© 2007 Poturi.