（初級編３）
|
初級編３では、実際の効果を見ながら、プロパティと値について説明します。 |
-
単語間、文字間の間隔を指定します。
<DIV STYLE="
word-spacing: 10pt
">word-spacing: 10pt</DIV>
<DIV STYLE="
letter-spacing: 10pt
">letter-spacing: 10pt</DIV>
|
結果は以下のようにになります。
|
word-spacing: 10pt
letter-spacing: 10pt
|
テキストの装飾を指定します。
<DIV STYLE="
text-decoration: underline
">text-decoration: underline</DIV>
<DIV STYLE="
text-decoration: overline
">text-decoration: overline</DIV>
<DIV STYLE="
text-decoration: line-through
">text-decoration: line-through</DIV>
<DIV STYLE="
text-decoration: blink
">text-decoration: blink</DIV>
|
結果は以下のようにになります。
|
text-decoration: underline
text-decoration: overline
text-decoration: line-through
text-decoration: blink
|
縦位置の配置を指定します。
<SPAN STYLE="
font-size: xx-large
">愛</SPAN>
<SPAN STYLE="
vertical-align: top
">vertical-align: top </SPAN>
<SPAN STYLE="
vertical-align: middle
">vertical-align: middle </SPAN>
<SPAN STYLE="
vertical-align: bottom
">vertical-align: bottom </SPAN>
|
結果は以下のようにになります。
| 愛 vertical-align: top vertical-align: middle vertical-align: bottom |
大文字、小文字の変換を指定します。
<DIV STYLE="
text-transform: capitalize
">text-transform: capitalize ABC</DIV>
<DIV STYLE="
text-transform: uppercase
">text-transform: uppercase ABC</DIV>
<DIV STYLE="
text-transform: lowercase
">text-transform: lowercase ABC</DIV>
|
結果は以下のようにになります。
|
text-transform: capitalize ABC
text-transform: uppercase ABC
text-transform: lowercase ABC
|
横位置の配置を指定します。
<DIV STYLE="
text-align: left
">text-align: left</DIV>
<DIV STYLE="
text-align: right
">text-align: right</DIV>
<DIV STYLE="
text-align: center
">text-align: center</DIV>
<DIV STYLE="
text-align: justify
">text-align: justify</DIV>
|
結果は以下のようにになります。
|
text-align: left
text-align: right
text-align: center
text-align: justify
|
インデントを指定します。
<DIV STYLE="
text-indent: 3em
">text-indent: 3em</DIV>
|
結果は以下のようにになります。
|
text-indent: 3em
|
行の高さを指定します。
<DIV STYLE="
line-height: 1.2
">line-height: 1.2</DIV>
|
結果は以下のようにになります。
|
line-height: 1.2
|
・ボックスに関するプロパティ
-
マージン、パディング、ボーダーの属性を指定します。
<HR>
<DIV STYLE="
margin-top: 10pt;
margin-right: 20pt;
margin-bottom: 30pt;
margin-left: 40pt;
padding-top: 10pt;
padding-right: 20pt;
padding-bottom: 30pt;
padding-left: 40pt;
border-top-width 10pt;
border-right-width 20pt;
border-bottom-width 30pt;
border-left-width 40pt;
border-color: white green red gray;
border-style: solid double inset outset;">1:最初の<DIV>タグです。</DIV>
<HR>
<DIV STYLE="
margin: 10pt 20pt 30pt 40pt;
padding: 10pt 20pt 30pt 40pt;
border-width: 10pt 20pt 30pt 40pt;
border-color: white green red gray;
border-style: solid double inset outset;">2:これは同じ定義です。</DIV>
<HR>
<DIV STYLE="
margin: 10pt, 20pt, 30pt, 40pt;
padding: 10pt,20pt,30pt,40pt;
border-top: 10pt solid white;
border-right: 20pt double green;
border-bottom: 30pt inset red;
border-left: 40pt outset gray;">3:これも同じ定義です。</DIV>
<HR>
<DIV STYLE="
margin: 10pt;
padding: 10pt;
border: 10pt solid green;">4:これはシンプルです。</DIV>
<HR>
|
結果は以下のようにになります。
|
1:最初の<DIV>タグです。
2:これは同じ定義です。
3:これも同じ定義です。
4:これはシンプルです。
|
ボーダーの種類を指定します。
<DIV STYLE="border: 20pt solid #9999FF">solid</DIV> <DIV STYLE="border: 20pt double #FF9999">double</DIV> <DIV STYLE="border: 20pt inset #FF99FF">inset</DIV> <DIV STYLE="border: 20pt outset #99FF99">outset</DIV> <DIV STYLE="border: 20pt groove #99FFFF">groove</DIV> <DIV STYLE="border: 20pt ridge #FFFF99">ridge</DIV> |
結果は以下のようにになります。
|
solid
double
inset
outset
groove
ridge
|
高さ、幅を指定します。
<DIV STYLE="
border: 1 solid blue;
width: 100px; height: 100px;
">width: 100px;<BR>height: 100px;</DIV>
|
結果は以下のようにになります。
|
width: 100px;
height: 100px; |
左右の配置を指定します。
<IMG STYLE="float: left" SRC="hana.jpg"> float: leftにすると、<BR> 左配置となります。<BR> テキストは右側に<BR> 回り込みます。<BR> <SPAN STYLE="clear: left"> clearで回り込みをクリアします。</SPAN><BR> <HR> <IMG STYLE="float: right" SRC="hana.jpg"> float: rightにすると、<BR> 右配置となります。<BR> テキストは左側に<BR> 回り込みます。<BR> <SPAN STYLE="clear: right"> clearで回り込みをクリアします。</SAPN><BR> |
結果は以下のようにになります。
float: leftにすると、左配置となります。 テキストは右側に 回り込みます。 clearで回り込みをクリアします。
float: rightにすると、右配置となります。 テキストは左側に 回り込みます。 clearで回り込みをクリアします。 |
ホームページへ戻る