HTML・CSSの自分メモ

Webページを作るときに使用する「HTML」と「CSS」についてのメモ
Qiita上と実際のWebサイトでは出力結果が異なることがあります(見出しとか)。そのうち表示を変えます。
間違っている箇所についてはぜひご指摘頂けると嬉しいです。

#HTML
テキストを「タグ」という印で囲むことで、テキストが見出しやリンクなどの意味を持つようになる。
終了タグには「/」を忘れないように！

head要素にはWebページの設定に関する情報を書く
一例

```index.html
<head>
 <meta charset="utf-8">  <!-- 文字コードの設定 -->
 <title>HTML・CSSの自分メモ</title>  <!-- ページタイトル -->
 <link rel="stylesheet" href="stylesheet.css">  <!-- CSSの読み込み -->
</head>
```

body要素にはWebページに実際に表示される内容を書く

```index.html
<!DOCTYPE html>  <!-- HTMLのバージョンを指定 -->
<html>
 <head>
 </head>
 <body>
 </body>
<html>
```

以下、body要素で主に記述すること

##見出し
h1要素が一番大きな見出しで、h6要素が一番小さな見出し

```index.html
<h1>Hello World</h1>
<h2>Hello World</h2> 
<h3>Hello World</h3>
<h4>Hello World</h4>  
<h5>Hello World</h5>
<h6>Hello World</h6>  
```

出力結果

<h1>Hello World</h1>
<h2>Hello World</h2> 
<h3>Hello World</h3>
<h4>Hello World</h4>  
<h5>Hello World</h5>
<h6>Hello World</h6>  

##段落
h2やpタグで囲んだテキストは改行される

```index.html
<p>hello</p>
```

出力結果
<p>hello</p>

##コメント
コメントとして書かれたテキストはブラウザには表示されない

```index.html
<!-- コメントだよ -->
```

##リンク
a要素を使う
href属性を追加することでリンク先のURLを指定することが出来る

```index.html
<a href="http://qiita.com/">Qiita</a>
```

出力結果
<a href="http://qiita.com/">Qiita</a>

##画像の表示
img要素を使う。 終了タグはいらない。
src属性を追加することで画像のリンクを指定することが出来る
幅取るので画像は省略

```index.html
<img src="https://~.jpg">
```

##リスト
li要素を使って箇条書きを表現できる。
このとき、ul要素で囲むと黒点、ol要素で囲むと数字で表現される。
また、cssファイルでli要素にlist-styleプロパティを使ってnoneを指定すると、リスト先頭のマークを消すことが出来る。

```index.html
<ul>
 <li>C</li>
 <li>Java</li>
 <li>Python</li>
</ul>

<ol>
 <li>JavaScript</li>
 <li>Ruby</li>
 <li>PHP</li>
</ol>
```

出力結果

<ul>
 <li>C</li>
 <li>Java</li>
 <li>Python</li>
</ul>

<ol>
 <li>JavaScript</li>
 <li>Ruby</li>
 <li>PHP</li>
</ol>

##入力
input要素で1行のテキスト入力を受け取れる  終了タグ不要。
textarea要素で複数行のテキスト入力を受け取れる

```index.html
<p>input要素</p>
<input>

<p>textarea要素</p>
<textarea></textarea>
```

##送信ボタン
input要素にtype属性を指定し、type属性にsubmitを指定すると送信ボタンになる  (他も追記します)
value属性にボタンに表示されるテキストを指定できる。指定しなかった場合には自動で「送信」となる。

```index.html
<input type="submit>  <!-- 「送信」ボタン -->
<input type="submit value="保存">  <!-- 「保存」ボタン -->
```

#CSS
HTMLとは別のファイルに記述する。
HTMLの各要素に対して細かくレイアウトすることができる。
このとき、対象の要素を「セレクタ」、変更項目を「プロパティ」という。

##文字の色を変える
16進数のカラーコードで色を指定する。主要な色なら直接名前で指定できる。

```index.html
<h1>赤です</h1>
<p>青です</p>
```
```stylesheet.css
h1 {
 color: red;
}
p{
 color: #0000ff;
}
```

出力結果
<h1><font color="red">赤です</font></h1>
<p><font color="#0000ff">青です</font></p>

##コメント

```stylesheet.css
/*コメントだよ*/
```

