ウェブサイト作りで使えるHTMLタグ(見出しタグ、フォント用)

pcg01.png HTML

見出しタグ、フォント装飾用タグ

これから簡単にHTMLタグをいくつか紹介します。

まず初めに、見出しタグ( h1 ~ h6 )です。

見出しタグ( h1 ~ h6 )

見出しタグとは、その名の通り「見出し」に使うタグです。

h1 から h6 まであり、h1 が一番 重要度 が高く、
一般的に文字の大きさも大きいです。

hの右の数字が増えるに従って、重要度は下がり、
一般的な文字の大きさも小さくなっていきます。

見出しをつける順番としては、

h1:見出し1
h2:見出し2
h3:見出し3

のようにh1から順に付けていきます。

一般的にページタイトルh1タグを使用し、
記事タイトルh2タグを使用しています。

従って一般的には、記事の内容ではh3タグから使用します。

見出しなのでh3タグとh4タグの2つを使用すれば
十分見やすくなるでしょう。

タグの書き方としては、

<h3>見出し3</h3>
<h4>見出し4</h4>

のように書きます。

CSSというスタイルの指定を別でしますので
そのタグだけを特別に指定する場合

<h3 align="left">
<h3 style="color : navy; background-color:aliceblue">

など、タグに直接指定することも出来ます。

具体的には設定内容も多いので応用編として
機会があれば今後説明します。

ここで確認して欲しいことは、
見出しとしてh1タグを利用すると
読みやすくなるということです。

フォント用タグ

簡単なフォント用タグの例

●太字:<b></b>
●斜体:<i></i>
●強意・強勢:<em></em>(表示は斜体)
●強調:<strong></strong>(表示は太字)

・複数指定する場合
例:太字、斜体
<strong><i>文字</i></strong>

HTML5から fontタグ廃止されたので、
フォントの色やサイズを変更する場合
spanタグを使用しスタイルシート指定します。

●フォントサイズ:
  <span style=”font-size:数;”>大きさ</span>
●フォントの色:<span style=”color:色;”>色</span>
※<span>タグ自身は特に意味を持っていません。

両方指定も出来ます。
<span style=”font-size:数; color:色;”>文字</span>

<span style="font-size:100%; color:red;">文字</span>

フォントサイズを数字で指定する場合、
px,em,rem,% の単位があります。

px:絶対指定で画面上の1ピクセルを基準
em:相対指定で親要素を基準
rem:相対指定でルート(HTML)要素を基準
%:相対指定で親要素を基準

文字の背景色

文字の背景色を指定するには
spanタグを使用しスタイルシート指定します。

●文字の背景色
<span style=”background-color:色”></span>

色の指定方法ですが、
・カラーネーム(例:red)
・16進表記カラーコード(例:#ff0000)
の2種類の指定方法があります。

カラーネームは基本16色あり、
全部で147色あります。

基本16色または標準16色は
・Red(#ff0000)
RedRedRedRedRedRed
・Yellow(#ffff00)
YellowYellowYellowYellowYellowYellow
・Lime(#00ff00)
LimeLimeLimeLimeLimeLime
・Aqua(#00ffff)
AquaAquaAquaAquaAquaAqua
・Blue(#0000ff)
BlueBlueBlueBlueBlueBlue
・Fuchsia(#ff00ff)
FuchsiaFuchsiaFuchsiaFuchsiaFuchsiaFuchsia
・Maroon(#800000)
MaroonMaroonMaroonMaroonMaroonMaroon
・Olive(#808000)
OliveOliveOliveOliveOliveOlive
・Green(#008800)
GreenGreenGreenGreenGreenGreen
・Teal(#008080)
TealTealTealTealTealTeal
・Navy(#000080)
NavyNavyNavyNavyNavyNavy
・Purple(#800080)
PurplePurplePurplePurplePurplePurple
・Black(#000000)
BlackBlackBlackBlackBlackBlack
・Gray(#808080)
GrayGrayGrayGrayGrayGray
・Silver(#c0c0c0)
SilverSilverSilverSilverSilverSilver
・White(#ffffff)
WhiteWhiteWhiteWhiteWhiteWhite

カラーコードは#の後に、
Red(赤) Green(緑) Blue(青)の順に
16進表記、6桁で指定します。

省略も可能で例えば、赤(#f00)、青(#00f)
のように3桁で表現ができます。

WindowsやMacintoshなどの違いやHTMLのバージョン、
ウェブブラウザなどの環境により表示が違う場合もあります。

コメント

タイトルとURLをコピーしました