その他のショートハンドプロパティ

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

CSSテクニック一覧
テクニック別リンク

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

2007/11/27 初稿

CSSコーディングの効率を上げ、短いコードを書くためにはショートハンドプロパティを使用します。

普段のコーディングではああまり使わないであろうショートハンドプロパティのfont、border-width、border-color、border-style、list-style、outlineについて解説します。

fontは指定順に厳しく個別に書く方が指定ミスが減り、後から見直す際も簡単なのでショートハンドよりは個別に書いたほうが賢明です。また、省略不可能な部分があるので注意が必要です。
サイズと行間は半角spaceで区切るのではなく/で区切るのでここも注意が必要です。

font:	スタイル	スモールキャップ	太さ	サイズ	/行間	種類
値	normal italic oblique	normal small-caps	100-900 normal bold bolder lighter	px em %	/数字 /px /em /%	メイリオＭＳゴシックなど
省略	可能	可能	可能	不可能	可能	不可能
初期値	normal	normal	normal 400	ブラウザ依存	ブラウザ依存	ブラウザ依存

border-width、border-color、border-styleの指定順序です。borderはmargin、paddingと同じように指定できます。
指定が4つの場合は上から右回りになります。
省略しますが、指定が2つの場合はbackgroundと同様に左右、上下の順になり、指定が1つの場合はすべての辺が同じ値になります。

border-width:	上	右	下	左
値	px em	px em	px em	px em

border-color:	上	右	下	左
値	#ffffff	#ffffff	#ffffff	#ffffff

border-style:	上	右	下	左
値	solid double dashed dotted none groove ridge inset outset	solid double dashed dotted none groove ridge inset outset	solid double dashed dotted none groove ridge inset outset	solid double dashed dotted none groove ridge inset outset

list-styleです。
タイプは大半の場合ブラウザリセットでnoneに指定されているでしょうし、画像はliのbackgroundで出すことが多いので使いどころが微妙です。

list-style:	タイプ	画像	場所
値	none disc circle decimal square upper-roman lower-roman upper-alpha lower-alpha 等	url(01.png)	outside inside
初期値	disc		outside

最後にoutlineです。
ブラウザの:focusがサポートが必要です。IE7ではサポートされていません。
また、borderとプロパティは同じですがoutlineなので線の種類は4辺統一となり辺ごとの指定はありません。

outline:	線幅	線種	色
値	px em	solid double dashed dotted none groove ridge inset outset	#ffffff
省略	可能	可能	可能
初期値	ブラウザ依存	solid	ブラウザ依存

お薦めの参考書

CSS、webデザイン学習書籍、参考書をアマゾンで購入する

[an error occurred while processing this directive]
このサイトについて

初めまして。そして、ようこそ！京都でwebデザイナー、htmlコーダーをやっているackyです。
このサイトはでイラストレーションギャラリーとCSSのテクニックを紹介しています。

イラストレーションでは、主にF1やスーパースポーツ、モータースポーツをテーマにトレース技法で描いています。イラストのポイントは直線で構成したソリッドでシャープな質感です。

CSSテクニック、webの小技ではweb制作の時にちょっと役に立つようなCSSテクニックや、positionのrelative、absoluteの使い方、リスト(li)の横並びや、リスト(li)横並びの中央寄せ、フォームのチェックボックスやラジオボタンとテキストのずれを揃える方法、Photoshopのチャンネルを使った髪の毛の切り抜き方法、お気に入りアイコン(ファビコン、webアイコン)の作り方などを紹介しています。

（このサイトについて何がありましたら左記のアドレスからご連絡をお願いします）
サイトマップ
- Top　－　acky.infoの表紙のページ
- Create　－　イラストレーションギャラリー
  - モータースポーツイラストレーション　－　F1や車をテーマにしたイラスト
  - ヒューマンイラストレーション　－　人をテーマにしたイラスト
- tips　－　web制作で役立つ技や豆知識を紹介しています
  - CSSテクニック　－　ちょっとした時に役に立つcssや、基本的な事など
  - webの小技　－　知っているとちょっと良くなる、そんな小技
- link
- imode