HTML・CSSを0から勉強した時の備忘録

#はじめに
今回は自分がHTML・CSSを初めて勉強した時の備忘録になっています。

特に目新しいことはありませんが、お付き合い頂ければ幸いです。


####見出しの要素
`h1`などで囲めば見出しになります。数字が大きくなるほど小さくなります。

```.html
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
```

><h1>h1</h1>
><h2>h2</h2>
><h3>h3</h3>

####段落
`pタグ`で囲めば段落になります。

```.html
<p>１段落目</p>
<p>２段落目</p>
```

><p>１段落目</p>
><p>２段落目</P>

通常、`hタグ`や`pタグ`で囲んだ文字列は改行されます。

見出しには`hタグ`を、それ以外には`pタグ`を使いましょう。

####コメント
htmlにもコメントが存在します。以下のように記述してください。

```.html
<!-- コメントは表示されない -->
```

> <!-- コメントは表示されない -->

このようにするとhtmlにコメントと認識され、表示されません。

####リンクについて
`aタグ`で囲めばリンクになります。リンク先を指定するには、`href="リンク先"`で指定しましょう。

```.html
<a href="https://qiita.com/renesisu727/items/cf86b1d2df7f871f383f">リンク先</a>
```

><a href="https://qiita.com/renesisu727/items/cf86b1d2df7f871f383f">リンク先</a>

####画像を表示する
画像を表示するには`imgタグ`に`src属性`を指定し、`src="画像のURL"`としましょう。

画像を表示する場合は終了タグが必要ないことに注意して下さい。

```.html
<img src="https://d1f5hsy4d47upe.cloudfront.net/ac/ac6d5a8d05f5792627a8039a2bddbe79_t.jpeg">
```

><img src="https://d1f5hsy4d47upe.cloudfront.net/ac/ac6d5a8d05f5792627a8039a2bddbe79_t.jpeg">

ネット上の画像を貼り付ける場合は、右クリックで画像アドレスをコピーを選べばURLをコピーできます(Chromeの場合)。

####リストの作成
`ulタグ`または`olタグ`で囲まれたグループの各々を`liタグ`で囲むことでリストになります。

`ulタグ`のグループならば黒丸のリストに、`olタグ`のグループならば数字のリストになります。

```.html
<ul>
    <li>これは</li>
    <li>黒丸の</li>
    <li>リストです</li>
</ul>
```

><ul>
    <li>これは</li>
    <li>黒丸の</li>
    <li>リストです</li>
</ul>

```.html
<ol>
    <li>これは</li>
    <li>数字の</li>
    <li>リストです</li>
</ol>
```

><ol>
    <li>これは</li>
    <li>数字の</li>
    <li>リストです</li>
</ol>

CSSで`liタグ`の`list-style`プロパティに`none`を指定すると、リストのマークを消すことが可能です。

```.css
li {
    list-style: none;
}
```

また、CSSで`liタグ`の`float`プロパティを変更することで、リストの並びを指定することができます。

`left`とすると要素が左から順に横並びに、`right`を指定すると要素が右から順に横並びになります。

```.css
li {
    list-style: none;
    float: left;
}
```


####htmlのクラスの指定
タグ名の後ろにクラスをつけることで、タグに名前をつけることができます。

この名前はCSSで指定する際に役にたちます。

```.html
<h1 class="test">Hello World</h1>
```

><h1 class="test">Hello World</h1>



####html全体の構成について
htmlは全体の構成がある程度決められています。

