こころのなかのナミダ.html

こころのなかのナミダ.html

Illustrator/Photoshop/Dreamweaver/Flash等を使用するWeb系の勉強をしています。
授業で習ったものの復習をしていこうと思います。

Amebaでブログを始めよう!
background:background-colorの値 background-imageの値 background-repeatの値 background-positionの値
背景のプロパティを一括指定する。

●ボックス

1.border-styleプロパティ
・border-style:値         枠線のスタイルを指定する。
・border-top-style:値       枠線(上)のスタイルを指定する。
・border-right-style:値      枠線(右)のスタイルを指定する。
・border-bottom-style:値    枠線(下)のスタイルを指定する。
・border-left-style:値       枠線(左)のスタイルを指定する。

============================================
*none      枠線を表示しない。
*solid      実線で表示する。
*double     二重線で表示する。
*dashed     破線で表示する。
*dotted     点線で表示する。
*groove     立体的にくぼんだ線で表示する。
*ridge      立体的に盛り上がった線で表示する。
*inset      全体をくぼませて表示する。
*outset     全体を盛り上げて表示する。
============================================
●背景
1.background-colorプロパティ
  background-color:値     背景色を指定する。

  transparent  透明にする。
  {background-color:transparent;
}

2.background-imageプロパティ
  background-image:値     背景イメージを指定する。
  値には、「url("images/kabe.gif")」
のように「url(ファイルのパス)」を指定します。

3.background-repeatプロパティ
 
  background-repeat:値    背景イメージの繰り返し方法を指定する。

repeat   イメージを領域全体に繰り返して敷き詰める。
repeat-x  イメージを水平方向に繰り返して敷き詰める。
repeat-y  イメージを垂直方向に繰り返して敷き詰める。
no-repeat  イメージをひとつだけ配置する。

4.background-positionプロパティ
  background-position:水平方向の値 垂直方向の値
  背景イメージの位置を指定する。

水平方向
left     左
center   中央
right    右

垂直方向
top      上
center    中央
bottom   下

数値+単位で指定することも出来る。

body{
background-image:url("images/
rose.jpg");
background-repeat:no-repeat;
background-position:50px 30px;
}
lettre-spacing:値       文字間隔を指定する。

line-height:値         行間隔を指定する。


font:font-styleの値 font-weightの値 font-sizeの値
   line-heightの値 font-familyの値
フォントのプロパティを一括指定する。
値と値の間は半角空白で区切ります。

※font-sizeとfont-familyの値は省略できない。
※font-styleとfont-weightの値の順番は入れ替わってもよい。
※line-heightの値の前には「/(スラッシュ)」を記述する。
white-space:値   半角空白・タブ・改行の表示方法を指定する。

normal   テキストエディタで記述する半角空白・タブ・改行をひとつの半角空白
       としてブラウザに表示します。
       ボックスの幅が指定されているとき、ボックス内の文字列は
       自動改行されます。

pre     テキストエディタで記述する半角空白・タブ・改行をそのままブラウザで
       表示します。
       ボックスの幅が指定されているとき、ボックス内の文字列は
       自動改行されません。

nowrap   テキストエディタで記述する半角空白・タブ・改行をひとつの
       半角空白としてブラウザに表示します。
       ボックスの幅が指定されているとき、ボックス内の文字列は
       自動改行されません。

●フォント
1.font-familyプロパティ
font-family:値    フォントの種類を指定する。

2.font-sizeプロパティ
font-size:値     フォントサイズを指定する。

3.font-weightプロパティ
font-weight:値    文字列の太さを指定する。

normal       太字で表示しません。
bold        一般的な太字で表示します。
bolder       現在指定されている太さより一段階太く表示します。
lighter       現在指定されている太さより一段階補足表示します。
100~900     100~900の数値を100刻みで指定します。
           数値が大きくなるほど太く表示されます。

4.font-styleプロパティ
font-style:値   文字列の斜体を指定する。

normal       斜体で表示しません。
oblique       斜体で表示します。
italic        イタリック体で表示します。

vertical-align:値
行内またはセル内での文字列の垂直方向位置を指定する。

行内
baseline  文字列をフォントの基準線(ベースライン)に揃えて配置します。
super    文字列を行の上側に配置します。
sub     文字列を行の下側に配置します。

セル内
baseline  文字列をセル内でフォントの基準線(ベースライン)に揃えて配置します。
top     文字列をセル内で上揃えにします。
middle   文字列をセル内で中央揃えにします。
bottom   文字列をセル内で下揃えにします。

text-transform:値
英字の大文字/小文字を指定する。

none        入力したとおりに表示される。大文字/小文字を変更しない。
capitalize     単語の先頭1文字だけを大文字にする。
uppercase    すべて大文字にする。
lowercase    すべて小文字にする。