「光と影のグラフ」での HTML の使い方、2回目の投稿です。
前回の説明はこちらを。

今回は、前回の例を少しずつ組み立てながら説明していきます。

Happy New Year !! Happy New Year !! Happy New Year !!

1. まずは普通に文字列を表示します。

例1(HTML)

例1(結果)

Happy New Year !!

2. 文字を大きくします。

例2(HTML)

例2(結果)

Happy New Year !!

ここで出てくる <xxx> で囲まれたものをタグと呼び、<xxx>を開始タグ、</xxx>を終了タグと呼びます。
ここでは font タグの size に値を設定することで文字のサイズを設定しています。値は1から6まで設定ができ、数が大きいほどサイズが大きくなります。

3. 文字に色を付けます。

例3(HTML)

例3(結果)

Happy New Year !!

font タグに color という設定を追加しています。
この color に blue などの色を指定すると、文字に色を付けることができます。

4. 他の色の文字列を表示します。

例4-1(HTML)

例4-1(結果)

Happy New Year !! Happy New Year !! Happy New Year !!

ここで、「おや?」となった方がいるかもしれません。
色違いの文字列を3行書いたのに、1行で表示されます。
実は文字列に改行を入れるには、br タグというものを入力する必要があります。

例4-2(HTML)

例4-2(結果)

Happy New Year !!
Happy New Year !!
Happy New Year !!

上の例では、行末に br タグを入れることで、以降の文字列を次の行に出すようにしています。
逆に br タグが無いと、ひたすら同じ行に文字列が出力されますので、ご注意を。

5. 文字列を太くします。

例5(HTML)

例5(結果)

Happy New Year !! Happy New Year !! Happy New Year !!

strong タグで囲んでやると、文字列を太く強調させることができます。

6. 文字を左右に動かします。

例6-1(HTML)

例6-1(結果)

Happy New Year !! Happy New Year !! Happy New Year !!

文字列を左右に動かすには、marquee タグを使います。
marquee タグの behavior に alternate と入力すると、文字列が端から端まで往復します。
他にもスクロールのパターンや方向を変えることができます。

例6-2(HTML)

例6-2(結果)

Happy New Year !! Happy New Year !! Happy New Year !!

上の例では、1行目の設定のみ変更して、文字列を下から上へスクロールするようにしました。

次回は文字列以外に使えそうな HTML の使い方を紹介していきます。

続く。

This article is a sponsored article by
''.