アメブロカスタマイズ　HTMLとCSSを記述してみよう！！

おはようございます。
札幌でWebデザイナー目指して日々精進の加藤です。

さてさて、オリンピックも佳境に入ってきましたね！！
皆さん寝不足の毎日でしょうか？？

ココで一つ。
お昼寝の１５分は、熟睡の数時間に相当すると言われているそうですよ！！

私は、お昼ねすると、そのまま起きませんけどぉ～　(^_^;A

さて、HTMLとCSSですね。
今日は、前回の続きで、少し進みますよ！！

今回は、HTML文書にCSSを一緒に記述する場合です。

前回から、いきなりですが、HTMLを少し記述追加しています。
何を追加したか、わかりますかね？？

前回

<html>

<head>

</head>

<body>

これから、HTML,CSSの勉強をしていきましょう

</body>

</html>

今回

<html>

<head>

</style>

</head>

<body>

これから、HTML,CSSの勉強をしていきましょう

</body>

</html>

もう、わかりますよね！！
そうです。この部分です．

</style>

じゃ、コレを追加して記述すればいいの？
はい、いいんです。

ただし、なぜ、これを追加したのかですよね？

ちゃんと意味がありますので、これから説明しますね。

<meta http-equiv="Content-Style-Type" content="text/css">

↑　この部分。
HTMLとCSSは一見同じ言語に見えますが、違います。

7/22の記事に投稿させていただきましたが、HTMLとCSSにはそれぞれ、定義がありましたよね。

そこが、同じに見えて違うんです。

HTML文書のなかで、CSSを一緒に使う為には、HTML文書に許可と宣言をしなければいけないルールになっています。

それが、

<meta http-equiv="Content-Style-Type" content="text/css">　

<meta>タグと言います。
スタイルシートの言語である、CSSを使ってますよぉ～と、記述してあげているんです。
コレが、無いといくらCSSを記述しても、何もなりません。

次にこれ。

</style>

これは、<style></style>タグといいます。
これを、使うと、HTML文書にCSSを記述する事ができます。
先程の　<meta http-equiv="Content-Style-Type" content="text/css">
とセットで、覚えてくださいね．

この二つは、必ず<head></head>タグの中に記述してくださいね。

<html>

<head>

</style>

</head>

<body>

これから、HTML,CSSの勉強をしていきましょう

</body>

</html>

と、いった記述になります．

では、ブラウザで見てみましょう。

左側に、HTML文書、右側にブラウザで表示した画面です。
何も変わりませんね．

CSSをつかって、まだ記述をしていないので、普通に黒色で文字が表示させています。

今回、追加した、二つのタグ　<meta>タグと<style>タグこれを、ルールに沿って記述しなければ、普通の黒色での文字も表示されません。
これは、凄く重要なことなので、記述文書をよく見ていただいて、うまく表示されない時は、どこかが違いますので、じっくりと見てくださいね．

今日は、文字が多くて疲れましたね。この辺で終わりにしましょう。！！

次の時は、いよいよ色や大きさを変えて見たいと思いますので、お楽しみに！！

では、また次の時まで……

アメブロカスタマイズ HTMLとCSSを記述してみよう！！

アメブロカスタマイズ　HTMLとCSSを記述してみよう！！