Progate HTML & CSS 初級編

未来電子テクノロジーでインターンをしています。Qiita初投稿です。
ProgateのHTML&CSS初級編で学んだことをまとめていきます。

##HTML
テキストにタグと呼ばれる印をつける。


##見出し

```
<h1></h1>
```

h1が一番大きくh6が一番小さい。

##リンク
```
<a href="url"></a>
```
スペースを空けることとリンクを囲うダブルクォーテーションを忘れない。

##コメント
```
<!-- -->
```
ブラウザには表示されない。

##画像表示
```
<img scr="画像のurl">
```
テキストで囲う必要がないため終了タグは不要

##リスト作成
```
<ul>
 <li></li>
 <li></li>
     .
     .
     .
</ul>
```
要素を要素で囲う"入れ子"なので子要素をインデントするのを忘れない。

##CSS
HTMLの要素に対し、色・大きさ・配置などを指定できる。
レイアウトを整えたり、デザインするための言語。

##色を変える
```
h1{
   color:red;
  }
```

h1(どこの)color(何を)red(どうする)を指定している。

##CSSでのコメント
```
/* */
```
これで囲むとブラウザには表示されない。

##文字サイズ変更
```
h1{
   font-size:10px;
  }
```
font-sizeとpx(ピクセル)を指定する。

##文字の種類変更
```
h1{
   font-family:serif;
  }

h1{
   font-family:"Avenir Next";
  }
```
フォント名にスペースが含まれる場合はダブルクォーテーションで囲む。

##背景色を変える
```
h1{
   bacoground-color:#ddddd;
  }  
```

##横幅・高さを変える
```
h1{
   widgh:500px;
   height:80px;
   }
```

##HTMLの全体構造
```
<!DOCTYPEhtml>
<html>
 <head>
 </head>
 <body>
 </body>
</html>
```
!DOCTYPEhtmlでHTMLのバージョンを指定する。

##head要素の中身
```
<head>
 <meta charset="utf-8">
 <title></title>
 <limk rel="stylesheet" href="stylesheet.css">
<head>
```
meta charsetで文字コードの指定
titleでタイトルの指定
limk rel="stylesheet" href="stylesheet.css"でCSSの読み込み

##レイアウト
```
<div>
<div class="header">
</div>
<div class="main">
</din>
<din class="footer">
</div>
```
レイアウトはdivの要素によってヘッダー、メイン、フッターの三つで構成される。

##エディタの補完機能
タグ名を入力しtabキーを押すと終了タグまで補完してくれる。

##ヘッダーの枠組み
```
<div class="header">
 <div class"header-logo">
 <div class"header-list">
  <ul>
  </ul>
</div>
```

##リストのマークをなくす
```
li{
   list-style:none;
  }
```

##リストの中身を横並びにする
```
li{
   float:left;
  }
```
要素が左から順番に横並びになる。

##ヘッダーのリストを横並びにする
```
.header-list{
             float:left;
            }
```

##ロゴと横並びにする
```
.header-logo{
             float:left;
            }
```

##特定の要素にCSSを適用するには
```
HTML
<ul>
 <li class="selected">HTML</li>
 <li>CSS</li>
</ul>

CSS
.selected{
          color:red;
         }
```
classを使い、要素を識別する。CSSで指定する際、ドットをつけ忘れない。

複数の要素に同じclassをつけた場合、すべてに同じCSSが適用される。

##余白の調整
```
HTML
<div class="logo1">
タイトル
</div>

CSS
.logo1{
padding:20px;
}
```
padding-topなどで余白の方向も指定できる。

##フッター
```
<div class="footer">
 <div class="footer-logo">title</div>
 <div class="footer-list">
  <ul>
    <li>...
  </ul>
 </div>
</div>
```

##ヘッダーとフッターを分けてレイアウトする
```
<ul class="header-list">
<ul class="footer-list">
```

##ロゴとリストの配置
```
.footer-logo{
             float:left;
            }
.footer-list{
             float:right;
            }
```

##メインの構造
```
<div class="copy-container">
</div>
<div class="contents">
</div>
<div class=contact-form">
</div>
```
copt-container,contents,contact-formの三つの要素からなる

##文中の一部にCSSを適用させる
```
HTML
<h1>
ようこそ<span>progate<span>へ

CSS
span{
     color:red;
    }
```
span要素でCSSを適用させたい部分を囲む

##ブロック要素、インライン要素
div,p要素は改行される。span,a要素は改行されない。

##コンテンツ
```
<div class="contents">
 <h3></h3>
  <div class="contents-item">
   <img src="url">
    <p></p>
</div>
```
各言語ごとに作成する。

##枠線をつけよう
```
HTML                   CSS
<div class="logo1">    .logo1{
Progate                       border:5px solid red;
</div>                       }

<div class="logo2">    .logo2{
Progate                       border-bottom:1px solid #333;
</div>                       }
```
上は赤線で囲む、下は下線を引く。

##お問い合わせフォームを作ろう
お問い合わせ
メアド(一行用の入力欄)
お問い合わせ内容(複数行用の入力欄)
送信ボタン
```
<form>
 <p>input要素</p>
  <input>

 <p>textarea要素</p>
 <texterea></texterea>
</form>
```
inputは終了タグなし

##送信ボタンを作ろう
```
<input type="submit">
```

##保存ボタンを作ろう
```
<input type="submit" value="保存">
```

##複数のセレクタに同じCSSを指定する
```
h1,p{
     color:red;
    }
```