はじめに

こんにちは! 中学2年生のWardHamamatsu67です! 今回は、HTMLのページの途中で色やフォントを変える方法について説明したいと思います。

方法1

1つ目の方法はCSSを使用せず、HTMLのfontタグを使用するものです。
このような感じです。

    <p>明けまして<font color="red">おめでとう</font>ございます。</p>

赤色に指定します。

このように、「おめでとう」を赤文字にすることで強調されましたね。
結構この方法は簡単です。が、!!この方法はあまりお勧めしません。
しっかりとした理由があります。それは、、
この方法では、色は変えられるものの、フォントは変えられないからなんです。
では、何の方法が良いのでしょうか? そこで次の方法を紹介します!!

方法2

それは、CSSを使う方法です!!「でしょうね」と思った方、多いと思います。多くの人がわざわざ別ファイルまで作って、面倒くさいCSSのコードを書くのには手間がかかって嫌だ、と思うかもしれません。しかし、この方法を使うと、魅力的なサイトが作れちゃったりします!!

    <p>明けまして
    <span class="colorful">お</span>
    <span>め</span>
    <span>で</span>
    <span>と</span>
    <span>う</span>
    ございます。</p>

spanタグを使用します。

    .colorful span:nth-child(6n+1){color: #ff0000};
    .colorful span:nth-child(6n+2){color: #00ff00};
    .colorful span:nth-child(6n+3){color: #0000ff};
    .colorful span:nth-child(6n+4){color: #aa0000};
    .colorful span:nth-child(6n+5){color: #00aa00};

どうでしょう。先程のよりもカラフルで面白い記事に見えるのではないでしょうか?(まあ、カラフルにしすぎるのはよくないんですけどね...)
もちろん、フォントを変えることも可能です。(ここでは、フォントを1つに絞って絵やっていきたいと思います。)

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Klee+One&family=Zen+Maru+Gothic&display=swap" rel="stylesheet">

HTMLでは、Google Fontsに載せてあるHTMLコード(上のやつ)を貼り付けていきます。

    .colorful {
            font-family: "Klee One", cursive;
            font-weight: 400;
            font-style: normal;      
    }

CSSでは、Google Fontsに載せてあるCSSコード(下のやつ)を貼り付けていきます。

このように。

おわりに

以上です。コードの内容自体は簡単なのですが、長～くなってしまうので、難しく感じますが、その分、成功した時の達成感は大きいです。皆さんもぜひ、この方法を利用して、やってみてはいかがでしょうか。
この記事が良いと思った方はいいねとフォローをしてくれると嬉しいです。

【HTML,CSS】文字の色やフォントを文章の途中で変える方法

はじめに

方法1

方法2

おわりに