★ フォントスタイルの指定 大きな字、小さな字、太字の強調、斜体の強調
但し、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>タグを推奨しています。
物理的フォントタグ(フォントスタイル要素)=非推奨 論理的フォントタグ(フレーズ要素)=推奨 ・・・フォントはスタイルシートの設定を推奨しています。
▲リファレンスサイトが、論理タグ肯定派ばかりとは限らないのも、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」では、フォントにまつわる物理タグの記述は、非推奨要素・属性のため、スタイルシートの設定を推奨しています。
非推奨要素属性を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 は不可
|