プログラミングの基礎であるhtmlとcssに関する知識まとめ

#htmlまとめ

　・DOCTYPE宣言
　まず文書型を宣言しなければいけない
html5を使用する場合、頭に
　<！DOCTYPE html>を付ける

　・headとbodyの違い

とは大まかに言うと、｢閲覧者に見えない部分を書くスペース」と「閲覧者に見える部分を書くスペース」といった感じの違い

　◎head部分に書き込むべきタグ
①titleタグ
　ページのタイトルを書く部分。ここに書き込んだ内容がタブに表示される。

②linkタグ
　画像やファイルなど参照先のリンクやファイル名を書く。
　
ちなみに、relの後にはstylesheetやcanonicalなどと書く。canonicalと書けば、複数の内容が重複するページが発生した時、検索エンジンからのページ評価が分散するのを防ぎます。SEO対策の観点からも重要です。

③metaタグ
　ページの内容や文字形式を規定
　　◎bodyタグに書き込むべきタグ
　
①見だし

~

数字が小さければ小さいほど重要度up
　

タグ
　段落を意味する。

②aタグ
　リンクの出発点と到達点を指定する
　例）③div,spanタグ
　どちらのタグもページの区分けをしてくれるタグだが、両者には少し違いがある。具体的には「指定できる内容」にちがいがある。
･divタグは、幅と高さが指定できる
･spanタグは、色や大きさを指定できる
divで大枠を指定し、spanで小さな調整をするといったところだろうか

④inputタグ
　フォームを作る際必要不可欠なタグ。
例）
```


　このタグを使えば、送信ボタンを作成したり、バリデーションを効かせたりできるなど何かと便利。

⑤selectタグ
　セレクトボックスを作成。選択肢にはoptionタグを用いる。nameもしっかり決めておこう。
例）

```html:qiita.rb
<select name="地名">
<option value="東京">東京</option>
<option value="大阪">大阪</option>
<option value="福岡">福岡</option>

#CSSまとめ

CSSは見た目がしょぼいHTMLに付け加えることで、ウェブページの見た目を良い感じにしてくれる。
CSSはHTMLに直接書くことができる

･borderタグ
　borderは文字周辺に下線や括弧を付ける時に用いる。
borderと書いただけでは文字を四角で囲むような格好になるため、下線の時はborder-bottomといったように、線を引く位置を指定する必要がある。
太さや色、線のタイプなども同時に記述しよう。
例）

 border:5px solid red;

･marginとpadding

混同しがちな2つのタグ。
marginは、borderの内側に余白を作る、paddingは外側に余白を作るイメージ。
　