見出し画像
Photo by shichimi310

JavaScriptの超入門⑰（ 文字色や大きさを変えるには🙄❓）

ユウキ

前回の第16回では<p>、<div>、<span>のについて説明しました😊

🍊　①<p>（段落）　⇒　改行　＋　1行

🍊　②<div>（区分）　⇒　改行される

🍊　③<span>（期間）　⇒　改行されずに横に並ぶ


本日も、前回に引き続き、HTMLの話になります😊


前回は、「<span>って横に並ぶだけなのに、何か使い道はあるの？」という部分で終わりました🙄📕


結論としては、1つの文などの中で一部分だけ色を変えたり、大きさを変えるような場合に使えそうです😊


コードも見てみましょう🍀

<!DOCTYPE html>
<html lang= "ja">
<head><title>タイトル</title></head>
<body>

<span style="color:red;">今日は</span>
<span style="color:blue;">晴れ</span>
<span style="color:green;">ですね。</span>

<span style="font-size: 10px;">今日は</span>
<span style="font-size: 20px;">雨</span>
<span style="font-size: 30px;">ですね。</span>

</body>
</html>


この部分に注目してみましょう🤗

<span style="color:red;">今日は</span>


この部分は「style属性」と呼ばれます🌹


書き方は次のようになっていますね😉

Style = "　～内容～ "


内容の部分も見てみましょう⭐

color:red;


その名の通り、「色」は「赤」としています💎


この部分も見てみましょう🌲

<span style="font-size: 10px;">今日は</span>


ちなみに、「font」とは「書体」のことです🌹


つまり「font-size」とは、「文字のサイズ」のことになります🥰


文字のサイズを10px（ピクセル）にするということですね🌍


なお、「ピクセル」とは「写真の細胞」を意味する英語の「picture cell」からの造語のようですね😉


↓　Wikipediaから一部抜粋です📝

ピクセルは、一般的に「写真の要素」を意味する英語の「picture element」からの造語、または「写真の細胞」を意味する英語の「picture cell」からの造語とされる


また、コードの結果は次のようになりました😆

画像1


このように、文章の中の一部分の文字色等を変えたいときに、<span>は役に立ちそうですね😉


この続きは、次回にしていきたいと思います🥰


最後までお読みいただき、ありがとうございました😄✨✨

サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