HTML/CSSについて vol.2
HTML/CSSのお話 2回目
目次
- head要素
- div要素
今回は前回割愛したhead要素について
cssを適用させるにあたり、知っておきたいdiv要素についてです。
head要素
まずは、前回のコードがこちら
<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>HTML/CSSについて</title> </head> <body> <div> これは一つの塊です。 <h1>見出し1</h1> <h3>見出し2</h3> <h5>見出し3</h5> <img src="ネコ.jpg" class="neko"> <a href="#">facebook</a> <p>段落になります</p> <p>改行されました。</p> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> </div> </body> </html>
また分解して見ていきます。
head要素は・・・
この部分です。
<head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>HTML/CSSについて</title> </head>
headタグの中では
このhtmlファイルの情報を記述しておきます。
上記headタグ内の3つは最低限必要になるかなーと思います。
ではどこでなんの情報を記述しているのか見ていきます。
まずはmeta要素
<meta charset="UTF-8">
ここでは文字エンコーディングを指定しているみたいです。
要は
日本語で作ったwebページに海外のwebブラウザ（英語とか）からアクセスした時に文字化けすることがあります
これはそれを防ぐための記述です。
次は
<link rel="stylesheet" href="style.css">
これは簡単、このhtmlファイルにstyle.cssを適用させますって感じ
style.css内の記述に則ってwebページに表示させますよー！
って言ってます。
最後は
<title>HTML/CSSについて </title>
これは文字の説明より画像で見た方がわかりやすいと思います
このブラウザのタグ部分になんて表示させたいかを記述します。
簡単ちんですね
div要素
CSSを適用させるに当たって是非覚えて起きたのがこれです。
上のコードだとこんな感じで記述してます
<div> これは一つの塊です。 <h1>見出し1</h1> <h3>見出し2</h3> <h5>見出し3</h5> <img src="ネコ.jpg" class="neko"> <a href="#">facebook</a> <p>段落になります</p> <p>改行されました。</p> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> </div>
こちらですね、クラスというのを指定できます。
<div class="contents"></div>
こんな形で書くんですけど
何ができるかというと、例えば上のdiv要素にこのクラスを設けて、cssを適用させると
これが
こうなります
これはcssでクラスに対して文字色を変える記述を適用させてます
.contents{ color: red; }
ではもう一個クラスを設けてこんなコードにすると・・・
<div class= "contents"> これは一つの塊です。 <h1>見出し1</h1> <div class= "content"> <h3>見出し2</h3> <h5>見出し3</h5> </div> <img src="ネコ.jpg" class="neko"> <a href="#">facebook</a> <div class= "content"> <p>段落になります</p> <p>改行されました。</p> </div> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> </div>
どん
こんな感じ
cssは
.contents{ color: red; } .content{ color: green; }
クラス別にcssを適用させることができるんですね。
今回はここまで
次回はCSSについて
それではまた次回！
