Web制作 ウェブマジック » CSSプロパティ一覧 http://www.hp-webmagic.com/wordpress 高品質なのに低価格 Web標準hp制作・CMS・ネットショップ Fri, 10 Feb 2012 03:27:49 +0000 ja hourly 1 min-width：最小幅指定 http://www.hp-webmagic.com/wordpress/archives/254 http://www.hp-webmagic.com/wordpress/archives/254#comments Tue, 28 Oct 2008 04:27:32 +0000 Web Magic http://www.hp-webmagic.com/?p=254 min-widthプロパティは要素の最大の横幅を設定。IE6以前のバージョンは未対応な点に注意。

プロパティ

min-width

値

em | px | %

対象

すべての要素(tableは除く)

継承の有無

なし

通常は最小幅[max-width]と同時指定します。

<div id="box">
<div id="***"></div>
<div id="***"></div>
<div id="***"></div>
</div>
---- CSS ----
#box {
  min-width: 700px;
  max-width: 900px;
}

IE6以前のブラウザ用にCSSファイルを作成するなどの対処が必要。

IE独自拡張スクリプトを記述

#box {
  min-width: 700px;
  max-width: 900px;
  width: expression(document.body.clientWidth < 701? "700px":document.body.clientWidth > 901? "900px" : "100%");
  position: relative;
}

IE用CSSファイルを読み込む

<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<!--[if gte IE 6]>
<link rel="stylesheet" href="IE用.css" type="text/css" media="screen" />
<![endif]-->
</head>

max-widthプロパティ

min-widthプロパティは要素の最大の横幅を設定。

プロパティ

max-width

値

em | px | %

対象

すべての要素(tableは除く)

継承の有無

なし

]]> http://www.hp-webmagic.com/wordpress/archives/254/feed 0 max-width：最大幅指定 http://www.hp-webmagic.com/wordpress/archives/253 http://www.hp-webmagic.com/wordpress/archives/253#comments Tue, 28 Oct 2008 04:23:23 +0000 Web Magic http://www.hp-webmagic.com/?p=253 max-widthプロパティは要素の最大の横幅を設定。IE6以前のバージョンは未対応な点に注意。

プロパティ

max-width

値

em | px | %

対象

すべての要素(tableは除く)

継承の有無

なし

通常は最小幅[min-width]と同時指定します。

<div id="box">
<div id="***"></div>
<div id="***"></div>
<div id="***"></div>
</div>
---- CSS ----
#box {
  min-width: 700px;
  max-width: 900px;
}

IE6以前のブラウザ用にCSSファイルを作成するなどの対処が必要。

IE独自拡張スクリプトを記述

#box {
  min-width: 700px;
  max-width: 900px;
  width: expression(document.body.clientWidth < 701? "700px":document.body.clientWidth > 901? "900px" : "100%");
  position: relative;
}

IE用CSSファイルを読み込む

<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<!--[if gte IE 6]>
<link rel="stylesheet" href="IE用.css" type="text/css" media="screen" />
<![endif]-->
</head>

min-widthプロパティ

min-widthプロパティは要素の最小の横幅を設定。

プロパティ

min-width

値

em | px | %

対象

すべての要素(tableは除く)

継承の有無

なし

]]> http://www.hp-webmagic.com/wordpress/archives/253/feed 0 clearfix：floatの解除 http://www.hp-webmagic.com/wordpress/archives/252 http://www.hp-webmagic.com/wordpress/archives/252#comments Tue, 28 Oct 2008 03:26:47 +0000 Web Magic http://www.hp-webmagic.com/?p=252 親ボックス内でfloatを解除する子ボックス[#footer{clear:both;}など]を設けない場合のfloat解除方法。

親ボックス内でfloatを解除しなかった場合、背景画像が表示されない、或いは親ボックスの下まで表示されない場合などに有効だが、基本的には親ボックス内でfloatを解除した方がbetter。

<div id="box">
<div id="box-a"></div>
<div id="box-b"></div>
</div>
---- CSS ----
#box { width: 700px; margin: 0 auto; background: #******; }
#box-a { width: 500px; float: left; }
#box-b { width: 200px; float: right; }
<div id="box" class="clearfix">
<div id="box-a"></div>
<div id="box-b"></div>
</div>
---- CSS ----
#box { width: 700px; margin: 0 auto; background: #******; }

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

 .clearfix { display: inline-block; } /* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
 .clearfix { display: block; } /* End hide from IE-mac */

