HTML忠太HELP、css説明

　　　　　　<バリュー>

フォント名----ＭＳゴシックなど
serif--------ゴシック系のフォント）
sans-serif---明朝系のフォント
cursive------筆記体・草書体のフォント）
fantasy------装飾的なフォント
monospace----等幅フォント

　　　　　　<説明>

使用するフォントを設定します。
値にはフォント名を直接指定するか、『ＭＳゴシック』や『ＭＳ明朝』のように
フォント名で指定します。指定したフォントが無い場合も有るので幾つか列挙します。
列挙する場合は', 'カンマで区切ります。フォント名にスペースが含まれている場合
には、ダブルクォーテーション（ " ）またはシングルクォーテーション（ ' ）
で囲みます。
全ての要素に適応
継承：有り
</説明>
<例>

body { font-family : "ｍｓｐゴシック " , " ｍｓゴシック" , serif ;}
<body style = " font-family : 'ｍｓｐゴシック' , 'ｍｓゴシック', serif ">

<font-style>

　　　　　　<バリュー>

italic-----斜体
normal-----通常（デフォルト）
oblique----オブリーク体

　　　　　　<説明>

フォントファミリ内から通常体、イタリック体、オブリーク体のいずれかを選択する。
全ての要素に適応
継承：有り
</説明>
<例>

H1{ font-style: italic }
H1{ font-style: normal }

<font-variant>

　　　　　　<バリュー>

small-caps----小さい大文字
normal--------通常（デフォルト）

　　　　　　<説明>

フォントファミリの中には通常体の他に小さい文字が有ります。
日本語には有りません。スモールキャップを適用すると、タグに
囲まれた文字列は全て大文字になり、なおかつ通常の大文字より
小さく表示されます
全ての要素に適応
継承：有り
</説明>
<例>

h1{ font-variant: small-caps }

<font-weight>

　　　　　　<バリュー>

light-------細い
lighter-----やや細い
normal------通常（デフォルト）
bolder------やや太い
bold--------太い
値----------weigh値-太さを100刻みで指定100～900

　　　　　　<説明>

フォントのウェイトを選択する。
'100'から'900'までの値は数字が大きい程重くなる。
'normal'というキーワードは'400'と同義、'bold'というキーワードは'700'と同義。
全ての要素に適応
継承：有り
</説明>
<例>

h1{ font-weight: normal } /* 400 */
h1{ font-weight: 700 } /* bold */

<font-size>

　　　　　　<バリュー>

xx-small-----非常に小さい
x-small------小さい
small--------ちょっと小さい
medium-------通常（デフォルト）
large--------ちょっと大きい
x-large------大きい
xx-large-----非常に大きい
smaller------親要素の指定値より小さい
larger-------親要素の指定値より大きい
px-----------ピクセル
pt-----------ポイント(72py=1in)
pc-----------パイか(1pc=12pt)
mm-----------ミリメートル
cm-----------センチメートル
in-----------インチ
em-----------基準になるフォントサイズ
ex-----------基準になるフォント『x』の高さ
%------------親要素のフォントサイズから算出

　　　　　　<説明>

フォントの大きさを設定するxx-smallが最小でxx-largeが最大、１つ上がる
ごとに1.5倍となる。
全ての要素に適応
継承：有り
</説明>
<例>

h1{ font-size: 12pt; }
h1{ font-size: larger }
h1{ font-size: 150% }
h1{ font-size: 1.5em }

<line-height>

　　　　　　<バリュー>

px-----------ピクセル
pt-----------ポイント(72py=1in)
pc-----------パイか(1pc=12pt)
mm-----------ミリメートル
cm-----------センチメートル
in-----------インチ
em-----------基準になるフォントサイズ
ex-----------基準になるフォント『x』の高さ
%------------指定要素の横幅から算出
normal 通常（デフォルト）

　　　　　　<説明>

行送りの設定、テキストの下辺から次の行のテキストの下辺までの設定。
１００％を設定するとそのフォントのサイズ文だけ送ります。
全ての要素に適応
継承：有り
<例>

　div { line-height: 1.2; font-size: 10pt } /* number */
　div { line-height: 1.2em; font-size: 10pt } /* length */
　div { line-height: 120%; font-size: 10pt } /* percentage */

