＜＜カスタマイズトップへ戻る

【１】body部分のタグ説明

スタイルシート部分

・background
・margin
・font-size
・font-family
・line-height
・img border
・img solid
・img margin
・img padding
・a:link
・a:visited
・a:active
・a:hover

background

画面全体の背景色の値を入れます。デフォルトでは#ffffff（白）になっています。この値を変更すると背景色が変わりますが、メニュー部分や記事部分の背景色は変わりません。全ての背景色を変更する場合はそれぞれのbackground部分の値を変更して下さい。
▲トップへ

margin

画面の最大領域との間隔を指定するのがmargin[マージン]です。margin:0pxとなっていますが、これは画面一杯に表示させています。少し余白を持たせたいならば数値を大きくして下さい。
上下左右指定して変更するのならば
margin:上余白px 右余白px 下余白px 左余白px
とそれぞれ指定して下さい。
▲トップへ

font-size

指定されていない場合の文字サイズの大きさです。例えば、右メニュー部分でfont-sizeが指定されていなければ【１】body部分のサイズが適用されます。
つまり、body部分で指定した文字サイズは基準となるサイズです。ここでは％で指定されていますが、これはpxで指定する場合と違い、訪問者がブラウザ（おもにＩＥ）で文字サイズを変更すると可変する為にあります。pxだともし訪問者が文字サイズを大きくしようと「大きな文字」を選択しても変わりません。
▲トップへ

font-family

文字スタイル（有名なのは明朝やゴシック体など）を設定します。 フォントの指定には、フォント名による指定、キーワードによる指定があります。フォント名は具体的な名前で指定し、名前は全角・半角・スペースも正確に記述しなければいけません。フォント名にスペースが含まれている場合は""または''で区切る必要があります。
記述方法
font-family:フォント名,キーワード
キーワードの指定はフォント名による指定がどれも有効でない場合に適用されるので、指定しておくべきです。
キーワード：「serif」明朝系「sans-serif」ゴシック系
「cursive」筆記体「fantasy」装飾系「monospace」等幅
デフォルトではGeneva,Hiragino Maru Gothic Pro,〜;となっています。それぞれの","は、ビジターの環境に指定したフォントが無い場合に、並べた順に優先されて設定されます。
Genevaがビジターの環境になければHiraginoになります

▲トップへ

line-height

line-heightは行の高さを設定します。この値（％）が大きくなればなるほど、改行した時の文字と文字の上下間が広くなります。
line-height:normal
にすると、ブラウザが自動的に高さを設定します。
▲トップへ

img border

指定されていない部分の画像の枠線の太さを指定します。例えば右メニューで画像の枠線の太さが指定されていなければここで指定した値が適用されます。
デフォルトでは値は０となっていますが、０にすると枠線無しになります。値を大きくすればするほど画像に入る枠線の太さが太くなります。
▲トップへ

img solid

画像の枠線の太さ(img border）を１以上にした場合の枠線の種類を指定します。
solidは実線で、一般的な直線を表示させます。
点線ならdotted、二重線ならdoubleを入れます。全部で１０種類ほど枠線の種類があります。
▲トップへ

img margin

画像と他の領域との間隔をmargin（マージン）と呼びます。
margin:上px、右px、下px、左px
と指定してそれぞれ間隔を空ける幅を指定します。
▲トップへ

img padding

画像と枠との間隔を指定します。img marginと区別して理解するのは少し難しいかもしれませんが、間隔を空ける対象が違います。
▲トップへ

a:link

訪問者がそのリンク先を訪れた事が無い(キャッシュされていない)場合のリンクテキストの要素を指定します。color:で色、text-decoration:は文字に装飾を付けるかという事で、一般的なものとしてはunderline、下線等があります。ここではnoneと記述して何も装飾しないようにしています。
▲トップへ

a:visited

訪問者がリンク先のページを既に見た（キャッシュされている）場合のリンクテキストの要素を指定します。color:で色、text-decoration:は文字に装飾を付けるかという事で、一般的なものとしてはunderline、下線等があります。ここではnoneと記述して何も装飾しないようにしています。
▲トップへ

a:active

リンク部分をクリックした瞬間から実際にページ移動するまでのリンクテキストの要素を指定します。color:で色、text-decoration:は文字に装飾を付けるかという事で、一般的なものとしてはunderline、下線等があります。ここではnoneと記述して何も装飾しないようにしています。
▲トップへ

a:hover

マウスカーソルがテキストと重なっている時の要素を指定します。color:で色、text-decoration:は文字に装飾を付けるかという事で、一般的なものとしてはunderline、下線等があります。ここではnoneと記述して何も装飾しないようにしています。
▲トップへ

前後の記事

最近の記事