#box-a { width: 500px; float: left; }
#box-b { width: 200px; float: right; }

参考：Clearing a float container without source markup

和訳：構造のマークアップなしでフロートをクリアする方法

とても参考になる記事：clearfixの決定版を作る －モダンブラウザ編－

]]> http://www.hp-webmagic.com/wordpress/archives/252/feed 0 background-position：背景画像の配置 http://www.hp-webmagic.com/wordpress/archives/112 http://www.hp-webmagic.com/wordpress/archives/112#comments Wed, 25 Jun 2008 15:20:19 +0000 Web Magic http://www.hp-webmagic.com/?p=112
プロパティ

background-position

値

単位 | キーワード(下記参照)

[ left | center | right ]

[ top | center | bottom ]

[ パーセンテージ | px | em ]など

対象

すべての要素

継承の有無

なし

background-positionサンプル

横方向
.sample{
background-image: url(sample.jpg);
background-repeat: repaet-x;
background-position: left top;
(background-position: 0 0;)
}

.sample{
background-image: url(sample.jpg);
background-repeat: repaet-x;
background-position: left center;
(background-position: 0 50%;)
}

.sample{
background-image: url(sample.jpg);
background-repeat: repaet-x;
background-position: left bottom;
(background-position: 0 100%;)
}

縦方向
.sample{
background-image: url(sample.jpg);
background-repeat: repaet-y;
background-position: left top;
(background-position: 0 0;)
}

.sample{
background-image: url(sample.jpg);
background-repeat: repaet-y;
background-position: center top;
(background-position: 50% 0;)
}

.sample{
background-image: url(sample.jpg);
background-repeat: repaet-y;
background-position: right top;
(background-position: 100% 0;)
}
など

[px]を使えばさらに細かな指定可能。
]]> http://www.hp-webmagic.com/wordpress/archives/112/feed 0 background-repeat：背景画像の繰り返し http://www.hp-webmagic.com/wordpress/archives/109 http://www.hp-webmagic.com/wordpress/archives/109#comments Wed, 25 Jun 2008 15:09:09 +0000 Web Magic http://www.hp-webmagic.com/?p=109
プロパティ

background-repeat

値

キーワード(下記参照)

repeat | repeat-x | repeat-y | no-repeat

対象

すべての要素

継承の有無

なし

repeat(繰り返し)

repeat-x(横方向に繰り返し)

repeat-y(縦方向に繰り返し)

no-repeat(繰り返しなし)

background-repeatサンプル

background-positionを参照

]]> http://www.hp-webmagic.com/wordpress/archives/109/feed 0 background-image：背景画像指定 http://www.hp-webmagic.com/wordpress/archives/106 http://www.hp-webmagic.com/wordpress/archives/106#comments Wed, 25 Jun 2008 15:00:26 +0000 Web Magic http://www.hp-webmagic.com/?p=106
プロパティ

background-image

値

URL

対象

すべての要素

継承の有無

なし

ポイント

アクセシビリティ上、背景画像と文字色はユーザーに見やすい設定にする。

background-image指定サンプル

.sample{ background-image: url(sample.jpg); }

.sample{ background-image: url(images/sample.jpg); }

.sample{ background-image: url(../images/sample.jpg); }

.sample{ background-image: url(http://www.sample.jp/images/sample.jpg); }など
]]> http://www.hp-webmagic.com/wordpress/archives/106/feed 0 background-color：背景色指定 http://www.hp-webmagic.com/wordpress/archives/103 http://www.hp-webmagic.com/wordpress/archives/103#comments Wed, 25 Jun 2008 14:54:35 +0000 Web Magic http://www.hp-webmagic.com/?p=103
プロパティ

background-color

値

単位 | キーワード(下記参照)

対象

すべての要素

継承の有無

なし

ポイント

アクセシビリティ上、背景色と文字色はユーザーに見やすい設定にする。

background-color指定サンプル

p{ background-color: red; }

p{ background-color: #f00; }

p{ background-color: #ff0000; }など

サンプル

]]> http://www.hp-webmagic.com/wordpress/archives/103/feed 0 color：文字色 http://www.hp-webmagic.com/wordpress/archives/100 http://www.hp-webmagic.com/wordpress/archives/100#comments Wed, 25 Jun 2008 14:51:11 +0000 Web Magic http://www.hp-webmagic.com/?p=100
プロパティ