<font>

{font:font-weight forn-size/line-height font-family font-style}

　　　　　　<説明>

fontは簡略化プロパティで、'font-style'、'font-variant'、'font-weight'、
'font-size'、'line-height'、'font-family'という6つのプロパティを
1箇所で指定できます。
{font:font-weight forn-size/line-height font-family font-style}
の順で並べる、フォントサイズと行間のみ/でつなげ、後は半角スペース
を入れる。
全ての要素に適応
継承：有り
</説明>
<例>

p { font: 12pt/14pt sans-serif }
p { font: 80% sans-serif }
p { font: x-large/110% "ｍｓｐゴシック", serif }
p { font: bold italic large palatino, serif }
p { font: normal small-caps 120%/120% fantasy }

<テキストの設定>

<word-spacing>

　　　　　　<バリュー>

ppx-----------ピクセル
pt-----------ポイント(72py=1in)
pc-----------パイか(1pc=12pt)
mm-----------ミリメートル
cm-----------センチメートル
in-----------インチ
em-----------基準になるフォントサイズ
ex-----------基準になるフォント『x』の高さ
%------------親要素の指定値に対する割合
normal-------通常（デフォルト）

　　　　　　<説明>

長さの値を指定すると、単語と単語の間隔が指定した長さ分増加する。
負の値も使用可能。
実際の単語間隔は'text-align'プロパティによる両端揃えに影響を受けることもある。
全ての要素に適応
継承：有り
</説明>
<例>

H1 { word-spacing: 1em }

<letter-spacing>

　　　　　　<バリュー>

　　　　　　<説明>

長さの値を指定すると、文字と文字の間隔が指定した長さ分増加する。
負の値も使用可能。
実際の単語間隔は'text-align'プロパティによる両端揃えに影響を受けることもある。
全ての要素に適応
継承：有り
</説明>
<例>

H1 { word-spacing: 1em }

<text-align>

　　　　　　<バリュー>

left-----------左寄せ
center---------センタリング
right----------右寄せ
justify--------均等割付にします

　　　　　　<説明>

テキスト文をどのように揃えるかを設定する。
ブロック要素に適応
継承：有り
</説明>
<例>

div.center { text-align: center }
<div style= "text-align: center " >『html忠太』とは<br>
</div>

<text-decoration>

　　　　　　<バリュー>

none-----------装飾なし（デフォルト）
underline------下線
overline-------上線
line-through---取消線
blink----------ブリンク

　　　　　　<説明>

テキストの装飾を行う。
全ての要素に適応
継承：無し
</説明>
<例>

<text-indent>

　　　　　　<バリュー>

px-----------ピクセル
pt-----------ポイント(72py=1in)
pc-----------パイか(1pc=12pt)
mm-----------ミリメートル
cm-----------センチメートル
in-----------インチ
em-----------基準になるフォントサイズ
ex-----------基準になるフォント『x』の高さ
%------------親要素の指定値に対する割合
normal-------通常（デフォルト）

　　　　　　<説明>

テキストの1行目にインデント（段落とし)を指定する。
</説明>
<例>

<DIV style = text-indent:10em>
『HTML忠太』はHTMLのソースエディターです。
忠太とは英語のTutor(家庭教師)の意味です。<BR>
</DIV>

<line-height>

　　　　　　<バリュー>

px-----------ピクセル
pt-----------ポイント(72py=1in)
pc-----------パイか(1pc=12pt)
mm-----------ミリメートル
cm-----------センチメートル
in-----------インチ
em-----------基準になるフォントサイズ
ex-----------基準になるフォント『x』の高さ
%------------その要素の横幅の割合
normal-------通常（デフォルト）

　　　　　　<説明>

行送りの設定、テキストの下辺から次の行のテキストの下辺までの設定。
１００％を設定するとそのフォントのサイズ文だけ送ります。
全ての要素に適応
継承：有り
</説明>
<例>

div { line-height: 1.2; font-size: 10pt } /* number */
div { line-height: 1.2em; font-size: 10pt } /* length */
div { line-height: 120%; font-size: 10pt } /* percentage */

<vertical-align>

　　　　　　<バリュー>

