はじめに
ProgateでHTML＆CSSコースを受講しました。
勉強ついでに、学習したことを備忘録としてまとめようと思います。
環境
OS：macOS
エディタ：VSCode
ブラウザ：Google Chrome
受講コース：HTML & CSS 初級編
目次
1 本コース中に使用したHTMLのタグとCSSのプロパティ
コース学習中に登場したHTMLタグとCSSのプロパティ、それらの使用用途を簡単にまとめました。
ここに記述した以外の使い方ができるタグもあります。
各要素のより詳細な使い方については、MDNで調べると良いみたいです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element
HTMLで使用したタグ
| タグ（要素） | 使用用途 |
|---|---|
| h1〜h6 |
見出しの要素 h1が一番大きな見出しで、h6が一番小さな見出しになる |
| p |
段落の要素 見出し以外のテキストを囲むときに用いる |
| a |
リンクを作成する要素 href属性でリンク先を指定する(href="URL") |
| img |
画像を表示させる要素 src属性で画像のリンクを指定する(src="URL") |
| li |
リストを作成する要素 囲む要素によって種類が変わる |
| ul | liを囲むと、リストの先頭が黒点になる |
| ol | liを囲むと、リストの先頭が数字の連番になる |
| html | "このファイルはHTMLです"という宣言 |
| head | Webページに関する情報を記述する |
| body | Webページに表示させる内容を記述する |
| meta | 文字コードなど、他のタグでは指定できない内容を指定する |
| title |
文章のタイトルを決める要素 ブラウザのタブに表示されるページタイトルになる |
| link |
外部ファイルへのリンク要素 CSSを適用させるファイルの定義やサイトのアイコンを指定する |
| div |
コンテンツを分割する要素 CSSを適用させるために、内容を分割する |
| span | 文中の一部分のみCSSを適用させる要素 |
| input |
１行のテキスト入力を受け取る要素 type属性の値で様々な動作になり、 value属性の値でボタンに表示されるテキストを指定する |
| textarea | 複数行のテキスト入力を受け取る要素 |
CSSで使用したプロパティ
| プロパティ | 使用用途 |
|---|---|
| color |
文字の色を変える 16進数のカラーコードで色を指定する |
| font-size |
文字の大きさを変える pxという単位を用いて、大きさを指定する |
| font-family |
文字のフォントを変える フォント名にスペースが含まれている場合、 フォント名をダブルクォーテーションで囲む必要がある |
| background-color |
背景色を変える 色の指定方法はcolorと同じ |
| width |
要素の横幅を変える 大きさはpxで指定する |
| height |
要素の高さを変える 大きさはpxで指定する |
| list-style |
listのスタイルを変える リストの先頭のスタイルを指定できる |
| float |
要素の並び方を変える leftを指定すると左から順に横並びになり、 rightを指定すると右から順に横並びになる |
| border |
要素に枠線を付ける 太さ(px)、種類、色を指定する 特定の方向にのみつけたい場合は、 「border-方向」のように指定する |
| padding |
要素のborderの内側に余白を作る 方向を指定して余白を作ることもできる |
| margin |
要素のborderの外側に余白を作る 記述方法はmarginと同様 |
2 HTMLの全体構造について
・実際のHTMLファイルには、決められた型を書いていく必要がある。
・html要素の中にhead要素とbody要素が必要。headとbodyは文書中に一つだけ配置する。
・head要素の中では、以下のような項目について設定を記述する。
①文字コード：文字コードを指定することで、ページの文字化けを防ぐことができる。
②ページタイトル：ページのタイトルを指定する。指定されたタイトルは、ブラウザのタブ上に現れる。
③CSSの読み込み：href属性で読み込むCSSファイル名を指定する。（今回はstylesheet.cssを読み込む）
<!DOCTYPE html> //DOCTYPE宣言と呼ばれ、HTMLのバージョンを宣言する。
<html>
<head> //Webページの設定に関する情報を記述する。ここに記述した内容は、Webページには表示されない。
<meta charset="utf-8"> //文字コードの指定
<title>サンプルページ</title> //ページのタイトルの指定
<link rel="stylesheet" href="stylesheet.css"> //CSSを読み込むための宣言
</head>
<body> //Webページに表示させる内容を記述する。
</body>
</html>
3 ボックスモデルについて
HTMLでは、全ての要素がボックスと呼ばれる領域を持っている。
ボックスは下図のように4つの領域から成り、各領域の名称とその大きさを指定するプロパティは以下の表のようになっている。
| 領域名 | プロパティ |
|---|---|
| content | テキストや画像などの内容を表示する領域 width、heightで大きさを指定する |
| padding | 枠線の内側の領域 paddingプロパティで大きさを指定する |
| border | ボックスの枠線 borderプロパティで大きさ、種類、色を指定する |
| margin | 枠線の外側の領域 marginプロパティで大きさを指定する |
4 その他の学びや注意点について
・コメントアウトのやり方
HTMLの場合： <!-- -->で囲む CSSの場合： /* */で囲む
・エディタでコメントアウトするショートカットキーは、「command」+「/」。
・入れ子構造要素がある場合には、インデント（字下げ）して親子関係を分かり易くする。
インデントするには、行先頭でtabキーを押す。
・CSSのプロパティの末尾にはコロン(:)、行末にはセミコロン(;)をつける必要がある。
・同じ要素名のうち、ある特定の要素にのみCSSを適用したい場合は、classで要素に名前をつける。
class名でCSSを指定する場合、先頭にドット「.」が必要となる。
・タイプミスを防ぐために、補完機能を使うと良い。タグ名を入力しtabキーを押すと、終了タグまで補完してくれる。
（VSCodeには補完機能が備わっているため、tabを押さなくても良い）←すごく便利
・paddingによる余白の指定方法(marginも同様)
① 全方向に均一に余白を作りたい padding: ○○px;
② ある特定の方向に余白を作りたい padding-top: ○○px;
（下部はpadding-bottom、右部はpadding-right、左部はpadding-leftを用いる）
③ 上下には○○px、左右には□□pxの余白を作りたい padding: ○○px □□px;
④ ４方向各々に異なる余白を作りたい padding: ○○px □□px △△px ☆☆px;
（上部○○px、右部□□px、下部△△px、左部☆☆pxの余白が作れる）
5 最後に
続いて、中級編を学習していきます。
内容の誤りや補足等ありましたら、コメントにて教えていただけますと助かります。