color

値

単位 | キーワード(下記参照)

対象

すべての要素

継承の有無

継承

ポイント

アクセシビリティ上、背景色と文字色はユーザーに見やすい設定にする。

color指定サンプル

p{ color: red; }

p{ color: #f00; }

p{ color: #ff0000; }など

サンプル

]]> http://www.hp-webmagic.com/wordpress/archives/100/feed 0 font-size：文字サイズ http://www.hp-webmagic.com/wordpress/archives/97 http://www.hp-webmagic.com/wordpress/archives/97#comments Wed, 25 Jun 2008 14:00:16 +0000 Web Magic http://www.hp-webmagic.com/?p=97 font-sizeプロパティは、文字の大きさ（フォントサイズ）を指定します。値にはキーワードの他、単位、パーセント等がありますが、相対値指定が望ましいとされます。（IEではpx指定の場合、ユーザー側でフォントサイズ切り替えが出来ない。）

プロパティ

font-size

値

単位 | キーワード(下記参照)

xx-small | x-small | small | medium | large | x-large | xx-large

対象

すべての要素

継承の有無

継承

ポイント

アクセシビリティ上、単位指定なら em | % などの相対指定が望ましいとされる。

font-sizeサンプル

font-size: xx-small;

font-size: x-small;

font-size: small;

font-size: medium;

font-size: large;

font-size: x-large;

font-size: xx-large;

]]> http://www.hp-webmagic.com/wordpress/archives/97/feed 0 font-weight：文字の太さ http://www.hp-webmagic.com/wordpress/archives/94 http://www.hp-webmagic.com/wordpress/archives/94#comments Wed, 25 Jun 2008 13:52:15 +0000 Web Magic http://www.hp-webmagic.com/?p=94 font-weightプロパティは、文字の太さを指定します。キーワード、数値指定ともに、ある段階までしか表示効果なし。またboldとbolderの表示結果に大差はありません。

プロパティ

font-weight

値

キーワード(下記参照)

normal | bold | bolder | lighter | 100-900

対象

すべての要素

継承の有無

継承

font-weightサンプル

font-weight:normal; あいうえお

font-weight:bold; あいうえお

font-weight:bolder; あいうえお

font-weight:lighter; あいうえお

font-weight:100; あいうえお

font-weight:200; あいうえお

font-weight:300; あいうえお

font-weight:400; あいうえお

font-weight:500; あいうえお

font-weight:600; あいうえお

font-weight:700; あいうえお

font-weight:800; あいうえお

font-weight:900; あいうえお

]]> http://www.hp-webmagic.com/wordpress/archives/94/feed 0 font-variant：スモールキャピタル http://www.hp-webmagic.com/wordpress/archives/91 http://www.hp-webmagic.com/wordpress/archives/91#comments Wed, 25 Jun 2008 13:46:00 +0000 Web Magic http://www.hp-webmagic.com/?p=91 font-variantプロパティは、スモールキャピタル表示指定です。スモールキャピタルはアルファベットの大文字を大文字のまま小さなサイズで表示。IE6未対応。IE7対応。

プロパティ
font-variant
値

キーワード(下記参照)

normal | small-caps

対象
すべての要素
継承の有無
継承

font-variantサンプル

FONT-VARIANT: normal;

font-variant: small-caps;

]]> http://www.hp-webmagic.com/wordpress/archives/91/feed 0 font-style：斜体文字 http://www.hp-webmagic.com/wordpress/archives/88 http://www.hp-webmagic.com/wordpress/archives/88#comments Wed, 25 Jun 2008 13:39:24 +0000 Web Magic http://www.hp-webmagic.com/?p=88
プロパティ

font-style

値

キーワード(下記参照)

normal | italic | oblique

対象

すべての要素

継承の有無

継承

現状 italic | oblique の差はなし。

]]> http://www.hp-webmagic.com/wordpress/archives/88/feed 0 font-family：フォント指定 http://www.hp-webmagic.com/wordpress/archives/85 http://www.hp-webmagic.com/wordpress/archives/85#comments Wed, 25 Jun 2008 13:29:03 +0000 Web Magic http://www.hp-webmagic.com/?p=85 font-familyプロパティは、要素内の文字書体を指定します。フォント名は複数指定が可能で、各フォント名をコンマ（,）で区切ります。ユーザーの利用環境により左から順に反映される。ＭＳ Ｐゴシックのようにスペースを含む場合は、フォント名の前後をシングルクォーテーション（’）、またはダブルクォーテション（”）の引用符で囲みます。