これについてはあまり覚えていなくても、Emmetなどのツールを使えば何も考えずに!を押した後にTabを押せば一気に補完してくれます。Emmetなどについては[こちら](https://tracpath.com/works/development/emmet-for-web-developers/)のサイトを参考にしてください。

```.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    
</body>
</html>
```





このコードの意味について解説していきます。

`<!DOCTYPE html>`の部分は、htmlのバージョンを指定していて、「これはHTML5の形式だよ！」ということを宣言しています。

`htmlタグ`は、「ここからここまでがhtmlだよ！」ということをブラウザに伝えています。

`lang属性`は必須の項目ではないのですが、ユーザーのためにこのhtmlがどこの言語で記述されているのかを伝えています。今回はlang="ja"なので、日本語を使うという意味です。

`headタグ`の中にはWebページの設定に関する情報を書いていきます。

`<meta charset="UTF-8">`の部分は文字コードを指定していて、今回は文字コードの`UTF-8`を利用するというこという意味になります。

`UTF-8`については[こちら](https://wa3.i-3-i.info/word1812.html)のサイトによくまとめられているので参考にしてください。

`<meta name="viewport" content="width=device-width, initial-scale=1.0">`の部分はよく分からなかったのでしらべたところ、[こちら]()の記事に分かりやすくまとめられていたので、参考にしてください。

`<meta http-equiv="X-UA-Compatible" content="ie=edge">`については[こちら](https://twotone.me/web/1755/)の記事を参考にしてください。

`titleタグ`にはページのタイトルを入れます。

`<link rel="stylesheet" href="stylesheet.css">`の部分で、cssファイルを読み込んでいます。

`rel="stylesheet"`の部分でcssファイルを読みこむ宣言をしていて、`href="stylesheet.css"`で読みこむcssのファイル名を宣言しています。

####htmlのレイアウトについて
Webサイトはヘッダーやメイン、フッターなどの部分に分けられます。

このようにwebサイトの要素をグループ化するときには、`divタグ`を用います。

```.html
<div class="header">
</div>

<div class="main">
</div>

<div class="footer">
</div>
```

####htmlのブロック要素とインライン要素について
`h1タグ`や`pタグ`などの前後に改行が入る要素をブロック要素といい、`aタグ`などの改行が入らない要素をインライン要素といいます。


####inputとtextareaについて
`inputタグ`により、１行のテキストを受け取ることができます。`inputタグ`に終了タグは不要です。

```.html
<p>これはinput要素</p>
<input>
```

`textareaタグ`により、複数行のテキスト入力を受け取ることができます。

```.html
<p>これはtextarea要素</p>
<textarea cols="30" rows="10"></textarea>
```

`col属性`で`textarea`の横幅を、`rows属性`で`textarea`の縦幅を決定しています。

####type属性について

`inputタグ`に`type属性`を指定することで、さまざまなことができます。[こちら](http://www.htmq.com/html5/input.shtml)に様々な例が書いてありますが、例えば`type属性`に`submit`を指定すると送信ボタンに変更することができます。

```.html
<input type="submit">
```


#CSSについて
CSSは、HTMLの要素に色や大きさ、配置などの情報を付与するものです。書かれている内容(HTML)と体裁(CSS)を別ファイルにすることで、複数のHTMLファイルを同じ体裁にしたり、同じHTMLファイルをPC用とスマホ用の体裁に変更することができます。


##CSSの要素の指定方法
CSSはタグやクラスで要素を指定します。タグで指定するときはドットは必要ありませんが、クラスで指定するときはドットが必要になります。

クラスの要素の中のタグを指定するときは「.クラス名 タグ名」で指定することができます。

以下の様々な例をみていきましょう。

####文字の大きさの変更
以下のようにすることでh1タグの要素の大きさを変更できます。

```.css
h1 {
    font-size: 20px;
}
```

大きさはピクセルという単位で指定します。

####文字の色を変更
以下のようにすることでtestクラスの色を赤色にすることができます。

```.css
.test {
    color: red;
}
```

####CSSのコメント
以下のようにするとCSSにコメントを記述できます。

```.css
h1 {
    /* 文字の色を指定*/
    color: red
}
```

####文字の種類の指定
以下のようにすることで文字のフォントを指定することができます。

```.css
h1 {
    font-family: 'Times New Roman', Times, serif;
}
```

空白が有る場合はダブルクォーテーションで囲む必要があります。font-familyの指定には[こちら](https://qiita.com/jshimazu/items/f6fde3b97c0491dc458c)の記事を参考にしてください。


####背景の色の変更
以下のようにすることで背景の色を変更することができます。

```.css
h1 {
    background-color: brown;
}
```

####横幅・高さの変更
以下のようにすることで横幅と高さを指定できます。

```.css
h1 {
    width: 400px;
    height: 100px;
}
```

##CSSの空白の調整
####paddingについて
`padding`を指定することで、上下左右の空白を指定することができます。

値を四つスペース区切りで書いた場合には、それぞれが`上　左　下　右　`の余白を指定することになります。

値を二つスペース区切り書いた場合には、それぞれが`　上下　左右　`の余白を指定することになります。

値を一つ書いた場合には、それが`上下左右`の余白を指定することになります。

```.css
h1 {
    padding: 50px 100px;
}
```

もう一つCSSの空白を調整するものに`margin`というものがあるのですが、それを取り扱う前にボーダー（枠線）について取り扱います。

####ボーダーについて
`border`プロパティを用いることで、枠線の太さ、種類、色を指定できます。

```.css
h1 {
    border: 10px solid brown;
}
```

####marginについて
上の部分で`padding`を取り扱いましたが、`padding`と似たものに`margin`があります。

`padding`と`margin`の違いは、`padding`はボーダーの内側に余白を作り、`margin`は余白の外側に余白を作る、ということです。

ボーダーの内側と外側という違いがあるだけで、余白の指定方法は`margin`も`padding`も変わりません。

```.css
h1 {
    border: 10px solid brown;
    padding: 10px;
    margin: 10px
}
```

#終わりに
今回はここまでになります。まだ必須のものが沢山あるので、次の備忘録でまとめていきます。

お付き合いいただきありがとうございました。