baseline---------ベースラインと揃える
middle-----------中心線を、親要素のベースラインから小文字xの半分だけ高い位置と揃える。
sub--------------下付き文字にする。
super------------上付き文字にする。
text-top---------要素の外上辺（top）を親要素の外上辺に揃える。
text-bottom------要素の外下辺（bottom）を親要素の外下辺に揃える。
top--------------要素の外上辺を、同じ行中でもっとも高い要素（の外上辺）に揃える。
bottom-----------要素の外下辺を、同じ行中でもっとも低い要素（の外下辺）に揃える。
middle-----------中央揃えにします

　　　　　　<説明>

垂直方向の配置を決める。インライン要素とtd,th要素のみ指定可能。
指定された要素のline-height
継承：無し
</説明>
<例>

<p><img src="../images/img001.gif"style="vertical-align: baseline">baseline</p>
<p><img src="../images/img001.gif"style="vertical-align: top">top</p>
<p><img src="../images/img001.gif"style="vertical-align: middle">middle</p>
<p><img src="../images/img001.gif"style="vertical-align: bottom">bottom</p>

<text-transform>

　　　　　　<バリュー>

capitalize------各単語の先頭を大文字にする。
uppercase-------すべて大文字にする。
lowercase-------すべて小文字にする。
none------------記述した通りに表示します。これが初期値です。

　　　　　　<説明>

text-transformプロパティはテキストの大文字化や小文字化を指定します。
各種キーワードの意味合いは以下の通り。
全ての要素に適応
継承：有り
</説明>
<例>

h1 { text-transform: uppercase }

<色設定(テキスト)>

<color>

　　　　　　<バリュー>

#FFFFFF---------rr、gg、bb は 00～ff
カラーネーム-----red、green、blue など
#rgb------------r、g、b は 0～f
rgb(n,n,n)------n は 0～255
rgb(n%,n%,n%)---n は 0～100
transparent-----背景色透過（デフォルト）

　　　　　　<説明>

色の指定をします。
全ての要素に適応
継承：有り
</説明>
<例>

<背景の設定>

<background-color>

　　　　　　<バリュー>

　　　　　　<説明>

背景色を設定します。
全ての要素に適応
継承：無し
</説明>
<例>

<background-image>

　　　　　　<バリュー>

url---------("ファイル名") 画像ファイル
none--------なし

　　　　　　<説明>

背景画像を設定します。
全ての要素に適応
継承：無し
</説明>
<例>

body { background-image: url(marble.gif) }
p { background-image: none }

<background-repeat>

　　　　　　<バリュー>

repeat---------繰り返し（デフォルト）
repeat-x-------横方向のみ繰り返し
repeat-y-------縦方向のみ繰り返し
no-repeat------繰り返さない

　　　　　　<説明>

背景画像が指定されていれば、'background-repeat'の値で、画像を繰り返すかどうか、
繰り返すとしたらどういう形式かを決めます。
全ての要素に適応
継承：無し
</説明>
<例>

body {
background: red url(pendant.gif);
background-repeat: repeat-y;
}

<background-attachment>

　　　　　　<バリュー>

scroll スクロールする（デフォルト）
fixed 固定する

　　　　　　<説明>

背景画像が指定されていれば、'background-attachment'の値で、
画像をキャンバスに対して固定するか、もしくは内容に沿ってスクロール
するかを決めます。
全ての要素に適応
継承：無し
</説明>
<例>

BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}

<background-position>

　　　　　　<バリュー>

left---------左
center-------中央
right--------右
top----------上
middle-------真ん中
bottom-------下
px-----------ピクセル
pt-----------ポイント(72py=1in)
pc-----------パイか(1pc=12pt)
mm-----------ミリメートル
cm-----------センチメートル
in-----------インチ
em-----------基準になるフォントサイズ
ex-----------基準になるフォント『x』の高さ
%------------その要素のサイズに比例する

　　　　　　<説明>

画像の位置を決めます。
'0% 0%'という値は、画像の左上隅が位置します。
'100% 100%'という値は、画像の右下隅が位置します。
同様に'35% 48%'という値は、表示の35%上から48%の部分に、画像の左から35%上から
48%の部分が位置します。
'2cm 2cm'という値は、表示の上から2cm左から2cmの部分に画像の左上隅が位置します。
ブロックレベルと入れ替えの要素に適応
継承：無し
</説明>
<例>

