★タグ
●preタグ
・・・<pre>～</pre>で囲まれた範囲のソースに記述されたスペース・改行、タブを、そのまま等幅フォントで表示します。
★CSS
●position
・・・ボックスの配置方法（基準位置）が、絶対位置か相対位置かを指定する際に使用します。
positionのプロパティで決めるのは配置方法（基準位置）だけです。実際の表示位置の指定は,top,right,bottom,left,（←※これらの値は数値pxとかautoです。）で指定します。
○{ position: static; }・・・特に配置方法を指定しません。この時にはtop,right,bottom,left,は適用されません。標準位置です。
<p><position: static<span class="statictest"> stalic</sapn></p>
position: static stalic
とりあえずCSSの設定は、
/*--.statictest設定----------------------------------------------*/
.statictest {
color: #ffffff;
background-color: #0000ff;
padding: 5px;
position: static;
}
○{ position: relative; }・・・配置方法を相対位置で配置します。positionでstaticを使用した時に表示される位置が規準位置になります。
<p>position: relative<span class="relativetest"> relative</sapn></p>
position: relative relative
とりあえずCSSの設定は、
/*--.relativetest設定----------------------------------------------*/
.relativetest {
color: #ffffff;
background-color: #0000ff;
padding: 5px;
position: relative;
left: 10px;
top: 10px;
}
leftで右に行きます。topで下にいきます。難しすぎてよくわかりませんね。はぁ・・・
標準位置からtopで上に10px空間が出来るって考えたほうがわかりやすです。
○{ position: absolute; }・・・絶対位置での配置になります。親ボックスにpositionプロパティの値がstatic意外が指定されてる場合、親ボックスの左上が基準位置となります。
親ボックスにpositionプロパティの値がstatic意外が指定されていない場合、ウィンドウ全体の左上が基準になります。
<p>position: absolute<span class="absolutetest"> absolute</sapn></p>
position: absolute absolute
とりあえずCSSの設定は、
/*--.absolutetest設定----------------------------------------------*/
.absolutetest {
color: #ffffff;
background-color: #0000ff;
padding: 5px;
position: absolute;
left: 10px;
top: 10px;
}
親ボックスにstaticを指定していなのでこうなります。ウィンドウの左上に表示されてます。（※見えない場合場合は一番上まで画面をスクロールさせてください。）
○{ position: fixed; }・・・絶対位置での配置になります。absoluteとの違いは、スクロールしても位置が固定されたままとなります。
<p>position: fixed<span class="fixedtest"> fixed</sapn></p>
position: fixed fixed
とりあえずCSSの設定は、
/*--.fixedtest設定----------------------------------------------*/
.fixedtest {
color: #ffffff;
background-color: #0000ff;
padding: 5px;
position: fixed;
left: 10px;
top: 50px;
}
親ボックスにstaticを指定していなのでこうなります。ウィンドウの左上に表示されてます。あのしつこくついてくるのはこれで作られてたんですね～
●z-index・・・position: absoluteかrelativedでしたとき重ね合わせになる順番を指定します。数字で「1」「2」「3」・・・またはautoで指定します。（たぶんautoがデフォルトです。）
（※「1」が一番下になるって考えです。）
★特殊記号
<で<
>で>
で半角スペース
&+&の抜かした文字(※gt;とかのことです。）で<とか>とか を表示させることができます。
PR