##文字の大きさ
font-sizeプロパティを使う
単位はピクセル

```index.html
<h1>Hello</p>
<p>Hello</p>
```
```stylesheet.css
h1 {
 font-size: 10px;
}
p {
 font-size: 40px;
}
```

##文字のフォント
font-familyプロパティを使う
フォント名にスペースが含まれている場合は「"」でフォント名を囲む

```stylesheet.css
h1 {
 font-family: YuMincho;
}
p {
 font-family: "Lucida Grande";
}
```

##文字の背景色
background-colorプロパティを使う
16進数のカラーコードで色を指定する。主要な色なら直接名前で指定できる。

```stylesheet.css
h1 { 
 background-color: red;
}
p {
 background-color: #0000ff;
}
```

##要素の横幅・高さ
横幅:widthプロパティ、高さ:heightプロパティを使う
単位はピクセル

```stylesheet.css
h1 {
 width: 500px;
 height: 80px;
}
img {
 width: 500px;
 height: 200px;
}
```

##タグの名前付け
例として、li要素の色をそのまま変えようとすると、全ての選択肢で色が変わってしまう。
それぞれの要素に名前をつけるために class を使う

```index.html
<ul>
 <li class="redtext">HTML</li>
 <li class="redtext">CSS</li>
 <li>JavaScript</li>
</ul>
```
```stylesheet.css
.redtext {  /*class名の前にドット(.)を忘れずに！*/
 color: red;
}
```

出力結果

- <font color="red">HTML</font>
- <font color="red">CSS</font>
- JavaScript

##リストを横並びにする
floatプロパティを使うと、指定した要素を横並びにできる

```index.html
<ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
</ul>
```
```stylesheet.css
li {
 float: left;  /*左から順に横並び*/
 float: right;  /*右から順に横並び*/
}
```

##要素の余白
padding: 値px; で、内側の上下左右に余白が追加される
上方向のみなら padding-top:、下方向は padding-bottom、左方向は padding-left、右方向は padding-right。 省略形もある。

margin: 値px; で、外側の上下左右に余白が追加される

```stylesheet.css
p {
 padding: 20px;  /*上下左右*/
 padding: 20px 10px 20px 10px;  /*左から top,right,bottom,leftの順に余白設定*/
 padding: 20px 10px;  /*左から top+bottom,right+leftの順に余白設定*/

 margin: 20px;
}
```

##枠線(ボーダー)
border: 太さpx 種類 色; で、上下左右に線が追加される
それぞれの方向の指定は余白と同じ記述方法

```stylesheet.css
p {
 border: 5px solid red;  /*赤枠の線で囲まれる*/
 border-bottom: 1px solid #333;  /*下部に枠線*/
}
```

##ボックスモデル
余白とボーダーの関係

![image](https://qiita-image-store.s3.amazonaws.com/0/135833/10816b18-5cad-c3fb-10cc-fa3ef5241855.png)

画像は http://creator.aainc.co.jp/archives/5952 より


##Webページのレイアウト
要素をグループ化することで、それぞれにレイアウトを割り当てることができる。
例として、header、main、footerの３つのレイアウトに分けてみる。

```index.html
<div class="header">
</div>
<div class="main">
</div>
<div class="footer">
</div>
```

##文中の一部にCSSを適用
spanタグで囲むことで、その部分を指定してCSSを適用させることができる

```index.html
<p>ここは<span>Qiita</span>です</p>
```
```stylesheet.css
span {
 color: red;
}
```

出力結果
<p>ここは<font color="red">Qiita</font>です</p>

#気づいたこと・注意点
- タグと要素の違い。　要素は「タグと内容を含んだ文章全体のこと」を指す。タグは「要素のはじめと終わりを表現する<>のこと」
- HTMLの要素には、前後で改行される要素「ブロック要素」(ex: div要素、h1要素)とされない要素「インライン要素」(ex: span要素、a要素)がある。
- 要素を要素で囲むことを「入れ子」という。囲む方の要素を「親要素」、囲まれる要素を「子要素」と呼ぶ。インデントを忘れないように。
- css、class名 子要素 {} とすることで、そのclassの要素のみにcssを適用できる
- css、classの場合はドットが必要、タグの場合はいらない。


どんどん追記していきます！