個人サロン・リラクゼーションサロン専門・ホームページ制作・作成講座・SEO対策・W3C・シンプルデザイン

ホームページ作成講座 < 文字の装飾方法

文字の装飾方法

タグに関しては枠で囲って載せておきますので、コピーして使えるようにしておきます。

文字の色を変える

使い方としては蛍光ペンの部分を差し替えて記述して下さい。

<span style="color:#ff0000">色を変えたい文字</span>

色を変えたい文字や文章を<span style="color:#ff0000">〜</span>で挟んで記述すると変える事ができます。

上記の場合、色を赤に設定しているので、文字の色は赤になります。

カラーコードを変えれば変更したい色を指定できます。

変更するカラーコードを蛍光ペンでマークしています。

<span style="color:#ff0000">〜</span>で挟んで記述すると変える事ができます。

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

カラーコード表

文字の色を変えた表示例

赤い文字に変えています。

オレンジの文字に変えています。

青い文字に変えています。

太字にする

使い方としては蛍光ペンの部分を差し替えて記述して下さい。

<span style="font-weight:bold">太字にしたい文字</span>

太字にしたい文字や文章を<span style="font-weight:bold">〜</span>で挟んで記述すると変える事ができます。

太文字に変えた表示例

太字に変えています。

太字にして文字の色を変える

文字を太字にして色も変えるというような組み合わせも可能です。

文字装飾の記述の一部を切り取って説明しますが、font-weight:bold;color:#ff0000; のように
「;」で区切れば複数の装飾を指定する事ができます。

使い方としては蛍光ペンの部分を差し替えて記述して下さい。

<span style="font-weight:bold;color:#ff0000;">太字にして色を変えたい文字</span>

太字にして色を変えたい文字や文章を<span style="font-weight:bold;color:#ff0000;">〜</span>で挟んで記述すると変える事ができます。

上記の場合、色を赤に設定しているので、文字の色は赤になります。

カラーコードを変えれば変更したい色を指定できます。

変更するカラーコードを蛍光ペンでマークしています。

<span style="font-weight:bold;color:#ff0000;">〜</span>で挟んで記述すると変える事ができます。

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

カラーコード表

太字にして文字の色を変えた表示例

太字で赤い文字に変えています。

太字でオレンジの文字に変えています。

太字で青い文字に変えています。

蛍光ペンでマークした文章にする

使い方としては蛍光ペンの部分を差し替えて記述して下さい。

<span style="background-color:#ffff00">蛍光ペンでマークする文章</span>

蛍光ペンでマークしたい文章を<span style="background-color:#ffff00">〜</span>で挟んで記述すると変える事ができます。

蛍光ペンでマークした文章の表示例

蛍光ペンでマークした文章にしています。

ご質問がありましたら、メールフォームよりお問合せ下さい。

お問合せメールフォーム

このページの先頭へ トップページへ