Esprit's Style

〆 余白を設定します

Padding（内側の余白）とMargin（外側の余白）とBorder（枠線）について

１．外側の余白の 設定例
　設定方法がいくつかあります。
　　margin{ 1px 2px 3px 4px };　/* 上=1px; 右=2px; 下=3px; 左=4px */
　　margin{ 1px 2px };　　　　　　　/* 上下＝1px; 右左＝2px */
　　margin{ 1px };　　　　　　　　　　/* 上右下左＝1px */
　　※設定の順番は、時計回りと覚えてください
　　※pxではなく、autoを指定するとセンタリングされます
　　　（標準準拠モードの場合）

@sample.css p{ margin:0px; } a{ margin:3px 18px; } td{ margin:18px 7px 10px 21px; }

CCS 外側の余白 　File　　Edit　　Tool　　Help

２．内側の余白の 設定例
　設定方法がいくつかあります。
　　padding{ 1px 2px 3px 4px };　/* 上=1px; 右=2px; 下=3px; 左=4px */
　　padding{ 1px 2px };　　　　　　　/* 上下＝1px; 右左＝2px */
　　padding{ 1px };　　　　　　　　　　/* 上右下左＝1px */

@sample.css p{ padding:0px; } span{ padding:3px 15px; } body{ padding:18px 7px 10px 21px; }

CCS 内側の余白 　File　　Edit　　Tool　　Help

３．位置の調整（行揃え）
　　 text-align : left / center / right / justify;
　　　　　　　　　　　　　　　　 /* 左寄せ、中央、右寄せ、両端揃え*/

@sample.css p{ text-align:right; } div{ text-align:center; } span{ text-align:left; }		Skylark Group Restaurats 　File　　Edit　　Tool　　Help ガスト 藍屋 バーミヤン

４．位置の調整（縦位置揃え）
　　 vertical-align : top / middle / bottom; /* 上寄せ,中央揃え,下寄せ */
　　　　　　　　　　　　　 super / sub; /* 上付き,下付き */

@sample.css p{ vertical-align:top; } div{ vertical-align:middle; } span{ vertical-align:bottom; }

Magurebu Three Country 　File　　Edit　　Tool　　Help チュニジア アルジェリア モロッコ

５．サイズの調節
　　 width : ??px / ??% / auto; /* 幅 */
　　 height : ??px / ??% / auto; /* 高さ */
　　画像(img)やテーブル(table)などさまざまな要素に設定可能です。

@sample.css p{ width : 10px; } div{ height : 50%; }

Africa 　File　　Edit　　Tool　　Help マダガスカル モザンビーク ジンバブエ 南ア

６．配置位置の調節
　　 possition : absolute / relative; /* 絶対的な位置 / 相対的な位置*/
　　　　　　　　　　static; /* デフォルト値 */
　　　　　　　　　　fixed; /* 絶対的な位置に固定する */
　　 top: ??px; /* 上からの距離 */
　　 right: ??px; /* 右からの距離 */
　　 bottom: ??px; /* 下からの距離 */
　　 left: ??px; /* 左からの距離 */

@sample.css p{ position:absolute; top:50px; left:100px; }

Posison 　File　　Edit　　Tool　　Help

７．文字の回り込み
　　 float : left / right; /* 左 / 右 */
　　 clear : left / right / both; /* 設定した回り込みの解除 */
　　　　　　　 /* 左を解除 / 右を解除 / 両方を解除 */
指定した要素を左または右へ配置し、その反対側に続く要素を回り込ませる。 ブラウザによって動作がまちまちなので使うと結構はまるので、注意。

@sample.css img{ float:right; }

Simbol Mark 　File　　Edit　　Tool　　Help ピースマーク 　ヴェトナム戦争(1962年頃～1975年)反対のシンボルマーク。 親がふたりの子供の手を引いている図柄とも平和の象徴ハトの足を シンボル化したものとも言われています。 ダビデの星 　ユダヤ人のシンボルマーク。 　イスラエルの国旗やユダヤ人がペンダントとして使われています。 天皇家の菊の家紋 　鎌倉時代の初期の後鳥羽上皇が愛用していたことに由来。 天皇家のみが１６弁の菊紋を利用できる。 徳川家の家紋 　三葉葵紋。水戸黄門の印籠。 やたがらす 　熊野大社の家紋。サッカー日本代表のシンボルマーク。 マリファナ 　大麻のシンボルマーク。 　たまに意味も判らずに身に付けてる奴がいるが、、 赤十字・赤新月 　世界各国で救護活動を行っている赤十字。 イスラム諸国に配慮した赤新月といわずと知れた赤十字。 つい最近新しいマークができたような。。

８．非表示にする
　　 display : none; /* 表示しない, 領域も確保しない */
　　 visibility: hidden; /* 表示しない 領域は確保する*/

@sample.css p{ visibility: hidden; }

display / visibility 　File　　Edit　　Tool　　Help ↓　↓　消した場合　↓　↓ 　　　SHITAGOKORO ↑↑↑↑↑↑↑↑↑↑↑↑↑ ↓　↓　消さない場合　↓　↓ 　　　SHITAGOKORO ↑↑↑↑↑↑↑↑↑↑↑↑↑

９．重なる順序を指定する
　　 z-index: 重なる順序;