BreathTake/ホームページ作成の小技・CSS篇

*
ホームページ作成の小技タイトル・CSS篇・イメージ写真
CSS-その他のポイント

CSS-豆知識

z-index


整数値で指定:重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。
auto:親要素と同じ階層になります。これが初期値です。
■使用例
スタイルシート部分は外部ファイル(sample.css)に記述。
p.sample {
  color: #000000; background-color: #99cc00;
  position: relative; top: 50px; z-index: 2;
}
img.sample {
  position: relative; top: -50px; z-index: 1;
}

セレクタの使用方法


■記述例
/* 共通するスタイルは通常セレクタで定義 */
h1{
  font-weight : bold ;
  font-size : 180% ;
  margin : .8em 0 ;
}
/* 子孫セレクタでスタイルの適用を使い分ける */
body#TopPage h1 {
  color : darkred ;
  border : thick groove #c00 ;
  padding : 0 .4em 0 0 ;
  text-align : right ;
}
body#Weblog h1 {
  color : navy ;
  border : solid navy ;
  border-width : 1px 4em 0 4em ;
  text-align : center ;
}
<body id="TopPage">
  <h1>ウェブサイト</h1>
<body id="Weblog">
  <h1>ウェブログ</h1>

ボッックスの記述例


<div style="font-size:10pt;color:#999999;font-weight:600;text-align:left;">
<div style="border-style:solid;border-color:#c0c0c0;border-width:1px;padding:5px;margin:0px;font-size:10pt;color:#999999;font-weight:600;text-align:left;">
<div style="border-style:solid;border-color:#696969;border-width:1px;padding:2px;margin:0px;">
<div style="border-style:solid;border-width:1px;border-color:#000000;padding:10px">
<div style="border-style:solid;border-width:1px;border-color:#ffffff;background-color:#ffffff;color:#EF4123;font-size:10pt;font-weight:800;padding:0px;float:left;"></div>
<div class="category_contents" style="padding-left:20px;padding-right:20px;">
<div style="border-style:solid;border-color:#c0c0c0;border-width:1px;padding:5px;margin:0px;font-size:10pt;color:#999999;font-weight:600;text-align:left;">

@none
ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。これが初期値です。
Ahidden
ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合はhiddenの値が優先されます。
Bsolid
1本線で表示されます。
Cdouble
2本線で表示されます。
Dgroove
立体的に窪んだ線で表示されます。
Eridge
立体的に隆起した線で表示されます。
Finset
上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。
Goutset
上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。
Hdashed
破線で表示されます。
Idotted
点線で表示されます。

Copyright © 2011 BreathTake All Rights Reserved