| 属性（ 命令 ） | 意味 | 値（ 単位等 ） | ||||||||||||||||||
| color |
文字の色 |
|||||||||||||||||||
| background-color | 背景の色 | |||||||||||||||||||
| background-image | 背景に画像を貼る | |||||||||||||||||||
| padding | 枠と文字の間隔
|
|
||||||||||||||||||
| margin |
ブラウザの端から要素までの間隔
|
|
||||||||||||||||||
| font-size | 文字の大きさ | padding の項参照 | ||||||||||||||||||
| text-align |
|
left center right |
||||||||||||||||||
| vertical-align |
文字の垂直位置下付き |
top middle bottom super sub |
||||||||||||||||||
| text-decoration |
文字の修飾
文字の修飾
文字の修飾
文字の修飾
文字の修飾
|
|
||||||||||||||||||
| line-height | 行送りを調整 | normal（デフォルト） padding の項参照 |
||||||||||||||||||
| border-style | 枠線のスタイル |
|
||||||||||||||||||
| border-width | 枠線の太さ |
| ||||||||||||||||||
| position |
relative 通常の表示位置からの相対位置 parent
absolute
通常の表示位置
position:relative;left:50%; 絶対位置で指定された所に表示 parent
position:absolute;top:0%;right:10%;width:70%; |
| ||||||||||||||||||
| visibility | 要素の表示、非表示 |
visible 表示(デフォルト) hidden 非表示 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<style type=text/css><!--
center table {background-color:yellow;}
p {background-color:pink;}
h3 {background-color:ivory;}
blockquote {background-color:lightgreen;}
--></style>
<center>
<table width="60%"><tr>
<td>
<br>
<font size="3" color="#000000">
<p align=left>
From To at 2003 09/05 18:32
<a href="">編集</a> <a href="">返信</a>
</p>
<center>
<h3>
新規入会おめでとう！！
</h3>
</center>
<blockquote>
<center>
情報発信してください。<br>
Q&Aをご覧ください。<br><br>
※必要のない方は消してください。
</center>
</blockquote>
</font>
</td>
</tr></table>
</center>
|
左のソースを コピーしてメモ帳などに貼り付ける ↓左のソースと同じ物 [Ctrl]+[A]で全選択して、コピーできます。 デスクトップにでも sample.html と保存 wクリックで下のように |
|
基本形
|
| |
|
color 「新規入会おめでとうございます！！」 の部分の文字色を赤にしてみます h3{background-color:ivory;color:red;} ４行目に赤い部分を追加して |
| |
|
background-color 背景色を変える center table{background-color:lightblue;} ２行目の yellow を lightblue に変えると |
| |
|
padding blockquote {background-color:lightgreen; padding:10pt;} ５行目に赤い部分を追加すると 緑のボックス内の文字が内側に 10pt 入ります |
| |
|
margin ５行目に赤い部分を追加すると center table{background-color:yellow;margin:10pt;} 黄色い部分の周りが |
| |
|
font-size h3 {background-color:ivory;font-size:10pt;} blockquote {background-color:lightgreen; font-size:15pt;} フォントサイズ早見表 |
| |
|
text-align 16,20,22,26 行目の <center></center> を削除して text-align で文字の水平位置を決めます h3 {background-color:ivory;text-align:right;} blockquote {background-color:lightgreen; text-align:center;} |
| |
|
vertical-align 情報発信してください。<span style="color:red;font-size:8pt;vertical-align:top;">←上</span> Q&Aをご覧ください。<span style="color:red;font-size:8pt;vertical-align:middle;">←真中</span> ※必要のない方は消してください。<span style="color:red;font-size:8pt;vertical-align:bottom;">←下</span> |
| |
|
text-decoration p {background-color:pink;text-decoration:underine;} h3 {background-color:ivory;text-decoration:overline;} blockquote {background-color:lightgreen; text-decoration:line-through;} |
| |
|
line-height blockquote {background-color:lightgreen; line-height:30px;} line-height サイズ早見表 |
| |
|
border-style center table {background-color:yellow; border-style:dotted;} p {background-color:pink;border-style:solid;} h3 {background-color:ivory;border-style:inset;} blockquote {background-color:lightgreen; border-style:outset;} |
| |
|
border-width center table {background-color:yellow; border-style:dotted;border-width:1px;} p {background-color:pink; border-style:solid;border-width:thin;} h3 {background-color:ivory; border-style:inset;border-width:medium;} blockquote {background-color:lightgreen; border-style:outset;border-width:thick;} |
| |
|
position p {background-color:pink; position:relative;top:43pt;} From To at 2003 09/05 18:32 編集 返信 の部分を移動 |
| |
|
visibility p {background-color:pink;visibility:hidden;} From To at 2003 09/05 18:32 の部分を消す p a {background-color:pink;visibility:visible;} a （リンク）の部分は表示 表示されないだけでスペースは確保されます |
| |