web関係、制作関係でのよしなしごとを書いています。
2008/10/22 加筆
CSSコーディングの効率を上げ、短いコードを書くためにはショートハンドプロパティを使用します。
ショートハンドに対応しているものはbackground、margin、padding、font、border、border-width、border-style、border-color、list-style、outlineです。
この中で主に使用するのはbackground、margin、padding、borderあたりでしょう。
fontは指定順に厳しく個別に書く方が指定ミスが減り、後から見直す際も簡単なのでショートハンドよりは個別に書きましょう。
border-widthなどもborder-widthのショートハンドで一括して書くよりも、border-top などそれぞれの部分のショートハンドで書く方が指定ミスが減り後から見直す際も簡単です。list-styleについても同様の理由です。
outlineは:focus疑似クラスにブラウザが対応する必要がありますしoutlineをつけるよりtextareaの背景色を変化させる方がすっきりしていて綺麗です。
まずbackgroundからです。
ページを制作する際は必ず指定するのでとても重要です。
この中で右方向位置と下方向位置はleftなどのキーワードを指定した場合のみ順不同ですが、単位指定する場合を見越して以下の順で記述する方がいいでしょう。
background: | 色 | 画像 | リピート指定 | 表示固定 | 右方向位置 | 下方向位置 |
---|---|---|---|---|---|---|
値 | #ffffff | url(01.png) | repeat no-repeat repeat-x repeat-y |
scroll fix |
px em % left center right |
px em % top center bottom |
省略 | 可能 | 可能 | 可能 | 可能 | 可能 |
可能 |
初期値 | 透明 | 画像無し | repeat | scroll | 0px | 0px |
次にmarginとpaddingです。
指定が4つの場合は上から右回りになります。
margin: padding: |
上 | 右 | 下 | 左 |
---|---|---|---|---|
値 | px em % |
px em % |
px em % |
px em % |
指定が3つの場合は上、左右、下の順になります。左右がひとまとめになります。
margin: padding: |
上 | 左右 | 下 |
---|---|---|---|
値 | px em % |
px em % |
px em % |
指定が2つの場合は上下、左右の順になります。backgroundと順番が逆なので気をつけましょう。
margin: padding: |
上下 | 左右 |
---|---|---|
値 | px em % |
px em % |
指定が1つの場合はすべての辺が同じ値になります。
margin: padding: |
上下左右 |
---|---|
値 | px em % |
最後にborderです。
borderだけの場合は4辺すべて同じ値になります。
辺ごとに分ければそれぞれスタイルを変えることができます。
border: border-tpo: border-bottom: borde-left: border-right: |
線幅 | 線種 | 色 |
---|---|---|---|
値 | 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アイコン)の作り方などを紹介しています。
(このサイトについて何がありましたら左記のアドレスからご連絡をお願いします)