これまでFONT要素などを使って文字などを修飾していた場合、CSSではどう書けばいいのか、それについて書き出してみます。 経験的なものであり、似たような結果しか得られない場合や、うまく行かない場合もあるかもしれません。 あくまで、参考と言うことでお願いします。 (そもそも論として、グラフィカル表示が可能なブラウザを前提とした話ですのでご注意ください。)
経験的、と言いつつ、私は自分でFONT要素を使って文字修飾をしたことがありません(汗)。 Netscape Composerを使っていたとき、ツールがそういったソースコードを生成していましたが、自分でソースを記述するようになったとき、CSSを使うようになったためです。
HTML4では、要素をグループ化する要素として、DIV要素(ブロック用)とSPAN要素(インライン用)が用意されています。 基本的にはこの二つの要素にstyle属性を適用する形を取っていきましょう。 また、外部にファイルを作ったり、HEAD要素でまとめて指定しても良いでしょう。
ブロックは段落や見出し、テーブルのように塊としてとらえるもの、インラインはその塊の一部と言うのが私の感覚です。 基本的にはブロックの中にはブロックとインライン、インラインの中にはインラインが含めることが出来ます。 画像などであるIMG要素はインラインに分類されるのは注意するべきかもしれません。
特に断りのない限り、「要素」と書いてある場合はHTMLの要素、「プロパティ」と書いてある場合はCSSのプロパティを表していると思ってください。 一応、HTML要素とCSSプロパティはアルファベットの大文字で、HTML属性とCSSプロパティ値は小文字で記述しています。 また、いくつかの要素については例も付け加えてあります。 あなたのブラウザが対応しているかどうか、試すことにも使えると思います。
IMGの例に使っている画像はPNG形式を使用しています。 見えないブラウザの人ごめんなさい。 「どうしても見たい」と言う場合はご連絡ください。 JPEGに切り替えると思います。 (なぜはじめからPNG以外にしないかというと、JPEGはグレースケールorフルカラー画像しか保存できないので容量が大きくなるし、GIFは例の特許問題でちょっと嫌気が差しているからです。)
また、この文章はXHTML1.0 Transitinalを宣言していますが、DTDに含まれないblink要素を含む文章になっています。 その辺は目をつぶってやってください。
物理要素
FONT-WEIGHTプロパティを使うのがよいでしょう。 対応するプロパティ値はbolderだと思いますが、NN4.75だと反応していません。 実際にはbold(lighterもとれます)でしょう。 あるいは700(他には100,200,...,900がとれます。)と言う数値も可能です。
なお、B要素を「強調」の意味で使っていたのなら、EM要素かSTRONG要素が使えます。 STRONGはEMよりも強い強調で、たいがい、EMが斜体、STRONGが太字でレンダリングされています。 こういった、論理的要素を使うというのも一つの手です。
HTML4.01非推奨要素
代替方法はこれと言ってないと思います。
強いて言えば、BODY要素にFONT-SIZEプロパティを適応させるとか。
詳しくはFONT要素の代用の項を見てください。
物理要素
FONT-SIZEプロパティを使います。
属性値はlargerかlargeで良いでしょう。
Netscape Navigator 4.78だとBIG要素以上のサイズに見えます。
Internet Explorer 6.00やOpera 6.0だとlargeを指定したときが少し大きくなります。
私なら文字サイズはパーセントで指定するので気にしません。
強調したいなら、EMかSTRONGを用い、文字のサイズはスタイルシートで記述、と言うのが好ましいと思います。
標準規格に存在しない要素
そもそも使わないのがもっとも良いでしょう。 <BLINK>はNetscape社の独自拡張なので、BLINK要素というのも差し支えたいところです。 点滅は目を引くことは確かですが、ひどく見にくく目が疲れるので、それ以外の方法で強調を行うべきでしょう。 どうしても点滅させたいのなら以下の方法がありますが、点滅効果を表現できなくてもCSSに適合したブラウザになれるので、保証はされません。 現状では、Netscape社のブラウザやMozilla 1.2βもサポートしています。 Opera 6.0(7.0βも)はCSSによる指定のみサポートしています。
TEXT-DECORATIONプロパティに、blinkを指定すると点滅するブラウザもあります。
他にTEXT-DECORATIONはスペースで区切っていくつも値を指定できます。
underline(下線)、overline(上線)、text-through(取消線)、またはnone(なし)です。
誤用の多い要素
BLOCKQUOTEはブロック単位の引用の要素ですが、ほとんどのブラウザがインデントして表示するので、インデントするために使用されている例が少なからずあります。
もしそのように利用していたならば、MARGINプロパティを使った指定に書き換えましょう。
プロパティ値は単位付きの数値で表し、上(TOP)・右(RIGHT)・下(BOTTOM)・左(LEFT)のマージンを順に指定できます。
一つしか指定しなければ、全てのマージンがその値になります。
左だけ指定したい場合などは、MARGIN-LEFTプロパティも使えます。
なお、CSSでは、外側からMARGIN、BORDER、PADDINGとなっているので、ボーダーのなかでインデントさせるには、PADDINGプロパティを使う必要があります。 プロパティ値はMARGINと同じ指定方法です。
HTML4.01非推奨属性
BODY要素のstyle属性などで、BACKGROUND-IMAGEプロパティを使います。
プロパティ値は画像を指定します。
HTML4.01非推奨属性
BODY要素のstyle属性などで、BACKGROUND-COLORプロパティを使います。
プロパティ値は色を指定します。
HTML4.01非推奨属性
リンク・訪問済みリンク・選択されたリンクの色は、CSSのA要素の定義済みクラス、A:link, A:visited, A:activeをそれぞれ使い、プロパティをCOLOR、値に色を指定すれば良いでしょう。
この他にも、現在マウスでポイントされているリンクを表すA:hoverという疑似クラスもあります。
HTML4.01非推奨要素
そもそもHTML4.01の仕様書にDIV要素のalign属性にcenterを指定したもの
と書いてあります。
その通りに書けばよいでしょう。
HTML4.01非推奨要素
CSSとは関係なく、ULを使用するように強く推奨されています。
ほとんどのブラウザでは、ULと同様に描画されてしまうようです。
HTML4.01非推奨要素
属性ごとに代替方法を例示します。
HTML4.01非推奨属性
FONT-SIZEプロパティを使うと良いでしょう。 プロパティ値には文字サイズを指定できます。
HTML4.01非推奨属性
COLORプロパティに色を指定すればOKです。
HTML4.01非推奨属性
FONT-FAMILYプロパティにそのまま書き写せばよいと思います。
HTML4.01非推奨属性
以前はFLOATプロパティを使った方法を紹介していましたが、MARGINプロパティの方が正しいように思います。 MARGIN-LEFTやMARGIN-RIGHTにわけて使うことも出来ます。 下の例は width属性で50%に指定してあります。
Mozilla系ではうまくレンダリングできるようですが、Internet Explorer、Operaともうまくありません。
HTML4.01非推奨属性
すみません、私の力量ではわかりません。
HTML4.01非推奨属性
HEIGHTプロパティを指定してやると、うまくいくみたいです。 ただし、Netscape Navigator 4.78では反応しません。
HTML4.01非推奨属性
CSSでWIDTHプロパティを指定すれば良いでしょう。
ただし、Netscape Navigator 4.78では、alignがleftになってしまうようです。
物理要素
FONT-STYLEプロパティにitalicを指定すれば同じ効果が得られます。
もし、強調のためにI要素を使ったのであれば、EMなりSTRONGなりに置き換えるべきです。
あまりに結果がひどいので、別ファイルに分離しました。 Netscape Navigator 4.xを使って見ても、どうなっているのか理解するのに苦労されるかもしれません。 結論としては、IMG要素の属性をCSSで代用するのはNN4.xがまともになるまであきらめた方がいい気がします。
標準規格に存在しない要素
Microsoft独自拡張タグで、文字とかを左右に動かすそうです。
全部見るのに時間がかかるし、動くので見にくいです。
やはり、BLINK同様、使うのを金輪際やめるのがベストでしょう。
代用というとそれっぽい動作をするJavascriptをどこかで見た覚えがありますが、同じく見にくいのでやめるべきです。
i-modeとかJ-SkyWebとかでも<MARQUEE>使えるそうですが、狭い画面で意味あるんでしょうか。
HTML4.01非推奨要素
DIR要素と同じで、ULを用いることが強く推奨されています。
HTML4.01非推奨要素
まず、「取り消し」の意味で使っているのなら、DEL要素があるので、これを使ってしまいましょう。
しかし、Netscape Navigator 4.78では取消線が描画されないので、DEL{TEXT-DECORATION:line-through;}などと指定すると良いです。
単に取消線を描画するには、TEXT-DECORATIONプロパティにline-throughを指定します。 TEXT-DECORATIIONには他にもいくつか値が指定できます。 BLINK要素の代用のところを参照してください。
物理要素
FONT-SIZEプロパティに適当な文字サイズを指定すればOKです。 残念ながら「強調」の逆である「隠蔽」(笑)を意味する論理的要素はHTMLには無いので、CSSでの指定のみになります。 ただ、SPAN要素などに置き換えないでマークアップするやり方も紹介されていますので、参考にしてください。
Netscape Navigator 4.78だとSMALL要素より、smallerの方が小さく見えますね。
相対サイズの基準値の算出方法が違いそうです。
Internet Exploerer 6.00やOpera 6.0だとSMALL要素とsmallerは同じですが、smallがやや大きく見えます。
BIG要素でも同様でしたが、原因は不明です。
HTML4.01非推奨要素
S要素と全く同じですので、そちらを参照してください。
物理要素
FONT-FAMILYプロパティにフォントの総称ファミリの一つ、monospaceを使うのがよいでしょう。
HTML4.01非推奨です。
U要素の代用にはTEXT-DECORATIONプロパティで、ここではunderlineを指定します。
強調をしたいのなら、EMかSTRONGで、文字修飾の調整はスタイルシートで行えばよいと思います。
文字サイズの指定には、相対指定と絶対指定が出来ます。 読みやすさのために、標準の文字サイズを変更されている方もいるので、相対指定がおすすめです。
直前の文字サイズを100%としてパーセンテージで表す方法と、smallerとlargerと指定する方法があります。
smallerやlargerによる効果は絶対指定の段階と同じなので、1.2倍と期待できます。
ただし、一番近いサイズに丸められることもあるので、注意が必要です。
単位付き数値で指定することも可能ですし、FONT要素時代の1から7にならって、xx-small、x-small、small、medium、large、x-large、xx-largeという指定方法もあります。
各段階間のサイズの比は1.2であることが推奨されているので、大体そのくらいを期待しても良いでしょう。
ちなみに1.2と言うのはCSS2での話で、CSS1では1.5だったようです。 この辺に、largeとlargerの食い違いやsmallとsmallerの食い違いの原因があるような気もします。
文字の大きさや、マージンやパディング、ボーダーの太さの指定などに使います。
em(font-sizeに一致), ex(アルファベットxの高さ), px(ピクセル)があります。
emはその要素のfont-sizeに一致しますが、font-sizeの指定にemを用いるときは、親要素のfont-sizeに一致します。
exはその要素のフォントのアルファベットのxの高さになりますが、xが無いフォントでも定義されるようです。
pxは1ピクセルが相対単位として定義されるためこちらのカテゴリになりますが、事実上絶対単位と考えて良いでしょう。
in(インチ), cm(センチメートル), mm(ミリメートル), pt(ポイント。72分の1インチ), pc(パイカ。12ポイント)があります。
背景の指定に使います。
書き方は、BACKGROUND:url(画像のある位置);の様な感じです。
色はwhiteや#ffffff、rgb(0,0,0)などで指定できます。
名前で色を指定する場合、ブラウザによって反応しない色もあるので注意が必要です。
rgbには%指定も使えます。
FONT要素などをCSSで代用する、などと書いたのですが、振り返ってみるとFONT以外の方が多くなっていました。 個人的にはそれなりに便利な文書に仕上がったと思っています。 感想・意見・苦情・ミス指摘などはBBSで承っております。 それと、このページを見てサイトを作成したという方、相互リンクなどさせていただけると嬉しいです。
One-Poemが書いたものよりよほどためになると言われている、参考文献集です(笑)。