lHTML スタイル 文字 '98. 4. 7 /'96.11.25

l.お知らせ 内容 LINK FILE   HTML Win PC Unix MS-DOS C C++ Mfc Java 
.全般_ .スタイル .名前. _一覧_
 備考  スタイル  文字 ( 配置 )  縁取り枠  領域  浮動域  座標  シート    
大きさ     太さ   斜字   字体   行間   まとめ書き   横線   背景   文字変換  

T 
 文 字
 文 字

STYLE は、文字の形や大きさなどを、
FONT タグよりも詳しく指定できます。
STYLE は、文字の形や大きさなどを、
FONT タグよりも詳しく指定できます。

T
 
 文字の大きさ 
<SPAN STYLE="FONT-SIZE:50PX;">文字</SPAN>
<SPAN STYLE=" FONT-SIZE : 30PT ; ">文字</SPAN>
文字 ( 50PX )    文字 ( 30PT )
大きさを指定する単位については、[備考] のページに記事があります。
指定属性( FONT-SIZE など )と、指定値( 50PX など )の間には、:( コロン ) を書きます。
指定値( 50PX など )の後には、;( セミコロン ) を書きます。
 . . . これは、属性を複数指定をする場合に区切る記号で、上記のように最後の場合は省略できます。
上記 二番目の例のように、見易くするためのスペースを書くことができます。

SPAN は、STYLE を単独で使用するための記号です。
SPAN の代わりに既存のHTMLタグを使用できます。( 以下同様です。)
<I STYLE="FONT-SIZE:40PX;">文字</I>
<FONT COLOR=RED STYLE="FONT-SIZE:40PX;">文字</FONT>
文字 <I>( イタリック体 ) との組み合わせ    文字<FONT> との組み合わせ


T
 
 文字の色   ( 色名 または 色コード で指定します。)
<SPAN STYLE="COLOR:RED;">文字</SPAN>
<SPAN STYLE="COLOR:#FF0000;">文字</SPAN>
<SPAN STYLE="COLOR:FF0000;">文字</SPAN>
文字
メモ : Netscape で、 <SPAN ID=S3 STYLE="COLOR:RED;">文字</SPAN> のように書くと、
このページ先頭の、ID=S3 で文字サイズを指定している部分が、リサイズしたときに赤くなる。


T
 
 文字の大きさと色 
<SPAN STYLE="FONT-SIZE:50PX; COLOR:RED">文字</SPAN>
文字


T
 
 文字の太さ 
<SPAN STYLE="FONT-WEIGHT:BOLD;">太字</SPAN>

太さの値 . . . BOLD のみ有効。
EXTRA-LIGHT/LIGHT/DEMI-LIGHT/MEDIUM DEMI-BOLD/BOLD/EXTRA-BOLD/NORMAL
NORMAL は、太字指定範囲の中で 一時的に細字を使いたい ようなときに使用します。
<SPAN STYLE="FONT-WEIGHT:BOLD;">
太字・太字・太字
<SPAN STYLE="FONT-WEIGHT:NORMAL;">細字</SPAN>
太字・太字・太字
</SPAN>
また、<B>( 太字 ) タグと共に使用すれば、<B>の機能を無効にできます。
<B STYLE="FONT-WEIGHT:NORMAL;">太字ではありません</B>



T
 
 イタリック体 
<SPAN STYLE="FONT-STYLE:ITALIC;">イタリック体</SPAN>
ITALIC/NOMAL


T
 
 フォント   ( 字体 )
フォントを指定しても、見ている人のブラウザが使用できるフォントに限られます。
指定フォントが使用できなければ、使用できるフォントで表示されます。
<SPAN STYLE="FONT-FAMILY:Roman;">FontStyle</SPAN>
FontStyle
Netscape では、外側で指定している[MS Pゴシック]で表示されています。
 韓国語ページなら Roman フォントで表示されますが、・・・???
 日本語・英語ページでは、表示できる英語フォントが限られているようです。


特殊フォントも指定できます。
<SPAN STYLE="FONT-FAMILY:Wingdings;">JKL</SPAN>
JKL

フォントは複数指定できます。
<SPAN STYLE="FONT-FAMILY:XXX,System,Roman;">複数指定</SPAN>
複数指定  ← この場合、XXX というフォントはないので、System フォントで表示されます。

Netscape は、日本語フォントを指定できません
日本語フォントを指定すると、そのスタイル全体が無効になります
<SPAN STYLE="COLOR:red; FONT-FAMILY:MS 明朝;">日本語フォント</SPAN>
日本語フォント ← Netscape では、他のスタイル( この例では赤色 ) も無効になります。

日本語フォントを指定するときは、スタイルとは別に指定します。
<FONT FACE="Hu楷書体,MS P明朝">
<SPAN STYLE="FONT-SIZE:30PX;"> 日本語フォント </SPAN>
</FONT>
または
<FONT FACE="Hu楷書体,MS P明朝"
STYLE="FONT-SIZE:30PX;" >日本語フォント
</FONT>
日本語フォント
Netscape では、行書体 や 楷書体 の指定は無効なようです。
 行書体 や 楷書体 を指定したとき。
  → ブラウザの設定フォントで表示されます。



T
 
 行間   ( 1行の高さ=縦幅 )
<SPAN STYLE="LINE-HEIGHT:40PX;">1行目<BR>2行目<BR></SPAN>
1行目
2行目
単位に % または EM を使うと、文字の大きさを知る必要がありませんが、
Netscape では、スタイルシートで行間を%で指定すると無効です
( 上記のように直接使う場合は%でも可。)