BODY { background: url(tutor5.jpg) center } /* 50% 50% */

　　　　　　<バリュー>

background

　　　　　　<説明>

'background'は簡略化プロパティで、'background-color'、'background-image'、
'background-repeat'、'background-attachment'、'background-position'
という5つのプロパティを1箇所で指定できる。
全ての要素に適応
継承：無し
</説明>
<例>

body { background: red }
p { background: url(chess.png) gray 50% repeat fixed }

<ボックスの大きさの設定>

<width>

　　　　　　<バリュー>

px-----------ピクセル
pt-----------ポイント(72py=1in)
pc-----------パイか(1pc=12pt)
mm-----------ミリメートル
cm-----------センチメートル
in-----------インチ
em-----------基準になるフォントサイズ
ex-----------基準になるフォント『x』の高さ
%------------親要素の指定値に対する割合
normal 通常（デフォルト）
auto 自動調整（デフォルト）

　　　　　　<説明>

このプロパティはテキストの要素にも適用できるが、
画像などの置換要素に適用するのが最も有用である。必要ならば、
画像の大きさを強制的に拡大あるいは縮小して、指定された幅を実現
しなければならない。拡大あるいは縮小を行う場合、一方の値が
'auto'であれば、縦横の比率は維持される。
ブロックレベルおよび置換要素
継承：無し
</説明>
<例>

img.icon { width: 100px }
mg.icon { height: 100px }

<float>

　　　　　　<バリュー>

non-----------無し(デフォルト)
left----------左
right---------右

　　　　　　<説明>

これは浮動要素と呼ばれます。ブロックレベル要素やインライン要素とは異なり、
位置を固定せずに、周りの状態に合わせて位置決めする要素です。
left又は right を設定すると、そのエレメントはブロックレベルとして扱われる。
この場合　display　プロパティは無視される。
全ての要素に適応
継承：無し
</説明>
<例>

img{
float : right; /*右側に画像を表示し、左側にテキストを回り込ませる*/
}

　　　　　　<バリュー>

scroll--------スクロールバーを表示
hidden--------はみ出した部分は非表示
visible-------範囲を広げて表示（デフォルト）
auto----------はみ出した場合はスクロールバーを表示

　　　　　　<説明>

ボックスの範囲内に内容が入りきらない場合に、
はみ出た部分の表示の仕方を指定する際に使用
</説明>
<例>

p.sample1 {width:200px; height:60px; background-color:ee0000; overflow: visible;

<clear>

　　　　　　<バリュー>

none----------なし（デフォルト)
left----------左
right---------右
both----------両方

　　　　　　<説明>

clearプロパティは、floatプロパティで左寄せ、
または右寄せを指定された要素に対する回り込みを解除する際に
使用します。
全ての要素に適応
継承：無し
</説明>
<例>

H1 { clear: left }

<border-bottom-style>

　　　　　　<バリュー>

none-------ボーダーは表示されない。
dotted-----ボーダーは背景画像の上から点線で表示される。
dashed-----ボーダーは背景画像の上から破線で表示される。
solid------ボーダーは実線になる。
double-----ボーダーは背景画像の上から二重線で表示される。
groove-----指定された色を基調にして立体的な窪みを表示する。
ridge------指定された色を基調にして立体的な隆起を表示する。
inset------指定された色を基調にしてボーダー内部を窪みにする。
outset-----指定された色を基調にしてボーダー内部を隆起にする。

　　　　　　<説明>

'border-style'プロパティは四辺のボーダーの種類を設定する。
1つ以上4つ以下の値を指定できる。
その他はそれぞれの設定を行う。
全ての要素に適応
継承：無し
</説明>
<例>

h1 { border-style: solid dotted }
h2 {border-top-style:solid;
border-right-color:solid;
border-bottom-color:solid;
border-left-color:solid;}

<border-bottom-width>

　　　　　　<バリュー>