プロパティ

font-family

値

キーワード(下記参照)

基本 serif（明朝系）

基本 sans-serif（ ゴシック系）

基本 cursive（筆記体系）

基本 fantasy（装飾）

基本 monospace（等幅）

対象

すべての要素

継承の有無

継承

ポイント

上記タイプを指定の最後に付ける事。下記サンプル参照。

font-familyサンプル

serif 明朝系

sans-serif ゴシック系

cursive 筆記体系

fantasy 装飾

monospace 等幅

指定サンプル

p{ font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3" sans-serif ; }

p{ font-family: Arial, Helvetica, sans-serif; }
]]> http://www.hp-webmagic.com/wordpress/archives/85/feed 0 visibility：表示/非表示 http://www.hp-webmagic.com/wordpress/archives/82 http://www.hp-webmagic.com/wordpress/archives/82#comments Wed, 25 Jun 2008 06:52:02 +0000 Web Magic http://www.hp-webmagic.com/?p=82 visibilityプロパティは、指定した要素（ボックス）の表示・非表示を指定します。要素を非表示に指定しても、該当要素のボックス分のスペースは残ります。全く表示させない場合は”display:none;”を指定。

プロパティ

visibility

値

キーワード(下記参照)

visible（可視）

hidden（不可視）

collapse（不可視）

対象

すべての要素

継承の有無

継承

visibilityサンプル

サンプルvisible[サンプル]

サンプルhidden[サンプル]

サンプルcollapse[サンプル]

*collapseはIEでは機能しない

]]> http://www.hp-webmagic.com/wordpress/archives/82/feed 0 overflow；スクロール表示 http://www.hp-webmagic.com/wordpress/archives/79 http://www.hp-webmagic.com/wordpress/archives/79#comments Wed, 25 Jun 2008 06:36:15 +0000 Web Magic http://www.hp-webmagic.com/?p=79 overflowプロパティは、ブロック要素内の表示方法を指定します。よく使われるのは、任意のボックスの幅や高さを指定して、はみ出した内容はスクロール表示させると言った形です。Mac IE5 では、div要素以外のブロック要素に指定すると、表示が消えてしまいます。

プロパティ

overflow

値

キーワード(下記参照)

visible（指定範囲からあふれて表示）

hidden（指定範囲からあふれた部分は非表示）

scroll（指定範囲からあふれた場合はスクロールバー）

auto（指定範囲からあふれた場合はスクロールバー）

対象

ブロックレベル要素

継承の有無

なし

overflowサンプル

hidden
サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：

scroll
サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：

auto
サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：

visible
サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル

]]> http://www.hp-webmagic.com/wordpress/archives/79/feed 0 height：高さ指定 http://www.hp-webmagic.com/wordpress/archives/76 http://www.hp-webmagic.com/wordpress/archives/76#comments Wed, 25 Jun 2008 06:25:38 +0000 Web Magic http://www.hp-webmagic.com/?p=76
プロパティ

height

値

単位 | キーワード(auto)

対象

すべての要素

継承の有無

なし

標準準拠モードと後方互換モードの解釈について

以下はheight指定時のブラウザの解釈についての注意事項です。

  • 標準準拠モードはheightにpadding及びborderを含みません。
  • 後方互換モードはheightにpadding及びborderを含みます。

上記はレイアウトに大きく影響します。レイアウト崩れの原因になります。

関連：CSSレイアウト崩れの原因について

]]> http://www.hp-webmagic.com/wordpress/archives/76/feed 0 width：幅指定 http://www.hp-webmagic.com/wordpress/archives/73 http://www.hp-webmagic.com/wordpress/archives/73#comments Wed, 25 Jun 2008 06:24:14 +0000 Web Magic http://www.hp-webmagic.com/?p=73
プロパティ

width

値

単位 | キーワード(auto)

対象

すべての要素

継承の有無

なし

標準準拠モードと後方互換モードの解釈について

以下はwidth指定時のブラウザの解釈についての注意事項です。

  • 標準準拠モードはwidthにpadding及びborderを含みません。
  • 後方互換モードはwidthにpadding及びborderを含みます。

上記はレイアウトに大きく影響します。レイアウト崩れの原因になります。

