HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

ウイルスバスター 30日無料体験版 ノートン無料体験版 マカフィー・30日間無料版 [PR]

● 文字の装飾

文字に関わる一般的なスタイルの設定です。斜体文字の後の括弧内がプロパティになっています。
当ページを参考にして プロパティ:値 でスタイルをDIV要素やSPAN要素、P要素などに設定してみてください。

○文字の色を設定(color)
値はrgb(0,0,0)〜rgb(255,255,255)
赤文字 style="color:rgb(255,0,0)"
緑文字 style="color:rgb(0,255,0)"
青文字 style="color:rgb(0,0,255)"
色を設定の方法には16進数を使用し#000000〜#FFFFFFを設定する方法も可能
#を除いて、二文字ずつに区切って読む。00が0、FFが255に相当。
数字の00〜09の後0A、0B、・・・、0F、10、11、12、・・・、19、1A、1B、・・・。 と、0〜Fと16の数で数字が繰り上がるので16進数とよぶ。
赤文字 style="color:#FF0000"
緑文字 style="color:#00FF00"
青文字 style="color:#0000FF"
二文字を一文字に省略して設定することも可能。
赤文字 style="color:#F00"
緑文字 style="color:#0F0"
青文字 style="color:#00F"

○文字の背景色を設定(background-color)
背景赤 style="background-color:#FF0000"
背景緑 style="background-color:#00FF00"
背景青 style="background-color:#0000FF"
文字の色を設定し、背景色を設定することも可能。
赤背景の白文字 style="color:#FFFFFF ; background-color:#FF0000"

P要素を使用して段落間を色設定。
緑文字 color:#00FF00
青文字 color:#0000FF

<P style="background-color:#000000">
<SPAN style="color:#FFFFFF">P要素を使用して段落間を色設定。</SPAN><BR>
<SPAN style="color:#00FF00">緑文字 color:#00FF00</SPAN><BR>
<SPAN style="color:#0000FF">青文字 color:#0000FF</SPAN><BR>
</P>

○文字の大きさを設定(font-size)
style="font-size:xx-small" 最小
style="font-size:x-small" 小い
style="font-size:small" やや小
style="font-size:medium" 中
style="font-size:large" やや大い
style="font-size:x-large" 大い
style="font-size:xx-large" 最大
style="font-size:larger" (相対的に大きく)
style="font-size:smaller"(相対的に小さく)
style="font-size:1.5em"
style="font-size:70%" style="font-size:12px"
style="font-size:3mm"
インターネットエクスプローラーの場合、表示メニューから『文字のサイズ』で文字サイズを大小したときに emや%を設定したときは相対的にサイズを変えることが可能です。

○文字の太さの設定(font-weight)
style="font-weight:bold"  太く
style="font-weight:normal" 通常
style="font-weight:bolder" 太め
style="font-weight:lighter" 細め
style="font-weight:900"(400を標準に100刻みで100〜900)
style="font-weight:100"(400を標準に100刻みで100〜900)

○文字の形態の設定(font-style)
style="font-style:italic" イタリックに
style="font-style:normal"
style=";font-style:oblique"(フォントデータの斜体文字を設定、無ければ通常のイタリックにする。)

○文字種(フォント)の設定(font-family)
style="font-family:'MS 明朝'"
style="font-family:fantasy"
style="font-family:フォント,DHP行書体,'MS 明朝',fantasy"
ファント名にスペースがあるときは'(シングルクォーテイション)で囲む。
複数のフォントを設定するときは,(カンマ)で区切る。最初が優先、閲覧者のパソコンに設定フォントがないときは次に設定されたフォントを表示。
Operaでは以下のフォントにしか認めず、それぞれが設定上どのフォントに割り当てられているかで見え方が違います。また複数設定には対応していない模様・・・?
セリフ (serif) サンセリフ (sans-serif) モノスペース (monospace) カーシブ (cursive) ファンタジー (fantasy)
これらをGeneric−Family(汎用フォントファミリーとか一般フォントファミリ)と言う。

○文字の装飾を設定(text-decoration)
style="text-decoration:underline" 下線を引く
style="text-decoration:none" 飾り無し
style="text-decoration:overline" 上線を引く
style="text-decoration:blink" 点滅する・・・IE未対応・・・
style="text-decoration:line-through " 取消線
style="text-decoration:underline overline line-through"  上下取消線
※値を赤文字の文字サイズ1.1emで表示しているため、上線がずれたり、取消線が太くなったりと影響がでています。

○文字のバリエーションの設定(font-variant)
小さい大文字で表示されます。
style="font-variant:normal"
style="font-variant:small-caps"
style="font-variant:normal ; font-family:serif"
style="font-variant:small-caps ; font-family:serif"
style="font-variant:normal ; font-family:fantasy"
style="font-variant:small-caps ; font-family:fantasy"
style="font-variant:normal ; font-family:MS 明朝"
style="font-variant:small-caps ; font-family:MS 明朝"

○文字の表示を設定(text-transform)
style="text-transform:capitalize" 先頭1文字を大文字で表示。Opera/Netscape未対応
style="text-transform:uppercase" すべて大文字で表示。
style="text-transform:lowercase" すべて小文字で表示。
style="text-transform:none" そのまま表示。

○文字のスタイルを一括で設定する
上のいくつかはまとめて設定することができます。各値を半角スペース事にsizeとheightの間はスラッシュで区切ります。
font: style variant weight size / height family
style="font:italic normal bolder 1.5em / 2.0em フォント,DHP行書体,'MS 明朝'"
とは、言われてもこれだけの値を入力するのは大変です。省略して設定することも可能になっています。
style="font:1.5em フォント,DHP行書体,'MS 明朝'"
値:italic 1.5em フォント,DHP行書体,'MS 明朝'"
style="font:italic bolder 1.5em フォント,DHP行書体,'MS 明朝'"
以下二つはOperaでは駄目です。サイズとフォントを入れないといけないって事らしい。
style="font:italic bolder 1.5em"
style="font:italic bolder フォント,DHP行書体,'MS 明朝'"

<<前へ  |上へ|  次へ>>
1234567891011121314151617

通信講座であなたもスキルアップ!学ぶ喜びが味わえる詳しい講座案内書を無料送呈中!

TOP] [HOME

更新日時:2014/08/09