thin 細い線
medium 中間の線（デフォルト）
thick 太い線
px-----------ピクセル
pt-----------ポイント(72py=1in)
pc-----------パイか(1pc=12pt)
mm-----------ミリメートル
cm-----------センチメートル
in-----------インチ
em-----------基準になるフォントサイズ
ex-----------基準になるフォント『x』の高さ

　　　　　　<説明>

border-widthはボーダー幅を設定する
その他はそれぞれのボーダーの幅を設定する
全ての要素に適応
継承：無し
</説明>
<例>

h1 { border: solid thick red }
p { border: solid thick blue }

<border-bottom-color>

　　　　　　<バリュー>

#rrggbb-------------rr、gg、bb は 00～ff
カラーネーム---------red、green、blue など
#rgb----------------r、g、b は 0～f
rgb(n,n,n)----------n は 0～255
rgb(n%,n%,n%)-------n は 0～100

　　　　　　<説明>

border-colorはボーダーの色を指定する。
その他はそれぞれのボーダーの色を指定する。
全ての要素に適応
継承：無し
</説明>
<例>

p {border-style: solid;}
p.sample1 {border-bottom-color: #0000ff;}
p.sample2 {border-bottom-color: red;}

　　　　　　<説明>

これは簡略化プロパティで、要素のボーダーについて幅、種類、色を同時に設定する。
</説明>
<例>

h1 { border-bottom: thick solid red }
p { border: solid red }
p {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}

　　　　　　<バリュー>

　　　　　　<説明>

'margin'は簡略化プロパティで
margin-top, margin-right, margin-bottom, margin-left
という4つのプロパティを1箇所で設定できます。
その他はそれぞれの要素のマージンを設定します。
マージンとは上下、左右の余白のことです。
全ての要素に適応
継承：無し
</説明>
<例>

h1 { margin-top: 2em }
h1 { margin-right: 12.3% }
h1 { margin-bottom: 3px }
h1 { margin-left: 2em }
body { margin: 2em } /* all margins set to 2em */
body { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

　　　　　　<バリュー>

px-----------ピクセル
pt-----------ポイント(72py=1in)
pc-----------パイか(1pc=12pt)
mm-----------ミリメートル
cm-----------センチメートル
in-----------インチ
em-----------基準になるフォントサイズ
ex-----------基準になるフォント『x』の高さ
%------------親要素の指定値に対する割合
normal-------通常（デフォルト）
auto---------自動調整

　　　　　　<説明>

'padding'は簡略化プロパティで、（padding-top,padding-right,padding-bottom,padding-left）
という4つのプロパティを1箇所で設定できます。
その他はそれぞれの要素のパディングを設定します。
パディングとは詰め込むということで、ボックスの枠から文字までの
距離です。
</説明>
<例>

blockquote { padding-top: 0.3em }
blockquote { padding-right: 10px }
blockquote { padding-bottom: 2em }
blockquote { padding-left: 20% }

<位置の指定>

　　　　　　<バリュー>

absolute-------絶対的な位置指定
relative-------相対的な位置指定
static---------指定無し（デフォルト)
fixed----------スクロールの位置の固定

　　　　　　<説明>

ボックスの配置方法（基準位置）が、相対位置か絶対位置かを
指定する。
全ての要素に適応
継承：無し
</説明>
<例>

span.sample1 {color:#ff0000; position:static; top:10px; left:10px }
span.sample2 {color:#ff0000; position:relative; top:10px; left:10px }

<top>

<left>

<right>

　　　　　　<バリュー>

px-----------ピクセル
pt-----------ポイント(72py=1in)
pc-----------パイか(1pc=12pt)
mm-----------ミリメートル
cm-----------センチメートル
in-----------インチ
em-----------基準になるフォントサイズ
ex-----------基準になるフォント『x』の高さ
%------------親要素の指定値に対する割合
normal-------通常（デフォルト）
auto---------自動調整

　　　　　　<説明>

これらのプロパティはpositionプロパティと組み合わせてボックスの配置体系を決めます。
全ての要素に適応
継承：無し
</説明>
<例>

span.sample1 {color:#ff0000; position:static; top:10px; left:10px }
span.sample2 {color:#ff0000; position:relative; top:10px; left:10px }

<z-index>

番号-------数字１２３
auto-------自動調整

　　　　　　<説明>

重なりの順序を整数で指定します。0を基準として、
値が大きいものほど上になります
</説明>
<例>

無し

<分類のプロパティ>

　　　　　　<バリュー>

block----------新しくブロックボックスを生成する
inline---------新しくインラインボックスを生成する
list-item------先頭にリスト項目のマーカーが追加される
none-----------表示しない
marker---------リストのマーカーのためのボックスを生成します。
compact--------前後の状況により、ブロックレベルになったりインラインレベルになったりします。
run-in---------前後の状況により、ブロックレベルになったりインラインレベルになったりします。

　　　　　　<説明>

要素を表示するか否か、あるいはどの様に表示するかを指定する。
'block'という値を指定すると、当該要素は新しくブロックボックスを生成する。
'list-item'は要素の先頭にリスト項目のマーカーが追加される。
'inline'という値を指定すると、直前の内容と同じ行に新しくインラインボックス
を生成する。
'none'という値を指定すると、当該要素を子供要素まで含めて表示しない。
全ての要素に適応
継承：無し
</説明>
<例>

p { display: block }
p { display: inline }
p { display: list-item }
p { display: none }

<white-space>

　　　　　　<バリュー>

normal---------連続する空白類文字を1つにまとめる
pre------------HTMLのPRE要素と同じ働きをする
nowrap---------BR要素によってのみ改行を行わせる

　　　　　　<説明>

ソース中の半角スペース・タブ・改行の表示の仕方を指定
ブロックレベルの要素に適応
継承：有り
</説明>
<例>

pre { white-space: pre }
p { white-space: normal }

<リストの設定>

<list-style-type>

　　　　　　<バリュー>

disc-------------黒丸●（デフォルト）
circle-----------白丸○
square-----------四角■
decimal----------10進数で0から始めます。
lower-room-------10進数なのですが、1桁の数字も2桁で表します。
upper-room-------大文字のローマ数字です。『I』,『II』,『V』,『X』
lower-alpha------小文字のアスキー文字です。『a』,『b』,『c』,『d』・・『z』
uper-alpha-------小文字のアスキー文字です。『A』,『B』,『C』,『D』・・『Z』
hiragana---------５０音順のひらがな。『あ』,『い』,『う』,『え』・・『わ』
katakana---------５０音順のカタカナ。『ア』,『イ』,『ウ』,『エ』・・『ワ』
hiragana-iroha---いろは順のひらがな。　『い』,『ろ』,『は』,『に』・・『す』
cjk-ideographic--漢数字。『一』,『二』,『三』・・『十』
none-------------マーカーを生成しません。

　　　　　　<説明>

リストの先頭に表示するマーカー文字の種類を指定する際に使用。
display値のlist-itemを持つ要素に適応
継承：有り
</説明>
<例>

ol { list-style-type: decimal } /* 1 2 3 4 5 etc. */
ol { list-style-type: lower-alpha } /* a b c d e etc. */
ol { list-style-type: lower-roman } /* i ii iii iv v etc. */

<list-style-image>

　　　　　　<バリュー>

url----------("ファイル名") 画像ファイル
none---------画像表示なし（デフォルト）

　　　　　　<説明>

リストの先頭に表示するマーカーに画像ファイルを指定する際に使用。
display値のlist-itemを持つ要素に適応
継承：有り
</説明>
<例>

ul { list-style-image: url(http://png.com/ellipse.png) }

<list-style-position>

　　　　　　<バリュー>

outside-------リストの外側（デフォルト）
inside--------リストの内側

　　　　　　<説明>

リストの先頭に表示するマーカーの表示位置を指定する際に使用。
display値のlist-itemを持つ要素に適応
継承：有り
</説明>
<例>

<ul style="list-style-position: outside">
<li>ねろはねこ</li>
<li>ぽちはいぬ</li>
<li>みけもねこ</li>
</ul>

<list-style>

　　　　　　<バリュー>

　　　　　　<説明>

list-style プロパティは，スタイルシート内の同じ場所に
list-style-type，list-style-image
list-style-position
の３つのプロパティを設定するための短縮表記である。
display の値に list-item を持つ要素に適応
継承：有り
</説明>
<例>

ul { list-style: upper-roman inside }
ul ul { list-style: circle outside }
li.square { list-style: square }