関連：CSSレイアウト崩れの原因について

]]> http://www.hp-webmagic.com/wordpress/archives/73/feed 0 vertical-align：文字の配置(インライン) http://www.hp-webmagic.com/wordpress/archives/70 http://www.hp-webmagic.com/wordpress/archives/70#comments Wed, 25 Jun 2008 05:37:52 +0000 Web Magic http://www.hp-webmagic.com/?p=70 vertical-alignプロパティは、インライン要素、セル要素内の垂直方向の位置を指定します。

プロパティ
vertical-align
値

キーワード(下記参照)

baseline
（対象のベースラインを親要素のベースラインに揃える）

top
（対象の上辺を最も高い要素の上辺に揃える）

middle
（対象のベースラインから親要素のフォントサイズの小文字”x”の高さの半分だけ上に揃える）

bottom
（対象の下辺を行中の最も低い要素の下辺に揃える）

super
（対象のベースラインを親要素の上付き文字の位置に揃える-セル要素無効）

sub
（対象のベースラインを親要素の下付き文字の位置に揃える-セル要素無効）

text-top
（対象の上辺を親要素のフォントの上辺に揃える-セル要素無効）

text-bottom
（対象の下辺を親要素のフォントの下辺に揃える-セル要素無効）

対象
インラインレベルとテーブル-セル要素
継承の有無
なし
ポイント
IEで使用の際はレイアウトに注意。Firefox等は厳密。

vertical-alignサンプル

サンプル配置イメージサンプルサンプル配置baseline

サンプル配置イメージサンプルサンプル配置top

サンプル配置イメージサンプルサンプル配置middle

サンプル配置イメージサンプルサンプル配置bottom

サンプル配置イメージサンプルサンプル配置super

サンプル配置イメージサンプルサンプル配置sub

サンプル配置イメージサンプルサンプル配置text-top

サンプル配置イメージサンプルサンプル配置text-bottom

]]> http://www.hp-webmagic.com/wordpress/archives/70/feed 0 line-height：行間指定 http://www.hp-webmagic.com/wordpress/archives/67 http://www.hp-webmagic.com/wordpress/archives/67#comments Wed, 25 Jun 2008 05:30:00 +0000 Web Magic http://www.hp-webmagic.com/?p=67 line-heightプロパティは行の高さを指定しますが（行送り）、正確には要素（ボックス）の上下辺からテキストまでの距離を意味します。また、line-heightプロパティの値にパーセント指定をした親ボックス内に<h>タグを記述すると、見出しの文字の一部が欠ける場合あり。（値が小さい場合）

プロパティ

line-height

値

数値 | 単位

対象

すべての要素

継承の有無

継承

line-heightサンプル

line-height:1.2
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

lineline-height:2em
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

lineline-height:250%
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

]]> http://www.hp-webmagic.com/wordpress/archives/67/feed 0 white-space：入力通りに表示 http://www.hp-webmagic.com/wordpress/archives/64 http://www.hp-webmagic.com/wordpress/archives/64#comments Wed, 25 Jun 2008 03:24:03 +0000 Web Magic http://www.hp-webmagic.com/?p=64 white-spaceプロパティは、半角スペースやタブや行送りなど入力通りに表示させる指定です。一般的に折り返しを  ”する”  ”しない”  などの制御（縮小化しても電話番号を折り返さない等）や、コードやソースを記述する際などに使用。

指定ボックスの幅の制御はoverflowプロパティで行う。

プロパティ

white-space

値

キーワード

normal（空白類文字をひとつの半角スペースにまとめ、折り返し）

pre（空白類文字をそのまま表示、折り返さない ）

nowrap（空白類文字をひとつの半角スペースにまとめ、折り返さない ）

pre-wrap（***）

pre-line（***）

対象

すべての要素

継承の有無

継承

white-spaceサンプル

normal - abcde fghij klmno pqrst uvwxy z. abcdefghijklmnopqrstuvwxyz. a b c d e f g h i j k l m n o p q r s t u v w x y z.

pre -
abcde fghij klmno pqrst uvwxy z.
abcdefghijklmnopqrstuvwxyz.
a b c d e f g h i j k l m n o p q r s t u v w x y z.

