Home > ★Lesson⇒ menu  ★html_Lesson⇒  01Spell Lesson > 02sample  ★css_Lesson⇒  01Spell Lesson№1 > 02Spell Lesson№2 > 03sample 

●CSSのサンプル例→ > №01 > №02 > №03 > №04 > №05 > №06 > №00 > END

04css_outline(アウトライン)+css_img(画像)+css_link(リンク

04css_outline(アウトライン)+css_img(画像)+css_link(リンク)

01outline-color

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>

※★sample
★①

http://shin-sapporo.com/

★②01outline-colorサンプル

02outline-style

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>

※★sample
★①

http://shin-sapporo.com/

★②02outline-styleサンプル

03outline-width

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>

※★sample

①http://shin-sapporo.com/

★①03outline-widthサンプル

04outline

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>

※★sample
★①04outlineサンプル

05border

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>

※★sample
★①05borderサンプル

06clip

clipプロパティは、ブロックを切抜き表示を指定します。 適用要素:position:absolute・fixedの要素

解説
auto ボックス全体を表示(初期値)
rect(① ② ③ ④) 上①下③はボックスのボーダーの上辺からの距離、右②左④はボックスのボーダーの左辺からの距離を指定します。例は下記表を参照して下さい。

WEB DESIGN LAB


※CSS
img {
	position: absolute;
	clip: rect(0px 90px 80px 10px);
}

※HTML
<p><img src="rect.png" alt="60 Plus One" /></p>

60 Plus One

※★sample
★①06clipサンプル

07vertical-align

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%;
}

※★sample
★①07vertical-alignサンプル

08color

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

※★sample
★①08colorサンプル

09text-decoration

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;
}

※★sample
★①09text-decorationサンプル

10border-bottom

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;
}


※★sample
★①10border-bottomサンプル

11background-color

background-colorプロパティは、背景色を指定します。 ここでは、リンクに対する背景色の設定を紹介します。 適用要素:すべての要素

解説
transparent 背景を透明にする(初期値)
背景色 カラーコード、キーワード
色見本はこちらを参照下さい
※CSS

CSS
a:hover {
	background-color: #d49fc2;
	text-decoration: none;
}

※★sample
★①11background-colorサンプル

12position

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;
}


※★sample
★①12positionサンプル

13outline

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;
}


※★sample
★①13outlineサンプル