1行中の、文字の配置について
IExplore
中間に配置
Netscape
下辺に配置
. 行間 40PX 行間 40PX
. 行間 30PX 行間 30PX
. 行間 20PX 行間 20PX
. 行間 10PX 行間 10PX
□□□□□□□□□□□□□□□□□□□□□□□□□□ 上の行
同じ行間隔のままできなフォントを表示した場合、
□□□□□□□□□□□□□□□□□□□□□□□□□□ 下の行
□□□□□□□□□□□□□□□□□□□□□□□□□□ その下の行
IExplole : 上下の行と 重なります。
Netscape : 下の行と 多く重なります。
この違いを完全に取り除くには、
まず、行間を文字の高さと同じにします。( 例 LINE-HEIGHT:100%; )
必要なら、[配置] のページにある MARGIN-TOP/BOTTOM で、上下にスペースを作ります。
Netscape では、<BR>タグに MARGIN-BOTTOM のスタイルを適用できます

※ 行間指定範囲内では、行間は一定です。
  文字の大きさを変えたときは、行間の変更が 必要な場合もあります。

※ 同じ行にある小さな文字は、大きな文字の下端に合わせて、下げられます。
小さな文字だけのとき  
小さな文字と
大きな文字


T
 
 文字の大きさ・行間・フォント( 字体 ) のまとめ書き。 
XXX には、スタイルで使用しない単語を書きます。 zzz などでも可。
 IExplore では、実際のフォント名を記述できますが、
 実在するフォント名を書くと、Netscape では そのスタイル全体が無効になります。
行間の指定は省略できます。
<SPAN STYLE="FONT:10PX/200% XXX;">大きさ<BR>行間<BR>字体<BR></SPAN>
大きさ
行間
字体

IExplore だけで表示するなら、次のような書き方が可能です。
<SPAN STYLE="FONT:10PX/200% MS Pゴシック; FONT:ITALIC; FONT:BOLD; ">
字体<BR>その他<BR></SPAN>
字体
その他



T
 
 横線   ( アンダーライン・取消し線・点滅 )
<SPAN STYLE="TEXT-DECORATION:UNDERLINE;">
横線 ( アンダーライン )
</SPAN>
NONE/(線なし) UNDERLINE/(下線) LINE-THROUGH/(取消し線) BLINK(点滅=Netscapeのみ)
NONE は、上記 FONT-WEIGHT の NORMAL の場合と同様に、
横線指定範囲の途中で、一時的に横線なしにします。
<U>( 下線 ) <S>( 取消し線 ) と共に使用して、その機能を無効にします。



T
 
 背景色・背景画像 
<SPAN STYLE="BACKGROUND-COLOR:#ECFDEE;">草色</SPAN>
<SPAN STYLE="BACKGROUND-IMAGE:URL( Big-B050.gif );">画像</SPAN>
<SPAN STYLE="BACKGROUND:#EDFDED URL( Big-B050.gif );">色+画像</SPAN>
<SPAN STYLE="WIDTH:200PX; BACKGROUND:#EDFDED URL( Big-B057.jpg )
REPEAT-X 10PX 10PX
;"><BR> 配置<BR><BR><BR></SPAN>
草色   画像   色+画像  
 配置


※ 上例は実際には、SPAN ではなく、表の TD を使っています。

Netscape では、三番目の書式で 背景色 または 背景画像の一方だけを指定することはできません。
一番目の書式では EDFDED を指定できないので、ECFDEE を指定しています。→ [備考] のページ参照。
画像ファイル名を "Big-B050.gif" のように " " で囲むと、表示されません。
IExplore は、三番目の書式で 背景色 または 背景画像の一方だけを指定可能です。

四番目の書式では、画像の配置も指定しています。
REPEAT : 全面に配置します。
REPEAT-X : 上辺に一列に配置します。
REPEAT-Y : 左辺に一列に配置します。
NO-REPEAT : 画像を一個だけ配置します。
10PX 10PX : 表示を開始する X, Y 座標です。( % パーセントでも可。)
 ( 表示開始座標は、Netscape では無視されます。)
IExplore では次のように書くこともできますが、Netscape では TOP などの指定は無視されます。
REPEAT-X TOP   TOP/CENTRE/BOTTOM
REPEAT-Y LEFT   LEFT/CENTRE/RIGHT
この二つの書式で、表示開始座標を指定すると、Netscape では画像が表示されなくなります。
REPEAT-X TOP 50PX  右端から 50PX の位置から、上辺に一列に配置します。
表示開始座標を指定しないと、IExplore は 50% の位置から表示します。

※ 表の背景スタイルは、<TABLE>ではなく、<TD>で指定します。( 対 Netscape )



T
 
 大文字/小文字変換   ( 欧文のみ )
Netscape では、着色文字と日本語ページでは 使用できません。
<SPAN STYLE="TEXT-TRANSFORM:NONE;"> aaaa BBBB</SPAN><BR>
<SPAN STYLE="TEXT-TRANSFORM:CAPITALIZE;"> aaaa BBBB</SPAN><BR>
<SPAN STYLE="TEXT-TRANSFORM:UPPERCASE;"> aaaa BBBB</SPAN><BR>
<SPAN STYLE="TEXT-TRANSFORM:LOWERCASE;"> aaaa BBBB</SPAN><BR>
無変換
頭文字
大文字変換
小文字変換

備考 IExplore のみ
複数の属性を ; で区切っただけでは見にくい場合、
2つ目以降の属性を { } または ( ) で囲んで記述することができます。

<SPAN STYLE="FONT-FAMILY:Hu楷書体;
( FONT:20PX; ) ( COLOR:WHITE; ) ( BACKGROUND:BLUE; )">
インターネット・エクスプローラ</SPAN>
インターネット・エクスプローラ


T

  mtoga@sannet.ne.jp   登録日 '96. 6.15
URL : http://www.page.sannet.ne.jp/mtoga/index.html