未知の苦HTML解道 つまず紀行! <ホームページ作成支援>










改行



段落









 HOME >> 実践HTML >> フォント >> フォントスタイル
 ★ フォントスタイルの指定
 大きな字、小さな字、太字の強調、斜体の強調

但し、HTML定義「HTML4.01 Transitional」では、フォント要素・属性は、非推奨

ブロックレベル要素の中に、FONT要素とその属性値を書き加えると、初期設定のフォントスタイルを変更することができます。

要素(タグ)に追加した属性の値は、二重引用符(ダブルクォーテーションマーク" ")で括ります。


例えばフォントスタイルの変更 >> ゴシック系を斜体に変更

 未知の苦HTML解道 ・・・ >>  未知の苦HTML解道


□ソース表示

<p>未知の苦html解道</p>

<p><font size="3">
<em>未知の苦html解道</em>
</font></p>

 

HTMLのリファレンスサイトを覗いてみると分かりますが、"大きな字・小さな字・太字"などのフォントの解説は、サイトごとに「様々」というのが現状です。

当管理人も何がなにやら迷いましたが、フォントタグは、物理タグと論理タグという概念があることをつきとめました。


◆論理的フォントタグと物理的フォントタグ

■ <big> 大きな字 </big> ・・・ 大きな字 / 物理タグ

■ <strong> 太字 </strong> ・・・ 太字 / 倫理タグ

■ <b> 太字 </b> ・・・ 太字 / 物理タグ

■ <small> 小さな字 </small> ・・・ 小さな字 / 物理タグ

■ <em> 斜体字 </em> ・・・ 斜体字 / 論理タグ

■ <i> 斜体字 </i> ・・・ 斜体字 / 物理タグ

■組合せもOK?
 <big><strong> 大きく太字 </strong></big>

 ・・・物理タグと論理タグ >>  大きく太字

<strong>タグは、"より強い強調"、<em>タグは、"強調" が、本来の定義、位置付けのようです。

例えば、<b>タグでも、<strong>タグでも、太字になりますが、HTML定義HTML4.01 Transitional は、論理的フォントタグの<strong>タグを推奨しています。

物理的フォントタグ(フォントスタイル要素)=非推奨
論理的フォントタグ(フレーズ要素)=推奨
・・・フォントはスタイルシートの設定を推奨しています。


■「物理タグ」と「論理タグ」 Airemix様の要素(タグ)の解説。


■物理マークアップの弊害

 HTML鳩丸倶楽部様 鳩丸倶楽部 | 知識編鳩丸ご意見番
 >> なんで FONT は駄目子ちゃんなのか
 >> FONT は駄目? | FONT 要素 (物理マークアップの弊害)


■EMタグ(EMphasis) と strongタグ・・・( EMphasisとは「強調、重要、重点」などの意)

 em・strong・mark・b要素の違い。 吉川ウェブ様

 HTML5におけるstrongとemの違い。 Ginpen.com様

▲リファレンスサイトが、論理タグ肯定派ばかりとは限らないのも、HTMLの妙味かもしれません。


フレーズ要素 [論理的タグ] と
フォントスタイル要素  物理的タグ]

下記の表は、"ネット検索"で得た物理的フォントタグと、論理的フォントタグの定義を、管理人なりに噛み砕き、まとめてみました。

フォントの
特徴
論理的フォントタグ 物理的フォントタグ
大きな字
小さな字
(論理タグ該当なし) <big>大きな字</big>
<small>小さな字</small>
 スタイルシートの設定例  p { font-size: 15px ;}

タグ要素にインラインスタイルの埋め込み例
 <span style="font-size: 16px ;">大きな字16px</span>
 <span style="font-size: 10px ;">小さな字10px</span>

 
より強い
強調

(太字)
<strong>より強い強調</strong> <b>太字</b>
NN7.1=無視
   b=Bold
 ボールド体の意
 スタイルシートの設定例  p { font-weight: bold ;}

タグ要素にインラインスタイルの埋め込み例
 <span style="font-weight: bold ;">強調</span>

 
強調
(斜体)
<em> 強 調 </em> <i> 斜 体 </i>
  em=Emphasis 強調の意 i=Italic
 イタリック体の意
 スタイルシートの設定例  p { font-style: italic ;}

タグ要素にインラインスタイルの埋め込み例
 <span style="font-style: italic ;">斜体</span>

 
抹消線 <del>削除範囲</del> <strike>抹消線</strike>
<s>抹消線</s>
 del=Delate 削除の意 挿入は ins要素
 del 要素は右記"抹消線"の代替要素
 strike、s 共に
 =Strike through
 抹消線の意
 スタイルシートの設定例
  p { text-decoration: line-through ;}

タグ要素にインラインスタイルの埋め込み例
 <span style="text-decoration: line-through ;">抹消線</span>

 同義 <strike> と <s>タグの足跡
Web for biginner様 s要素とstrike要素

 
下線 (論理タグ該当なし) <u>下線</u>
   u=Underline text
 下線付きテキスト
 スタイルシートの設定例
  p { text-decoration: underline ;}
