●CSSのサンプル例→ >
№00 >
№01 >
№02 >
№03 >
№04 >
№05 >
№06 >
№07 >
END
04css_outline(アウトライン)+css_img(画像)+css_link(リンク
サンプル例
●01outline-color(アウトライン)
●02outline-style(アウトライン)
●03outline-width(アウトライン)
●04outline(アウトライン)
●0501border(画像)
●0602clip(画像)
●0703vertical-align(画像)
●0801color(リンク)
●0902text-decoration(リンク)
●1003border-bottom(リンク)
●1104background-color(リンク)
●1205position(リンク)
●1306outline(リンク)
END
04css_outline(アウトライン)+css_img(画像)+css_link(リンク)
outline-colorプロパティは、アウトラインの色を指定します。
適用要素:すべての要素
値 |
解説 |
色 |
カラーコード等 |
invert |
アウトラインが表示する部分の色を反転させた色にします |
※CSS
a {
outline-width: 3px;
outline-style: double;
outline-color: #9fb7d4;
}
※HTML
<p><a href="http://shin-sapporo.com/">http://shin-sapporo.com/</a></p>
|
▲Top
outline-styleプロパティは、アウトラインのスタイルを指定します。
適用要素:すべての要素
値 |
解説 |
none |
なし(初期値) |
solid |
実線 |
double |
二重線 |
groove |
谷型の線 |
ridge |
山型の線 |
inset |
凹型の線 |
outset |
凸型の線 |
dotted |
点線 |
dashed |
破線 |
※CSS
a {
outline-width: 1px;
outline-style: dotted;
outline-color: #9fb7d4;
}
※HTML
<p><a href="http://shin-sapporo.com/">http://shin-sapporo.com/</a></p>
|
▲Top
outline-widthプロパティは、アウトラインの太さを指定します。
適用要素:すべての要素
値 |
解説 |
実数値+単位 |
アウトラインの太さを数値(px等の単位をつけて)で設定 |
thin |
細線 |
medium |
中間(初期値) |
thick |
太線 |
※CSS
CSS
a.link3 {
outline-width: 3px;
outline-style: dotted;
outline-color: #9fb7d4;
}
※HTML
<p><a class="link3" href="http://shin-sapporo.com/">
http://shin-sapporo.com/</a></p>
|
▲Top
outlineプロパティは、アウトラインに関する設定をまとめて指定します。
適用要素:すべての要素
値 |
outline-colorプロパティで指定する値 |
outline-widthプロパティで指定する値 |
outline-styleプロパティで指定する値 |
※CSS
CSS
a.link3 {
outline: 1px solid #9fb7d4;
}
※HTML
<p><a class="link3" href="http://shin-sapporo.com/">
http://shin-sapporo.com/</a></p>
|
▲Top
borderプロパティは、上下左右のボーダーに関する設定をまとめて指定します。
上下左右のボーダーに対して別々に設定を行いたい場合は、下記「個別に指定」を参照して下さい。
ここでは、画像に対するボーダーの設定を紹介します。
適用要素:すべての要素
値 |
border-colorプロパティで指定する値 |
border-widthプロパティで指定する値 |
border-styleプロパティで指定する値 |
※CSS
個別に指定
border-top: solid 1px #9fb7d4;(上)
border-right: solid 1px #9fb7d4;(右)
border-bottom: solid 1px #9fb7d4;(下)
border-left: solid 1px #9fb7d4;(左)
CSS
img {
border: none;
}
HTML
<p><img src="sLogo.gif" alt="WEB DESIGN LAB" /></p>
CSS
img {
border: 2px solid #d49fc2;
}
※HTML
<p><img src="sLogo.gif" alt="WEB DESIGN LAB" /></p>
|
▲Top
clipプロパティは、ブロックを切抜き表示を指定します。
適用要素:position:absolute・fixedの要素
値 |
解説 |
auto |
ボックス全体を表示(初期値) |
rect(① ② ③ ④) |
上①下③はボックスのボーダーの上辺からの距離、右②左④はボックスのボーダーの左辺からの距離を指定します。例は下記表を参照して下さい。 |
※CSS
img {
position: absolute;
clip: rect(0px 90px 80px 10px);
}
※HTML
<p><img src="rect.png" alt="60 Plus One" /></p>
|
▲Top
vertical-alignプロパティは、縦方向の位置を指定します。
ここでは、画像に対する縦方向の位置の設定を紹介します。
適用要素:インライン要素、th要素、td要素
値 |
解説 |
baseline |
親ボックスのベースラインに揃えます(初期値) |
top |
ボックスの上位置に揃えます |
middle |
ボックスの中心位置に揃えます |
bottom |
ボックスの下位置に揃えます |
text-top |
フォントの上位置に揃えます |
text-bottom |
フォントの下位置に揃えます |
super |
上付き文字で表示 |
sub |
下付き文字で表示 |
数値 |
数値+単位、%値 |
※th要素、td要素は、text-top、text-bottom、super、subは無効です。 |
※CSS
CSS①
img1 {
vertical-align: baseline;
}
CSS②
img2 {
vertical-align: top;
}
CSS③
img3 {
vertical-align: middle;
}
CSS④
img4 {
vertical-align: bottom;
}
CSS⑤
img5 {
vertical-align: -10px;
}
CSS⑥
img6 {
vertical-align: 150%;
}
|
▲Top
colorプロパティは、文字色の指定をします。
ここでは、リンクに対する文字色の設定を紹介します。
適用要素:すべての要素
※CSS
CSS
a {
color: #9fb7d4;
}
a:link {
color: #9fb7d4;
}
a:visited {
color: #9fb7d4;
}
a:hover {
color: #FF6600;
}
a:active {
color: #d49fc2;
}
a:focus {
outline: none;
}
※HTML
|
▲Top
text-decorationプロパティは、テキストの装飾を指定します。
ここでは、リンクの装飾の設定を紹介します。
適用要素:すべての要素
値 |
解説 |
none |
装飾なし(初期値) |
underline |
テキストに下線 |
overline |
テキストに上線 |
line-through |
テキストに取り消し線 |
blink |
テキストを点滅させる |
※CSS
CSS①
a {
text-decoration: none;
}
a:hover {
color: red;
text-decoration: none;
}
CSS②
a {
text-decoration: underline;
}
a:hover {
color: red;
text-decoration: none;
}
CSS③
a {
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
|
▲Top
border-bottomプロパティは、下のボーダーに関する設定をまとめて指定します。
ここでは、リンク下線の設定を紹介します。
適用要素:すべての要素
値 |
border-colorプロパティで指定する値 |
border-widthプロパティで指定する値 |
border-styleプロパティで指定する値 |
※CSS
CSS①
a {
text-decoration: none;
border-bottom: 1px solid #d49fc2;
}
CSS②
a {
text-decoration: none;
border-bottom: 1px dotted #d49fc2;
}
CSS③
a {
text-decoration: none;
border-bottom: 1px dashed #d49fc2;
}
CSS④
a {
text-decoration: none;
border-bottom: 1px double #d49fc2;
}
|
▲Top
background-colorプロパティは、背景色を指定します。
ここでは、リンクに対する背景色の設定を紹介します。
適用要素:すべての要素
値 |
解説 |
transparent |
背景を透明にする(初期値) |
背景色 |
カラーコード、キーワード 色見本はこちらを参照下さい |
※CSS
CSS
a:hover {
background-color: #d49fc2;
text-decoration: none;
}
|
▲Top
positionプロパティは、ボックス表示位置を指定します。
ここでは、リンクに対する位置の設定を紹介します。
適用要素:すべての要素
値 |
解説 |
static |
通常の位置(初期値) ※top,right,bottom,leftで位置を指定することはできません |
relative |
通常の位置を基準とした相対的な配置 |
absolute |
ウィンドウまたは親ブロックを基準とした絶対的な配置 |
fixed |
ウィンドウを基準とした絶対的な配置および位置の固定 |
表示させる位置の指定 |
値 |
解説(0の場合単位はなくても可。初期値はauto) |
top |
数値+単位、%値(上からの距離) |
right |
数値+単位、%値(右からの距離) |
bottom |
数値+単位、%値(したからの距離) |
left |
数値+単位、%値(左からの距離) |
※CSS
CSS
a:hover {
position: relative;
top: 1px;
left: 1px;
text-decoration: none;
}
|
▲Top
outlineプロパティは、アウトラインに関する設定をまとめて指定します。
ここでは、リンクアウトラインの設定を紹介します。
適用要素:すべての要素
値 |
outline-colorプロパティで指定する値 |
outline-widthプロパティで指定する値 |
outline-styleプロパティで指定する値 |
※CSS
*IEは標準モードでのみ機能(IE7以下は未対応のため何も表示されません)。
*以下サンプルのアウトラインはアクティブの状態の例として表示しています。
CSS①
a:active {
outline: none;
}
CSS②
a:active {
outline: 1px solid #d49fc2;
}
CSS③
a:active {
outline: 1px dotted #d49fc2;
}
CSS④
a:active {
outline: 1px dashed #d49fc2;
}
CSS⑤
a:active {
outline: 3px double #d49fc2;
}
CSS⑥
a:active {
outline: 3px groove #d49fc2;
}
CSS⑦
a:active {
outline: 3px ridge #d49fc2;
}
CSS⑧
a:active {
outline: 3px inset #d49fc2;
}
CSS⑨
a:active {
outline: 3px outset #d49fc2;
}
|
▲Top