Embedded Files
縦/横幅（線）と線（枠線）のスタイル
縦/横幅（線）と線（枠線）のスタイル
<p>タグ<h>タグ<table>タグ等の幅と線に関するスタイルについてだよ
幅の長さ
横幅
width: 40%
縦幅（高さ）
height: 100px
値：pxやptなどの単位付きの数値や%
%で指定する場合は、親要素に対する割合
枠線のスタイル
色
border-color:
#999900 #009999 #990099 #009900
もしくは
border-top-color:, border-bottom-color:,
border-left-color:, border-right-color:
値：#ff0000やRedなどの色を表す値
太さ
border-width: 6px 5px 8px 4px
もしくは
border-top-width:, border-bottom-width:,
border-left-width:, border-right-width:
値：thin, medium, thick, pxやptなどの単位付きの数値
種類
border-style: solid
もしくは
border-top-style:, border-bottom-style:,
border-left-style:, border-right-style:
値：none, solid, double, groove, ridge,
inset, outset, dotted, dashed
top,bottom,left,rightを入れずに
border-color
border-width
border-style のみで指定したとき、
スペースで区切って４方向の値を指定。
指定する値の数
１つの場合：上下左右
２つの場合：上下 / 左右
３つの場合：上 / 左右 / 下
４つの場合：上 / 右 / 下 / 左
のように設定されます。
<HEAD>
<STYLE type="text/css">
P {
width: 80px; /* pの幅 */
height: 150px; /* pの高さ */
border-width: 8px; /* pの枠線太さ */
border-color: #ff00ff /* pの枠線色 */
}
.f1{ border-style: none }
.f2{ border-style: solid }
.f3{ border-style: double }
.f4{ border-style: dotted}
.f5{ border-style: groove }
.f6{ border-style: ridge}
.f7{ border-style: dashed}
.f8{ border-style: outset}
.f9{ border-style: inset}
</STYLE>
</HEAD>
<BODY>
<TABLE><TR>
<TD><P class="f1">none</P></TD>
<TD><P class="f2">solid</P></TD>
<TD><P class="f3">double</P></TD>
</TR><TR>
<TD><P class="f4">dotted</P></TD>
<TD><P class="f5">groove</P></TD>
<TD><P class="f6">ridge</P></TD>
</TR><TR>
<TD><P class="f7">dashed</P></TD>
<TD><P class="f8">outset</P></TD>
<TD><P class="f9">inset</P></TD>
</TR></TABLE>
<BR><BR>
</BODY>
線の種類一覧 ↑
上画像のソース
→
幅や枠線のスタイル使用の
ソース例として参照してね。
枠線をまとめて設定する
ｾﾚｸﾀ{ border: solid 4px #cc0000 }
もしくは
ｾﾚｸﾀ{
border-top: solid 2px #0000ff;
border-bottom: double 4px #0000cc;
border-left: groove 6px #000066;
border-right: dashed 8px #000000;
}
枠に関して利用できる値を必要なだけ、
任意の順序でスペースで区切って書くことができる！！
Page updated
Google Sites
Report abuse