HTML&CSSのアウトプット
＜HTML編＞
＊HTMLを書くときの注意すること＊
・コードやスペースは全て半角（テキスト以外で全角は使わないこと）
・こまめに保存すること（データが飛んだら悲惨です）
・慣れるまではキーボードを見て入力すること（過信しないように）
HTMLは、テキストに「＜＞（タグ）」と呼ばれる印を付けていきます。以下のようにテキストをタグで囲むことにより、テキストが「見出し」や「リンク」といった意味をもつ。
例１：<h1>〇〇○</h1> （h1,h2,h3,h4,h5....と数字が大きくなるに連れて文字の大きさが小さくなる&見出しに便利）
<a>〇〇</a> （リンクを貼り付けれる）
＊開始タグ（<○>）と終了ダグ（</○>）はセット。書き忘れないこと！
段落を作る場合は<p>要素。文章で改行したいときは<p>要素を使うと便利。
例２：<p>〇〇</p> （連続すると改行になる）
【豆チ】
コメント「<!--〇〇-->」は〇〇がブラウザで表示されない。後々見返す時に便利。
例１で書いたように<a>はリンクを貼り付けられる。そのコードの書き方は以下の通り。
例３：<a href="https://.........com">〇〇</a>（この場合、URLはブラウザに表示されなくて、〇〇の文字がリンクと繋がる）
画像を貼り付けたい時は、
例４：<img scr="https://.............jpg"> （URLは表示されなくて画像が表示される）
リストを作成したい時は<li>要素。この<li>は子要素で親要素である<ul>と一緒に書かれる。
例４：<ul> ←親要素
<li>〇〇</li> ←子要素 （「・〇〇」と表示される）
</ul> ←親要素
＜CSS編＞
CSSとは：HTMLの要素に対して色・大きさ・配置（「どこの」「何を」「どうする」か）などを指定し、ページをデザインするための言語。
HTMLだけでは文字と画像が羅列されているだけですが、CSSを用いることで、レイアウトを整えることができます。HTMLとは別のファイルに記述。
（対象(要素名)をセレクタ、変更項目をプロパティと言う）
例１：文字の色を変える （colorプロパティを用いる）
html：<h1>〇〇</h1>
css：h1 {
color: #ff0000 ; （この場合は赤色）
}
＊「:（コロン）」と「;（セミコロン）」を忘れないように。
例２：文字の大きさを変える時 （font-sizeプロパティを用いる）
html：<h1>〇〇</h1>
css：h1 {
color: #ff0000 ;
font-size: 〇〇px; （px(ピクセル)という単位）
例３：文字の種類を変える （font-family: フォント名; ）
html：<h1>〇〇</h1>
css：h1 {
font-family:（フォント名）;
}
＊フォント名にスペースがある場合は、ダブルクォーテーションで囲みます。
例４：背景の色を変える （background-colorプロパティを用いる）
html：<h1>〇〇</h1>
css：h1{
background-color:#dddddd;
}
例５：要素の横幅、高さを変更する（widthプロパティ、heightプロパティを用いる）
html：<h1>〇〇</h1>
css：h1{
width:〇〇px;
height:〇〇px;
}
例６：複数個あるタグ（li）に名前をつける （classを使って名前をつけ、それぞれの要素を識別し、別々のCSSを適用することができます。）
html：<ul>
<li class="selected">〇〇</li>
<li class="selected">●●</li>
</ul>
css：li {
color:red;
}
.selected {
color: red;
}
＊複数の要素に同じclassをつけた場合、それら全てに同じCSSが適用される。classの場合はドットが必要で、タグの場合は必要ない。
＜HTMLの全体構造＞
<!DOCTYPE html> （DOCTYPE宣言：HTMLのバージョンを宣言・指定）
<html>
<head> （Webページの設定に関する情報）
<meta charset="utf-8"> （文字コードの指定：文字化けを防ぐ）
<title>Progate</title> （ページのタイトルの設定）
<link rel="stylesheet" href="stylesheet.css"> （CSSの読み込み）
</head>
<body>
〜
</body>
</html>
＜全体のレイアウト＞
レイアウトは<div>要素によって構成して、要素をグループ化するために使用されます。
「header」、「main」、「footer」というclass名を持った3つの<div>要素でレイアウトを分割しています。
例１：html：
<div class="header"></div> （headerのdiv要素）
<div class="main"></div> （mainのdiv要素）
<div class="footer"></div> （footerのdiv要素）
＜ヘッダー＞
html：<div class="header">
<div class="header-logo">Progate</div> （ロゴのdiv要素）
<div class="header-list">
<ul>
<li>................</li> （ヘッダーリストのdiv要素）
<li>................</li> （ヘッダーリストのdiv要素）
<li>................</li> （ヘッダーリストのdiv要素）
</ul>
</div>
</div>
＊<li>要素にlist-styleプロパティをnoneで指定すると、リストの先頭のマークを消すことができる
例２：ヘッダーのレイアウト （floatプロパティ：指定した要素を横並びにすることができる）
html：<ul>
<li>................</li>
<li>................</li>
<li>................</li>
</ul>
css：li {
list-style: none;
float: left; （要素が左から順に横に並びになる）
}
例３：ヘッダーの余白 （padding：上下左右すべての方向にその大きさの余白が追加される）
html：<div class="logo1">〇〇</div>
css：.logo1 {
padding: 〇〇px;
}
＊ある方向のみ指定したいときはpadding-top・padding-right・padding-left・padding-bottomがある
例４：フッターのレイアウト
float: leftとfloat:rightを組み合わせることで、ロゴとリスト全体を左右に配置することができる。
左端に配置したい「footer-logo」にはfloat: left;を、右端に配置したい「footer-list」にはfloat: right;を指定する。
例５：メインのレイアウト
main要素：「copy-container」、「contents」、「contact-form」の3つの要素で構成されている。
文中の一部にCSSを適用させたい場合は、<span>要素で囲む。
<span>タグにCSSを指定することで、文字の色を一部変えているが、<span>要素の前後には改行は入らない。
＊HTMLの要素には改行される要素と改行されない要素があり、前後で改行が入り親要素の幅一杯に広がる要素をブロック要素（<div>要素や<h1>要素、<p>要素はブロック要素）、<span>要素や<a>要素のように改行されない要素をインライン要素という。
＜ボーダー＞
要素にボーダー（枠線）をつけるには、borderプロパティを用いる。
例１：border:枠線の太さ、種類、色;
上下左右すべてに線を付けたい場合はborder。特定の場所にのみ付けたい場合は「border-bottom」のように、「border-方向」。
（他にはborder-top、border-left、border-rightなど）
＜margin＞
borderの外側に余白を作りたい場合、marginを用いる。
値の指定の方法は、paddingと同じ。
これまで勉強してきたborder, padding, marginは、ボックスモデルという概念に基いている。
HTMLの全ての要素には、border（初期状態では表示されない）があり、その外側の余白はmargin, 内側の余白はpadding。
＜お問い合わせフォーム＞
<input>要素は１行のテキスト入力を受け取るための要素、<textarea>要素は複数行のテキスト入力を受け取るための要素。
送信ボタンにも、<input>要素を用いる。
<input>要素にはtype属性を指定することができ、type属性にsubmitを指定すると、入力欄ではなく送信ボタンになる。
ボタンに表示されるテキストは、日本語のブラウザではデフォルトで「送信」になる。