プログラミングの基礎であるhtmlとcssに関する知識まとめ
#htmlまとめ
・DOCTYPE宣言
まず文書型を宣言しなければいけない
html5を使用する場合、頭に
<！DOCTYPE html>を付ける
・headとbodyの違い
とは大まかに言うと、｢閲覧者に見えない部分を書くスペース」と「閲覧者に見える部分を書くスペース」といった感じの違い ◎head部分に書き込むべきタグ
①titleタグ
ページのタイトルを書く部分。ここに書き込んだ内容がタブに表示される。
②linkタグ
画像やファイルなど参照先のリンクやファイル名を書く。
ちなみに、relの後にはstylesheetやcanonicalなどと書く。canonicalと書けば、複数の内容が重複するページが発生した時、検索エンジンからのページ評価が分散するのを防ぎます。SEO対策の観点からも重要です。
③metaタグ
ページの内容や文字形式を規定
◎bodyタグに書き込むべきタグ
①見だし
~
数字が小さければ小さいほど重要度up
数字が小さければ小さいほど重要度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は外側に余白を作るイメージ。