上線の場合は  p { text-decoration: overline ;}

タグ要素にインラインスタイルの埋め込み例
 <span style="text-decoration: underline ;">下線</span>

 
等幅
(固定幅)
(論理タグ該当なし) <tt>等幅(固定幅)</tt>
   tt=Teletype Text
 テレタイプテキスト
 スタイルシートによる1類似設定例
  p { letter-spacing: 4px ;}

タグ要素にインラインスタイルの埋め込み例
 <span style="letter-spacing: 4px ;">等幅(固定幅)</span>

 

TT要素以外の等幅フォント(フレーズ要素)と使用上の定義

下述は管理人の個人的見解として主に、コンピュータやプログラムに精通する専門分野、学術的な分野向けのタグと察します。

tt要素以外の等幅フォント(フレーズ要素) タグの語源と定義
 <kbd>テキスト 123abcABC</kbd> kbd=Keyboardの意
 キーボード入力した
 テキスト
 <cite>引用 123abcABC</cite> cite=Citation
 引用の意
 別ソースの引用や
 参照

長文の引用は<blockquote>〜</blockquote>タグを使います。
斜体の強調が目的ならば<em>〜</em>タグです。

 <samp>abc.123.text Y/N</samp> samp=Sample
 サンプルの意
 参照したテキスト
 サンプル
 <code>if (a=1)(b=2)(c=3)</code> code=
 コンピュータコード
 ソースコードの記述

コードが長いときは<pre>〜</pre>タグで挟みます。
入力したとおりに表示されます。

 <dfn>定義 JavaScript言語</dfn> dfn=Defining Term
 用語を定義するの意
 専門用語等の定義
 <var>変数 \| n=123 a=abc A=ABC</var> var=Variable
 変数の意
 変数や引数の表示

<var>〜</var>は<code>〜</code>の中に記述します。

等幅フォント参考サイト 日本語等幅フォント Qiita様

HTML定義「HTML4.01 Transitional」では、フォントにまつわる物理タグの記述は、非推奨要素・属性のため、スタイルシートの設定を推奨しています。

■HTML4.01非推奨要素属性

WEB for beginner 作成支援
 TOP | Reference | HTML非推奨要素・属性 >>
 □ 非推奨とされる要素と属性

非推奨要素属性をHTML文書内に代替記述するときは[style属性]に[font要素の属性]とその値"をインラインスタイルで直接記述します。

フォントの太さ指定・・・FONT-WEIGHT属性


未知の苦HTML解道


 

□FONT要素で記述したソース表示

<font face="Times" size="6" color="#0000ff" style="font-weight:bold;">未知の苦html解道</font>

上記作例の場合、font要素の代替記述は、次のようになります。

<span style="font-family:Times; font-size:32px; color:#0000ff;font-weight: bold;">未知の苦html解道</span>

フォントの太さを指定するときは、予めスタイルシートに設定しておき、そのファイルを呼び出すか<タグ要素>〜</タグ要素>の中にインラインスタイルで直接記述します。

上記作例のソース中、タグ要素にフォントサイズの指定は"単位無指定"で記述していますが、スタイルシートの場合は固有の"単位"が必要です。

単位無指定"6"と同じ大きさになる単位をpxで照らし合わせると"32px"でした。

単位の詳細 >> フォントの単位指定


フォントの太さ指定その種類 font-weight属性の値

normal、 bold、 100〜900(100刻みの9段階)、 bolder、 lighter

フォントの太さ指定のポイント

太字になる、ならないは、フォントによって対応、非対応あり。
100〜900の太さ指定は、必ずしも9段階に太さが変わるわけではない。

管理人は、100〜900の太さ指定がどのようなときに使われるのか、皆目見当が付きません。作例は参考程度に留めております。

■normal・・・"既定値(標準値)"


■bold・・・"太字" ▼ソース表示

<p style="font-weight:bold">"太字"</p>


■100〜900の数値 "100刻みの9段階"
 ・・・400=normal と同じ、 700=bold と同じ

100と400比較

200と400比較

300と500比較

400と600比較 ▼ソース表示

<p style="font-weight:400">400と
<font style="font-weight:600">600比較</font></p>

500と600比較

600と700比較

700と800比較

800と900比較

900と400比較


■bolder(相対指定)
・・・親要素(または親タグ)に対して1段階太く

900の指定に対して bolder は不可

"より太く"は"より太く"になります ▼ソース表示

<p style="font-weight:normal>"より太く"は
<font style="font-weight:bolder">
"より太く"になります</font></p>


■lighter(相対指定)
・・・親要素(または親タグ)に対して1段階細く

100の指定に対して lighter は不可



  実用ツール

HTML文法検証
HTML文書の文法チェックと採点

CSS文法検証
W3C CSS 検証サービス

IT用語辞典
IT用語検索
<< Back | ホーム | ▲Page Top | Next フォントカラー
Base template by WEBMAGIC  Copyright © 未知の苦HTML解道, all right reserved, since 2004. 8.25