読者です 読者をやめる 読者になる 読者になる

ジョージの毎日

一日一日が特別な一日

夏休み自由研究パート6 「styleタグで私のイメージをチェーンジ!!」

こんにちは。ジョージです。

f:id:kaseinosyounen:20160724182717j:plain

今日は、プログラミングを使って文章の色を変換したいと思います!

そして今回の記事の主役である、色を変換することができるタグは・・・。

<style>タグです!!

このスタイルタグは、CSS(見た目を変えるもの)のタグです。

例えば色を変えたり・・・。

僕はまだCSSの勉強には入っていないので、

色を変えるやり方しか知りません。

それでは文章の色を変えて、見ましょう。

 

それじゃあ実際にやってみます。

 

<body>

 

<style>

  body{bacground:skyblue;}

</style>

 

こんにちは。

 

</body>

 

こうすることで何ができるかなのですが、

まず今回僕が定義したスタイルタグの意味を解説します。

今回僕が書いたHTML文章は、

<style>

 body{bacground:skyblue;}

</style>

・・・です。

この意味はまず<style>は先ほど説明した通り、

CSSのタグなのですが、これでこれからこの文章の

見た目を変えるよ?という意味になります。

次に

 body{bacground:skyblue;}

・・・ですが、これは<body>タグの中の<bacground>背景を

<skyblue>空色に変えるよ?

という意味になります。

これを全部合わせると、

 

<style>・・・これからこの文章の見た目を変えますよ?

<body>・・・言い忘れましたが、変更する場所は<body>さんのところですよ。

<bacground>・・・変更する場所は背景です。

<skyblue>・・・肝心の変更する色は、空色でお願いします。

 

っという意味になります。どうですか?

わかりやすいですか?

先日<body>内に”こんにちは”と表示しましたが、

今回やったことを追加すると、

”こんにちは”の後ろが空色になります。

 

このジョージの毎日なら、

まあ今回やったところとは違うのですが、

 

<!DOCTYPE html1>

<div style="bacground:green;">

本文

</div>

</html>

このようになっていると思います。

この分の意味はまあ今度やりますが、

簡単に言うと、

<head>タグ<body>タグ関係なく僕に囲まれているところは全部

緑になるよ。

という意味です。

これを応用して、HTML文章が始まった瞬間にこのタグを使って

最後のHTMLタグの前に閉じれば僕のブログみたいな色に

なる・・・というわけです。

 

どうですか?わかりましたか?

それでは今日はこれで終わります。

それじゃあまた。