nowrap - abcde fghij klmno pqrst uvwxy z. abcdefghijklmnopqrstuvwxyz. a b c d e f g h i j k l m n o p q r s t u v w x y z.

]]> http://www.hp-webmagic.com/wordpress/archives/64/feed 0 z-index：要素の重なり http://www.hp-webmagic.com/wordpress/archives/61 http://www.hp-webmagic.com/wordpress/archives/61#comments Wed, 25 Jun 2008 02:55:36 +0000 Web Magic http://www.hp-webmagic.com/?p=61
プロパティ

z-index

値

数値

対象

position指定要素

継承の有無

なし

]]> http://www.hp-webmagic.com/wordpress/archives/61/feed 0 clear：回り込み解除 http://www.hp-webmagic.com/wordpress/archives/58 http://www.hp-webmagic.com/wordpress/archives/58#comments Wed, 25 Jun 2008 02:47:23 +0000 Web Magic http://www.hp-webmagic.com/?p=58
プロパティ

clear

値

キーワード(下記参照)

left | right | both | none

対象

ブロックレベル要素

継承の有無

なし

]]> http://www.hp-webmagic.com/wordpress/archives/58/feed 0 float：配置指定 http://www.hp-webmagic.com/wordpress/archives/55 http://www.hp-webmagic.com/wordpress/archives/55#comments Wed, 25 Jun 2008 02:40:52 +0000 Web Magic http://www.hp-webmagic.com/?p=55
プロパティ

float

値

キーワード(下記参照)

left | right | none

対象

すべての要素

継承の有無

なし

]]> http://www.hp-webmagic.com/wordpress/archives/55/feed 0 position：配置指定 http://www.hp-webmagic.com/wordpress/archives/53 http://www.hp-webmagic.com/wordpress/archives/53#comments Wed, 25 Jun 2008 02:30:51 +0000 Web Magic http://www.hp-webmagic.com/?p=53
プロパティ

position

値

キーワード(下記参照)

static | relative | absolute | fixed

対象

すべての要素

継承の有無

なし

static | 静的（デフォルト）

relative | 相対配置（続くボックスに影響あり）

absolute | 絶対配置（続くボックスに影響を与えない）

fixed | 固定

]]> http://www.hp-webmagic.com/wordpress/archives/53/feed 0 display：表示形式 http://www.hp-webmagic.com/wordpress/archives/50 http://www.hp-webmagic.com/wordpress/archives/50#comments Wed, 25 Jun 2008 02:26:46 +0000 Web Magic http://www.hp-webmagic.com/?p=50 displayプロパティは、各要素の表示形式を指定します。非表示にする、ブロック要素に変換する、インライン要素に変換するといった指定ができます。

プロパティ

display

値

キーワード(下記参照)

inline（インライン要素にする）

block（ブロック要素にする）

list-item（リスト要素のli要素にする ）

none（非表示）

対象

すべての要素

継承の有無

なし

]]> http://www.hp-webmagic.com/wordpress/archives/50/feed 0 border：線の指定 http://www.hp-webmagic.com/wordpress/archives/47 http://www.hp-webmagic.com/wordpress/archives/47#comments Wed, 25 Jun 2008 02:14:43 +0000 Web Magic http://www.hp-webmagic.com/?p=47 borderプロパティは、ボックスの上下左右のボーダー領域をコントロールします。指定できるのは線の太さ、線の種類、線の色。ボーダー領域については、下記サンプル図を参照。

ボックスモデルサンプル図

一括指定

border

border-top

border-bottom

border-right

border-left

個別指定/線の太さ

border-width

border-top-width

border-bottom-width

border-right-width

border-left-width

個別指定/線の色

border-color

border-top-color

border-bottom-color

border-right-color

border-left-color

個別指定/線の種類

border-style

border-top-style

border-bottom-style

border-right-style

border-left-style

値 / 線の太さ

長さの単位 “px” が一般的

thin（細め）

medium（標準）

thick（太い）

値 / 線の種類

none（なし）

hidden（なし）

dotted（点線）

dashed（破線）

solid（実線）

double（二重線）

groove（窪み）

ridge（隆起）

inset（内側に窪み）

outset（外側に窪み）

値 / 線の色

RGB値、カラーネーム

transparent（透過）

対象

すべての要素

継承の有無

なし

ポイント

標準準拠モードでは、borderはwidthに含まない。

transparentは古いタイプのブラウザでは一部未対応。

border-styleサンプル

dotted

dashed

solid

double

groove

ridge

inset

