HTMLメモ

HTMLタグ

引用・転載タグ

<blockquote>〜</blockquote>

 

 

リンク先を新しいウインドウで開かせるタグ

「 target="_blank"」

 

 

このリンクをたどらないnofollowタグ

「 rel="nofollow"」「 rel="nofollow noopener"」

 

 

アフィリエイトリンクに使うsponsoredタグ

「 rel="sponsored"」

 

 

リストタグulとolの使い方

 

 

「ul」タグの使用方法

有名プロレスラー一覧

  • アントニオ猪木
  • ジャイアント馬場
  • 大仁田厚

上記のような場合は以下のようにリストタグ記述します。

 

有名プロレスラー一覧

<ul>

<li>アントニオ猪木</li>

<li>ジャイアント馬場</li>

<li>大仁田厚</li>

</ul>

 

ちなみにキーワード部分を太文字にする場合は、以下のような記述となります。

<ul>

<li><b>アントニオ猪木</b></li>
<li><b>ジャイアント馬場</b></li>
<li><b>大仁田厚</b></li>
</ul>

 

 

「ol」タグの使用方法

有名タレント一覧

  1. 田原俊彦
  2. 近藤真彦
  3. 野村義男

上記のような場合は、以下のように記述します。
有名タレント一覧

<ol>

<li>田原俊彦</li>
<li>近藤真彦</li>
<li>野村義男</li>
</ol>


ちなみに太文字にする場合は、以下の記述となります。

<ol>

<li><b>田原俊彦</b></li>
<li><b>近藤真彦</b></li>
<li><b>野村義男</b></li>
</ol>

 

 

ウェブ上にhtmlタグを表示させる場合・特殊文字

通常HTMLタグで使用される「<」「>」「/」「=」「”」などをそのまま記事ページで使用すると、

インターネットブラウザがタグと誤認してしまい、テキストとして表示できません。


そのような特殊文字をWEB上で表示する記述を以下に記載します。

  • <は、&lt;
  • >は、&gt;
  • "は、&#34;

それぞれ上記のように記述すると表示されていきます。
ショートコードなどで使用するなどをそのまま記述すると

ブラウザ上にはテキストとして表示されないですが、


[html]と”[“を2つ重ねて書けば、

表示されたりします。

カラーコード 装飾

テキスト文字の色を変更する

テキスト文字の色を変える場合には「font color=」タグを使って色を指定します。
<font color="red">赤</font>

<font color="blue">青</font>

<font color="green">緑</font>

<font color="yellow">黄色</font>

<font color="Fuchsia">ピンク</font>


次のようにカラーコードを選んで指定する事でも変更が出来ます。
カラーコード「#DC143C」の色

<span style="color: #dc143c;">カラーコード「#DC143C」の色</span>


カラーコードを使うことによって、沢山の種類の色に変更する事が出来ます。

カラーコードは、こちらのサイトで確認できます。


参考:カラーコード表 ウェブサイト

HTMLタグの組み合わせで文字装飾

赤い文字で太文字にする

⇒ <font color="red"><b>文字を太文字にする</b></font>


フォントサイズ4の太文字で赤にする

⇒ <font color="red" size="4"><b>フォントサイズ4の太文字で赤にする</b></font>


文字に背景色を付け下線を付ける

⇒ <font style="background-color:#FFFF00"><u>文字に背景色を付け下線を付ける</u></font>


文字を太文字にして背景色を付け下線を付ける

⇒ <font style="background-color:#FFFF00"><u><b>文字を太文字にして背景色を付け下線を付ける</b></u></font>


文字を赤太文字にして背景色を付け下線を付ける

⇒ <font color="red"><font style="background-color:#FFFF00"><u><b>文字を太文字にして背景色を付け下線を付ける</b></u></font></font>

テキスト文字のサイズを変更する

テキスト文字のサイズを変えるにはスタイルシートを使った%での全体での変更方法などもありますが、

部分指定では簡単な「font size=」タグを使った方法を解説します。


文字サイズの大きさは数字の1〜7までとなっており、

数字が大きいほど大きなサイズになります。


フォントサイズ1 ⇒<font size="1">フォントサイズ1</font>

フォントサイズ2 ⇒<font size="2">フォントサイズ2</font>

フォントサイズ3 ⇒<font size="3">フォントサイズ3</font>

フォントサイズ4 ⇒<font size="4">フォントサイズ4</font>

フォントサイズ5 ⇒<font size="5">フォントサイズ5</font>

フォントサイズ6 ⇒<font size="6">フォントサイズ6</font>

フォントサイズ7 ⇒<font size="7">フォントサイズ7</font>

その他の文字装飾HTMLタグ

文字を太文字にする ⇒ <b>文字を太文字にする</b>
文字を斜体にする ⇒ <em>文字を斜体にする</em>
文字に取り消し線を付ける ⇒ <del>文字に取り消し線を付ける</del>
文字に下線を付ける ⇒ <u>文字に下線を付ける</u>
ノート風の下線を付ける

⇒ <font style="border-bottom: 1px dashed">ノート風の下線を付ける</font>


文字に背景色を付ける

⇒ <font style="background-color:#FFFF00">文字に背景色を付ける</font>

(背景色はカラーコードで指定)

この箇所は薄い青色で囲んでいます。

⇒<div style="background-color:#EDF7FF;">この箇所は薄い青色で囲んでいます。</div>
水平線を引く


⇒<hr>
水平線の長さを変える


⇒<hr width=200>


水平線の色を変える


⇒<hr width=200 color=red>

ウェブ上にHTMLタグを表示させる場合

そのままの記号で書き込んでもWEB上では表示されない特殊文字の場合は、

それぞれ指定されている特別な記号で記述して表示させます。


以下のコードを記述する場合の特別記号です。

  • <は、&lt;
  • >は、&gt;

上記に置き換えて記述します。

テキストの背景色変えるHTMLタグ

以下のHTMLタグでテキストを囲むことにより、テキストの背景色を変更できます。

ガッツでやるしかないんだ!

上記の場合は、以下のように記載します。

<p style="background-color:#FFE2E8;border:1px solid #FF99CC;padding:5px;">ガッツでやるしかないんだ!</p>

とこのように表記しています。

男には休日は無い

上記の場合は、以下のように記載します。

<p style="margin: 0; padding: 10px; padding-left: 40px; border: 1px solid #ccc; background-color: #f7f7f7;">男には休日は無い</p>

とこのように表示しています。

男には休日は無い

上記は、

<p style="margin: 0; padding: 10px;border: 1px solid #ccc; background-color: #f7f7f7;">男には休日は無い</p>

と表示しています。

男には休日は無い

とことんない
本当にない

上記は、段落を超えて背景色を指定する記述ですが、

 

<div style="margin: 0; padding: 10px;border: 1px solid #ccc; background-color: #f7f7f7;">男には休日は無い

とことんない

本当にない</div>

と表示しています。


それぞれHTMLタグの指定している内容を変更していくことにより、

枠の幅や背景色、文字の配置場所等を変更することが可能です。


HTMLを少しづつ習得することにより理解していきましょう。

その他の枠のHTML

1)細かい点線の枠に入れる

ここに文字を入力する

↓下記をコピー&ペースト


<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;">

ここに文字を入力する。

</div>


2)点線の枠に入れる

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">

ここに文字を入力する。

</div>



3)実線の枠に入れる

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">

ここに文字を入力する。

</div>



4)二重線の枠に入れる

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333;">

ここに文字を入力する。

</div>



5)細かい点線の枠に入れる(角丸つき)

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px;">

ここに文字を入力する。

</div>



6)点線の枠に入れる(角丸つき)

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px;">

ここに文字を入力する。

</div>



7)実線の枠に入れる(角丸つき)

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">

ここに文字を入力する。

</div>



8)二重線の枠に入れる(角丸つき)

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px;">

ここに文字を入力する。

</div>


1x)細かい点線の枠に入れる -背景色付き

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; background-color: #ffff99;">

ここに文字を入力する。

</div>



2x)点線の枠に入れる-背景色付き

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; background-color: #ffff99;">

ここに文字を入力する。

</div>



3x)実線の枠に入れる -背景色付き

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; background-color: #ffff99;">

ここに文字を入力する。

</div>



4x)二重線の枠に入れる -背景色付き

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; background-color: #ffff99;">

ここに文字を入力する。

</div>



5x)細かい点線の枠に入れる(角丸つき) -背景色付き

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px; background-color: #ffff99;">

ここに文字を入力する。

</div>



6x)点線の枠に入れる(角丸つき) -背景色付き

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px; background-color: #ffff99;">

ここに文字を入力する。

</div>



7x)実線の枠に入れる(角丸つき) -背景色付き

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px; background-color: #ffff99;">

ここに文字を入力する。

</div>



8x)二重線の枠に入れる(角丸つき) -背景色付き

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px; background-color: #ffff99;">

ここに文字を入力する。

</div>


1xx)細かい点線の枠に入れる – 濃い背景色付き・文字色変更

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; background-color: #009999; color: #ffffff;">

ここに文字を入力する。

</div>



2xx)点線の枠に入れる – 濃い背景色付き・文字色変更

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; background-color: #009999; color: #ffffff;">

ここに文字を入力する。

</div>



3xx)実線の枠に入れる – 濃い背景色付き・文字色変更

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; background-color: #009999; color: #ffffff;">

ここに文字を入力する。

</div>



4xx)二重線の枠に入れる – 濃い背景色付き・文字色変更

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; background-color: #009999; color: #ffffff;">

ここに文字を入力する。

</div>



5xx)細かい点線の枠に入れる(角丸つき) – 濃い背景色付き・文字色変更

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px; background-color: #009999; color: #ffffff;">

ここに文字を入力する。

</div>



6xx)点線の枠に入れる(角丸つき) – 濃い背景色付き・文字色変更

ここに文字を入力する


↓下記をコピー&ペースト



<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px; background-color: #009999; color: #ffffff;">

ここに文字を入力する。

</div>



7xx)実線の枠に入れる(角丸つき) – 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px; background-color: #009999; color: #ffffff;">

ここに文字を入力する。

</div>


8xx)二重線の枠に入れる(角丸つき) – 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px; background-color: #009999; color: #ffffff;">

ここに文字を入力する。

</div>

タイトルを枠に被らせる

1)細かい点線の枠に入れる


タイトル付き枠
ここに文字を入力する。


↓下記をコピー&ペースト



<fieldset style="border: 1px dotted #000000; padding: 10px;">



<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>



2)実線の枠に入れる



タイトル付き枠
ここに文字を入力する。


↓下記をコピー&ペースト



<fieldset style="border: 1px solid #000000; padding: 10px;">



<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>



3)点線の枠に入れる



タイトル付き枠
ここに文字を入力する。


↓下記をコピー&ペースト



<fieldset style="border: 1px dashed #000000; padding: 10px;">



<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>



4)二重線の枠に入れる



タイトル付き枠
ここに文字を入力する。


↓下記をコピー&ペースト



<fieldset style="border: 5px double #000000; padding: 10px;">



<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>


進化形)タイトル部分に背景色を入れる



タイトル付き枠
ここに文字を入力する。


↓下記をコピー&ペースト





<fieldset style="border: 1px double #000; padding: 10px;"><legend style="background-color: #FF0099; padding: 3px 10px; border-radius: 5px; color:

#ffffff;">タイトル付き枠</legend>ここに文字を入力する。</fieldset>





賢威6.1限定ショートコード 文字に背景色をつけるタグ

以下はワードプレステンプレートで賢威を使用している場合に有効なショートコードです。

テキスト文字に背景色をつけることができます。

  • 黄色マーカー
  • <span class="box-yellow">黄色マーカー</span>

  • 水色マーカー
  • <span class="box-aqua">水色マーカー</span>

  • 灰色マーカー
  • <span class="box-gray">灰色マーカー</span>

  • 赤色マーカー
  • <span class="box-red">赤色マーカー</span>

※ショートコードは指定テンプレートごとなどで利用できるもので、それ以外だと無効になります。

注意事項

上記htmlタグを、コピー・ペーストでそのまま使う場合、

「”」の部分が、ウェブの特性上全角に変換されていますので、

記述する際に、その部分を半角に変更して下さい。


(2013年7月19日更新で特殊文字に対応しました。そのままコピペできます)

関連記事

以下の記事は、当記事と同じく基本的なhtmlタグをまとめています。

以下の記事でhtml文法のチェックできるツールを解説しています。