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」からの造語とされる
また、コードの結果は次のようになりました😆
このように、文章の中の一部分の文字色等を変えたいときに、<span>は役に立ちそうですね😉
この続きは、次回にしていきたいと思います🥰
最後までお読みいただき、ありがとうございました😄✨✨
いいなと思ったら応援しよう！
