文字のタグ（テキスト・フォントタグ）【保存版】

 
どうも、ジョニー（@creatorcheck）です。

今回は、基本中の基本！

文字のタグ（テキスト・フォントタグ）のご紹介です。

いちいちタグを打ち込むのは面倒なので、このページをブラウザでお気に入りして、必要な時にコピペして使ってください。

見出しをつける

記述例

<h1>この見出しはh1です</h1>
<h2>この見出しはh2です</h2>
<h3>この見出しはh3です</h3>
<h4>この見出しはh4です</h4>
<h5>この見出しはh5です</h5>
<h6>この見出しはh6です</h6>

実際の見え方

タグをコピーする

<h1>この見出しはh1です</h1>
<h2>この見出しはh2です</h2>
<h3>この見出しはh3です</h3>
<h4>この見出しはh4です</h4>
<h5>この見出しはh5です</h5>
<h6>この見出しはh6です</h6>

 

改行する

記述例

<br>

実際の見え方

改行１
改行２
改行３

タグをコピーする

<br>

 

文字に色をつける

記述例

<font color=”#FF0000″>この文字のカラーコードはFF0000です</font>
<font color=”#00BFFF”>この文字のカラーコードは00BFFFです</font>
<font color=”#FF8C00″>この文字のカラーコードはFF8C00です</font>

実際の見え方

この文字のカラーコードはFF0000です
この文字のカラーコードは00BFFFです
この文字のカラーコードはFF8C00です

タグをコピーする

<font color="#カラーコード">色を変える文字</font>

 

文字の大きさを変える

記述例

<font size=”1″>文字</font>
<font size=”2″>文字</font>
<font size=”3″>文字</font>
<font size=”4″>文字</font>
<font size=”5″>文字</font>
<font size=”6″>文字</font>
<font size=”7″>文字</font>

実際の見え方

文字
文字
文字
文字
文字
文字
文字

タグをコピーする

<font size="1">文字</font>
<font size="2">文字</font>
<font size="3">文字</font>
<font size="4">文字</font>
<font size="5">文字</font>
<font size="6">文字</font>
<font size="7">文字</font>

 

文字の大きさをピクセルで指定する

記述例

<div style=”font-size:10px;”>この文字サイズは10ピクセルです。</div>
<div style=”font-size:30px;”>この文字サイズは30ピクセルです。</div>

実際の見え方

タグをコピーする

<div style="font-size:10px;">この文字サイズは10ピクセルです。</div>
<div style="font-size:30px;">この文字サイズは30ピクセルです。</div>

 

文字を太くする

記述例

<strong>文字</strong>
<b>文字</b>

実際の見え方

文字
文字

タグをコピーする

<strong>文字</strong>
<b>文字</b>

 

文字を斜めにする

記述例

<em>文字</em>
<i>文字</i>

実際の見え方

タグをコピーする

<em>文字</em>
<i>文字</i>

 

文字に下線をつける

記述例

<u>文字</u>

実際の見え方

文字

タグをコピーする

<u>文字</u>

 

文字に取り消し線をつける

記述例

<s>文字</s>

実際の見え方

文字

タグをコピーする

<s>文字</s>

 

文字の背景に色をつける

記述例

<font style=”background-color:#ffff00;”>文字</font>

実際の見え方

文字

タグをコピーする

<font style="background-color:#カラーコードを指定;">文字</font>

 

文字の書体を指定する

記述例

<font face=”ＭＳ Ｐ明朝”>あいうえお</font>
<font face=”Impact”>ABCD123</font>
<font face=”sans-serif”>あいうえお</font>

実際の見え方

タグをコピーする

<font face="書体を指定">文字</font>

 

文字の位置を指定する

記述例

<p align=”left”>文字</p>
<p align=”center”>文字</p>
<p align=”right”>文字</p>

実際の見え方

文字

文字

文字

タグをコピーする

<p align="left">文字</p>
<p align="center">文字</p>
<p align="right">文字</p>

 

いろいろな組み合わせ

記述例

<font face=”ＭＳ Ｐ明朝” size=”5″ color=”#3300cc”><b>文字</b></font>

実際の見え方

文字

タグをコピーする

<font face="書体を指定" size="サイズの指定" color="#3300cc"><b>文字</b></font>

 

まとめ（感想）

今回ご紹介したテキスト＆フォントタグを自分なりに活用してみてください。使い方次第では、新たな発見ができたり楽しいかも！？

売れてるホームページ入門書