outset

]]> http://www.hp-webmagic.com/wordpress/archives/47/feed 0 padding：余白指定 http://www.hp-webmagic.com/wordpress/archives/44 http://www.hp-webmagic.com/wordpress/archives/44#comments Wed, 25 Jun 2008 02:05:42 +0000 Web Magic http://www.hp-webmagic.com/?p=44 paddingプロパティは、ボックスの上下左右のパディング領域（borderより内側の余白）をコントロールします。背景画像とテキストの配置、リンク領域の指定等でも使用します。パディング領域については、下記サンプル図を参照。

ボックスモデルサンプル図

プロパティ

padding

padding-top

padding-bottom

padding-right

padding-left

値

単位

対象

すべての要素

継承の有無

なし

ポイント

標準準拠モードではpaadingはwidthに含まない

padding一括指定と指定場所

padding: 10px 20px 30px 40px;
上 10px,  右20px,  下 30px,  左 40px
--------------------------------------

padding: 10px 20px 30px;
上 10px,  左右 20px,  下 30px
--------------------------------------

padding: 10px 20px;
上下 10px,  左右 20px
--------------------------------------

padding: 10px;
上下左右 10px
]]> http://www.hp-webmagic.com/wordpress/archives/44/feed 0 margin：余白指定 http://www.hp-webmagic.com/wordpress/archives/41 http://www.hp-webmagic.com/wordpress/archives/41#comments Wed, 25 Jun 2008 02:00:04 +0000 Web Magic http://www.hp-webmagic.com/?p=41 marginプロパティは、ボックスの上下左右のマージン領域（一番外側の余白）をコントロールします。また、”margin-right”"margin-left”の値に”auto”を指定する事でボックスを中央に寄せます。（一部ブラウザではbodyに”text-align:center;”を指定しなければならない。）マージン領域については、下記サンプル図を参照。

ボックスモデルサンプル図

プロパティ

margin

margin-top

margin-bottom

margin-right

margin-left

値

単位

対象

すべての要素

継承の有無

なし

ポイント

float指定と併用する際、float指定側にmarginを取るとIEで余分な余白が生じる。

margn一括指定と指定場所

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

margin: 10px 20px 30px;
上 10px,  左右 20px,  下 30px
--------------------------------------

margin: 10px 20px;
上下 10px,  左右 20px
--------------------------------------

margin: 10px;
上下左右 10px
]]> http://www.hp-webmagic.com/wordpress/archives/41/feed 0 text-transform：大文字小文字(英単語) http://www.hp-webmagic.com/wordpress/archives/36 http://www.hp-webmagic.com/wordpress/archives/36#comments Tue, 24 Jun 2008 09:02:48 +0000 Web Magic http://www.hp-webmagic.com/?p=36 text-transformプロパティはアルファベットの小文字を大文字に、大文字を小文字に変換表示します。音声ブラウザなどアクセシビリティを考慮する際は、text-transformを指定しましょう。

音声ブラウザは英単語が大文字の場合、文字を一文字ずつ読み上げます。例えば”dog”の場合、大文字で”DOG”と記述すると音声ブラウザは”D（ディー）”、”O（オー）”、”G（ジー）”と読み上げます。

プロパティ

text-transform

値

キーワード

capitalize（一文字目を大文字に変換）

uppercase（すべてを大文字に変換）

lowercase（すべてを小文字に変換）

none（なし）

対象

すべての要素

継承の有無

継承

text-transformサンプル

(X)HTML上での記述”abcde fghij capitalize”と小文字で記述しています。

abcde fghij capitalize

abcde fghij uppercase

abcde fghij lowercase

]]> http://www.hp-webmagic.com/wordpress/archives/36/feed 0 word-spacing：英単語間隔 http://www.hp-webmagic.com/wordpress/archives/33 http://www.hp-webmagic.com/wordpress/archives/33#comments Tue, 24 Jun 2008 08:53:57 +0000 Web Magic http://www.hp-webmagic.com/?p=33 word-spacingプロパティは半角スペースで区切られた単語と単語の間隔を指定します。半角スペースで区切られた単語間隔なので、主に欧文テキストに使用します。テキストの文字と文字との間隔（字間）のはletter-spacingプロパティです。

プロパティ

word-spacing

値

単位

対象

すべての要素

継承の有無

継承

word-spacingサンプル

word-spacing:0.5em abc def ghi

word-spacing:1em abc def ghi

word-spacing:20px abc def ghi

]]> http://www.hp-webmagic.com/wordpress/archives/33/feed 0