web関係、制作関係でのよしなしごとを書いています。
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 /% |
メイリオ MS ゴシック など |
省略 | 可能 | 可能 | 可能 | 不可能 | 可能 | 不可能 |
初期値 | 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 | ブラウザ依存 |
初めまして。そして、ようこそ!京都でwebデザイナー、htmlコーダーをやっているackyです。
このサイトはでイラストレーションギャラリーとCSSのテクニックを紹介しています。
イラストレーションでは、主にF1やスーパースポーツ、モータースポーツをテーマにトレース技法で描いています。イラストのポイントは直線で構成したソリッドでシャープな質感です。
CSSテクニック、webの小技ではweb制作の時にちょっと役に立つようなCSSテクニックや、positionのrelative、absoluteの使い方、リスト(li)の横並びや、リスト(li)横並びの中央寄せ、フォームのチェックボックスやラジオボタンとテキストのずれを揃える方法、Photoshopのチャンネルを使った髪の毛の切り抜き方法、お気に入りアイコン(ファビコン、webアイコン)の作り方などを紹介しています。
(このサイトについて何がありましたら左記のアドレスからご連絡をお願いします)