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

HTMLの勉強

テキストエディターでメモ帳があまり使われない理由。

文字コードが一致しない。

メモ帳のUTF-8で保存すると、バイナリーモードで見ると、BOMと呼ばれるものが勝手に入ってしまう。

BOMはphpなどの記述でエラーが起こる原因になる。

メモ帳はUTF-8N(BOMを回避できる)が使えない。

 

HTML(HyperText Markup Language)

HyperText ⇒ リンクでとべる。

Markup ⇒ 意味付け(見出し、本文、リストなど)

Language ⇒ 言語。

 

PHPPHP HyperText Preprosesor( PHP:personal Home Page )

 

TeraPadの場合

『表示』『オプション』『文字コード』を『UTF-8N』にする。

『表示』『オプション』『マーク』の『全角空白』にチェックを入れておくほうが無難。

全角空白があるとPHPなどでエラーがで出てしまうのですが、『全角空白』にチェックを入れておくと、タイプしていくと全角空白を目に見える形にしてくれます。

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"><!--ブラウザに日本語の文字コードを認識させるための記述-->
<title>HTMLの勉強</title>
</head>
<body>
<h1>4月15日の日記</h1>
<p>今日は晴れです!</p>
<p>天気予報では雨ですけど。</p>
</body>
</html>

<h1>のhはheadingの略。

<p>のpはparagrahの略。

htmlファイルや画像は全て1つのフォルダにまとめておく。

cssの書き方は三通りある。

  1. 目的のタグの中に直接書く。
    例:<h1 style="color:skyblue;">4月15日の日記</h1>
  2. headの中に<style></style>の中に書く。
    例:<style>
    h1 {
      color:skyblue;
    }
    </style>
  3. <link rel="stylesheet" href="style.css">でstyle.cssファイルに書いたものを読み込む。
    例:<link rel="stylesheet" href="style.css">を<head></head>内に書く。
    style.css
    h1 {
      color:skyblue;
    }

ただし、修正しやすいように3盤目のcssファイルをリンクさせるのが一般的。

CSS ⇒ Cascading Style Sheet  (Cascadingは滝という意味)

滝の流れのように後で書いたものが優先される。

例:

h1 {

  color:red;

}

h1 {

  color:skyblue;

}

この場合h1はskyblueになります。

marginとpaddingの違い

margin,padding両方

marginとpaddingの違いはborderを基準にした隙間の違い。

f:id:ts0818:20150415220339p:plain

marginのみ

margin ⇒ borderの外側に隙間。border自体は動かないけど外側に隙間ができてる。

h1 {

  border:5px solid #f4260b;

  margin:20px;

}

f:id:ts0818:20150415221038p:plain

paddingのみ

padding ⇒ borderの内側に隙間。borderが外側に膨らんだようになる。

h1 {

  border:5px solid #f4260b;

  padding:20px;

}

f:id:ts0818:20150415221039p:plain

 

marginはwidthを指定しないと効かない。

idは1ページに一回。(何回も使うと、特にjavascriptでエラーがおきます。)

classは何回使ってもOK。

idがclassよりも優先される。

id > class

text-align:center;は文字にかけるんじゃなくて外側にかける。

例:

<div id="footer">

<address>&copy stCompany</address>

</div>

#footer {

  text-align:center;

}

広告を非表示にする