はじめてのHTML③ HTMLで表示された文字にCSSで色をつける
インラインのstyleで色をつける
htmlのタブにcssで直接スタイルを記述する。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <p align="center" style="color:blue;">こんにちは</p> <p align="left" style="color:red;">こんにちは</p> <p align="right" style="color:green;">こんにちは</p> </body> </html>
タブ内にstyle="color:blue"と書けばタブに囲まれた文字の色を指定できる。
id属性とclass属性を使って外部CSSファイルからスタイルを指定して色をつける
直接スタイルを書かずにタブごとに名前をつけてそれぞれ外部のcssファイルから色を指定する。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet"type="text/css"href="style.css"> <title>test</title> </head> <body> <p align="center"id="iro">こんにちは</p> <p align="left"class="hani">こんにちは</p> <p align="right"class="hohe">こんにちは</p> </body> </html>
それぞれのタブに "iro" "hani" "hohe" 名前をつけた。名前には属性があり、id属性の名前は重複が無い方がよくてclass属性の名前は同じものがいくつあっても良い。
外部のcssファイルを記述する。同じくmiエディタでコードを書いてから保存する拡張子を.cssにすればcssファイルと認識される。
@charset"utf-8";
p#iro { color: blue;
}
p.hani { color: red;
}
p.hohe { color: green;
}
セレクタ {プロパティ名:値;}という形式で記述する。 指定するスタイルによってセレクタは異なる。html内の対象がclass属性の場合はp.名前とし、id属性の場合はp#名前とする。
はじめてのHTML② 文字化けしないための文字コード指定 UTF-8とSHIFT_JIS
以下のhtmlコードをブラウザで表示したところ、「こんにちは」という日本語が正しく表示されなかった。画像参照。charsetをUTF-8とした場合は正しく表示された。
<!DOCTYPE html>
<html>
<head>
<meta charset="shift_jis">
<title>test</title>
</head>
<div align="center">こんにちは</div>
<div align="left">こんにちは</div>
<div align="right">こんにちは</div>
</body>
</html>
調べると、htmlファイルを保存する際の指定文字コードとhtmlでの宣言文字コードが一致していないと文字化けが起きるらしい。
使用エディターはmi。上部バーのテキストエンコーディング欄で文字コードが選べる。指定コードがUTF-8になっていたのでshift_jisを選び保存し直して再びブラウザで表示したところ、以下のように正しく表示された。
そもそも文字コードは、人間が読める文字を1文字ずつそれぞれ10進数や16進数などの数字に置き換える際の方式らしい。
同じ ”あ” でもコードごとに割り当てられている数字が違うので保存時の文字コードとブラウザで読み込む時の文字コードが異なれば全く別の文字として認識されてしまうということだろう。
ちなみに、shif_jisは1文字ごとのバイト数は少ないがカバーしている言語の範囲が少なく、UTF-8は容量は大きいがあらゆる言語をカバーしていて文字化けする可能性が低いらしい。なのでUTF-8を選択することが望ましい...?
はじめてのHTML① align、文字コード宣言等
html 中央揃え で検索。
<div align="center">こんにちは</div>
で揃うと書いてある。
htmlリファレンスでdivを調べた。(http://www.htmq.com/html/div.shtml)
divはかたまりを定義するもので、自動的に改行が入る。
allignで位置を決めることができる。alignは整列させるの意。
文字コードを宣言しないと誤読が起きて文字化けするから必須。
<meta>タグで文書のメタ情報が宣言できる。
<meta charset="utf-8">
で文字コードを指定できる。
他にも
<meta http-equiv="content-language" content="ja"＞
で文書の言語を指定できる。この場合は日本語。
http-equivでmetaタグをブラウザに何か指示するものにすることができる。
<meta http-equiv="content-type" charset="UTF-8">
としても文字コードを指定できる。
