シェアする

  • このエントリーをはてなブックマークに追加

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

シェアする

  • このエントリーをはてなブックマークに追加
  • 19
text_font-tag-00-web


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

今回は、基本中の基本!

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

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

目次にある項目をクリックすると
解説ページに飛びますよ。
johnny-c

見出しをつける

記述例

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

実際の見え方

text_font-tag-05

タグをコピーする

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

改行する

記述例

<br>

実際の見え方

改行1
改行2
改行3

タグをコピーする

<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>

実際の見え方

この文字サイズは10ピクセルです。
この文字サイズは30ピクセルです。

タグをコピーする

<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>

実際の見え方

text_font-tag-01
text_font-tag-01

タグをコピーする

<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=”MS P明朝”>あいうえお</font>
<font face=”Impact”>ABCD123</font>
<font face=”sans-serif”>あいうえお</font>

実際の見え方

text_font-tag-02
text_font-tag-03
text_font-tag-04

タグをコピーする

<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=”MS P明朝” size=”5″ color=”#3300cc”><b>文字</b></font>

実際の見え方

文字

タグをコピーする

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

まとめ(感想)

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

johnny-tubuyaki
コピペしてバンバン使ってね!

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

文字のタグ(テキスト・フォントタグ)【保存版】
この記事をお届けした
クリエイターチェックの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク