HTMLタグによる文字装飾、画像や表の挿入、リンク設置などの方法

この記事では、HTMLタグによる文字装飾、画像や表の挿入、リンク設置などの方法について説明します。

※ 機能によって使えるタグと使えないタグがあります

 

1. 目次
2. 文字の色・大きさ・背景色を変える(spanタグ)
3. 文字の色を変える
4. 文字に背景色を設定する
5. 文字装飾を組み合わせる
6. 画像を挿入する(imgタグ)
7. 表を作成する(table/tr/th/tdタグ)
8. リンクを設置する(aタグ)
9. 　　電話できるリンクを設置する

 

文字の色・大きさ・背景色を変える(spanタグ)

spanタグを使うと、文字の色や大きさを変えたり、背景色を設定したりできます。

タグの中のstyleの箇所で設定をします。

 

文字の色を変える

style="color: ○○" のように記述します。〇〇の部分は色名やカラーコードを記載します。

【記入例】

<span style="color: red">赤色</span>と<span style="color: blue">青色</span>を混ぜると<span style="color: #956DAF">紫色</span>になります。

【実際の表示】

赤色と青色を混ぜると紫色になります。

 

文字の大きさを変える

style="font-size: ○○px" のように記述します。〇〇の部分は数値を記載します。

【記入例】

<span style="font-size: 25px">25px</span>と<span style="font-size: 40px">40px</span>ではこんなに文字の大きさが違います。

【実際の表示】

25pxと40pxではこんなに文字の大きさが違います。

 

文字に背景色を設定する

style="background-color: ○○" のように記述します。〇〇の部分は色名やカラーコードを記載します。

【記入例】

<span style="background-color: red">赤色</span>と<span style="background-color: blue">青色</span>を混ぜると<span style="background-color: #956DAF">紫色</span>になります。

【実際の表示】

赤色と青色を混ぜると紫色になります。

 

文字装飾を組み合わせる

「;(セミコロン)」でつなげて文字装飾を組み合わせて使うことができます。

style="color: ○○; font-size: ○○px; background-color: ○○" のように記述します。

【記入例】

<span style="color: red; font-size: 25px; background-color: yellow">背景黄色で文字赤25px</span>と<span style="color: white; font-size: 40px; background-color: blue">背景青色で文字白40px</span>を見比べるとこんな感じです。

【実際の表示】

背景黄色で文字赤25pxと背景青色で文字白40pxを見比べるとこんな感じです。

 

画像を挿入する(imgタグ)

imgタグを使うと、画像を挿入することができます。

タグの中のsrcの箇所で設定をします。

<img src="○○" > のように記述します。○○には挿入したい画像のURLを記載します。

※ HP等にアップロード済みの画像が使用できます。PC上の画像は使用できません。

【記入例】

スマホからでも簡単に予約ができます。

<img src="https://storage.googleapis.com/studio-design-asset-files/projects/BRO3L281qD/s-102x160_40694172-daa2-45f8-86e5-89c34a8b829c.svg" >

また、アンケート機能でご来店頂いたお客様の生の声を集めることができます。

【実際の表示】

スマホからでも簡単に予約ができます。

また、アンケート機能でご来店頂いたお客様の生の声を集めることができます。

 

表を作成する(table/tr/th/tdタグ)

table, tr, th, tdタグを使うと、表を作成することができます。

tableタグで表の大枠を作成し、その中にtrタグで行を作成します。

trタグで作成した行の中にthタグで見出しを作ったり、tdタグでデータを格納します。

【記入例】

お申し込みにあたっては、以下の料金表をご確認ください。

<table>
<tr><th>対象の学年</th><th>価格 (月額・税込み)</th></tr>
<tr><td>小学校低学年コース</td><td>3,000円</td></tr>
<tr><td>小学校高学年コース</td><td>5,000円</td></tr>
<tr><td>中学生コース</td><td>7,000円</td></tr>
</table>

【実際の表示】

お申し込みにあたっては、以下の料金表をご確認ください。

対象の学年	価格 (月額・税込み)
小学校低学年コース	3,000円
小学校高学年コース	5,000円
中学生コース	7,000円

※ この表はあくまでサンプルです。実際の画面では表示が異なる場合があります。

 

リンクを設置する(aタグ)

aタグを使うと、画像を挿入することができます。

hrefの箇所でリンク先を設定し、タグとタグの間に表示させたい文字列を記載します。

【記入例】

ロカオプに興味を持って頂きありがとうございます。

詳しい情報は<a href="https://locaop.jp/about" target="_blank"/;>こちらのリンク</a>から確認ください。

【実際の表示】

ロカオプに興味を持って頂きありがとうございます。

詳しい情報はこちらのリンクから確認ください。

 

電話できるリンクを設置する(a href="tel:03xxxxxxxx"タグ)

a href="tel:03xxxxxxxx"タグを使うと、電話できるリンクを挿入することができます。

リンク先に設定したい電話番号を「"tel:」をつけて記載します。

【記入例】

ロカオプに興味を持って頂きありがとうございます。

お気軽にお問い合わせ下さい。<a href="tel:0312345678">お電話はこちらへ</a>

【実際の表示】

ロカオプに興味を持って頂きありがとうございます。

お気軽にお問い合わせ下さい。お電話はこちらへ