プログラミングの基礎であるhtmlとcssに関する知識まとめ
htmlまとめ
・DOCTYPE宣言
まず文書型を宣言しなければいけない
html5を使用する場合、頭に
<！DOCTYPE html>を付ける
・headとbodyの違い
◎head部分に書き込むべきタグ
①titleタグ
ページのタイトルを書く部分。ここに書き込んだ内容がタブに表示される。
②linkタグ
画像やファイルなど参照先のリンクやファイル名を書く。
ちなみに、relの後にはstylesheetやcanonicalなどと書く。canonicalと書けば、複数の内容が重複するページが発生した時、検索エンジンからのページ評価が分散するのを防ぎます。SEO対策の観点からも重要です。
③metaタグ
ページの内容や文字形式を規定
メール
③div,spanタグ
どちらのタグもページの区分けをしてくれるタグだが、両者には少し違いがある。具体的には「指定できる内容」にちがいがある。
･divタグは、幅と高さが指定できる
･spanタグは、色や大きさを指定できる
divで大枠を指定し、spanで小さな調整をするといったところだろうか
④inputタグ
フォームを作る際必要不可欠なタグ。
例）
<input type="password>
<input type="submit>
このタグを使えば、送信ボタンを作成したり、バリデーションを効かせたりできるなど何かと便利。
⑤selectタグ
セレクトボックスを作成。選択肢にはoptionタグを用いる。nameもしっかり決めておこう。
例）
<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は外側に余白を作るイメージ。