Web制作 ウェブマジック » ボックス指定 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 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 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 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