基本的なまとめ

## 〜CSS/HTML〜　まとめ

これまで学習した部分をまとめてみました。といっても基礎的な部分ですが。。

### <font color="blue">HTML 要素には何要素と何要素が必要か？

html要素の中には <font color="Fuchsia">head 要素</font>と <font color="DarkOrange">body要素</font>がある

→ <font color="Fuchsia">head要素</font>の中には <font color="DarkTurquoise">title 要素</font>
→ <font color="DarkOrange">body要素</font>の中には <font color="DarkTurquoise">h1 要素</font>と <font color="MediumSeaGreen">p要素</font>
→ <font color="MediumSeaGreen">p要素</font>の中には <font color="DarkTurquoise">span要素</font>や <font color="DarkTurquoise">strong 要素</font>
この要素の始まりや終わりを示すのがタグです。 要素の中には終了タグを省略できるものがある。

```html
<html>  html 要素

  <head>
      HTML ファイルに関する情報（head 要素）
  </head>
 
  <body>
 
      読者に読んでもらう本文（body 要素）
      
  </body>
 
</html>
```




### <font color="blue">aタグを使用するとどんなことができるか？
aタグのaとは「anchor（アンカー）」を省略したもの。aタグは、ハイパーリンクの出発点と到達点を指定する役割を持っている。出発点とはWebページの画像や文字、到達点とはリンク先となる他のWebページやファイルのこと。

```html
例）<html>
    <p>ここはリンクになっていない。</p>
    <a href="指定したリンク先"><p>ここはリンクになっている。</p></a>
　　</html>
```
href属性で、このhref属性で移動先のリンクを指定することでリンクを機能させることができる。

### <font color="blue">imgタグを使用するとどんなことができるか？
imgタグは文書内に画像を表示するタグ。imgはimageの略称で、インライン要素となる。imgタグで表示できる画像の形式は「.gif（GIF形式）」「.jpg（JPEG形式）」「.png（PNG形式）」などがある。

- <font color="DarkTurquoise">src属性</font>
→ src属性は画像の読み込み元を指定する属性
src属性では、上述したようにWebサイト上に表示したい画像ファイルのパスを、相対パスまたは絶対パスで指定する。
src属性は必須項目となっており、imgタグを使用する際には必ず指定する必要がある。

```html
<img src="sample.jpg">
```
　　　　　　　　　　　　　　　　　　　　〜他にも〜

- <font color="DarkTurquoise">alt属性</font>
alt属性は、画像がWebサイト上に表示されなかった場合、代わりに表示されるテキストを指定する。
音声認識時に読み上げられるのもalt属性に指定した値となる。検索エンジンの画像判定にも利用される項目の為、必須項目ではないが、設定しておくことを推奨。

- <font color="DarkTurquoise">title属性</font>
title属性は、画像にマウスカーソルを合わせた際にツールチップで表示されるテキストを指定することが可能。指定しなくても特に問題は無し。
- <font color="DarkTurquoise">width属性</font>
表示する画像の横幅を設定することが可能。単位は「ピクセル」または「パーセント」で指定する。
また、単位を指定しない場合にはデフォルトで「ピクセル」が設定される。


- <font color="DarkTurquoise">height属性</font>
表示する画像の縦幅を設定することが可能。単位は「ピクセル」または「パーセント」で、デフォルト単位はwidth属性と同じ。

### <font color="blue">リストを作成する際はどんな要素が必要になるか？

HTMLに用意されているリストを作るタグは3種類ある。

- <font color="DarkTurquoise">liタグの使い方</font>
liタグは、リストの要素を定義するタグで、後から解説するulタグまたはolタグの中で使われるタグ。そして、要素となる文字や画像などを、liと/liで囲うことで、リストとして表示する。なお、liは、英語のlist itemの略になる。
```html
liタグの使用例
<li>リスト１</li>
```
- <font color="DarkTurquoise">ulタグの使い方</font>

ulタグは、順序のないリストを作る際に使われるタグであり、ulから/ulまでがリストになる。そして、この中に、liタグを記述する。ulは、英語のunordered listの略。
```html
<ul style="list-style-type: none">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>
```
〜　記号を使ったリストの例　〜
```html
<ul style="list-style-type: dot">
  <li>集合時刻：午前9時</li>
  <li>集合場所：校門前</li>
  <li>注意事項：動きやすい服装</li>
</ul>
```
```
表示例

・集合時刻：午前9時
・集合場所：校門前
・注意事項：動きやすい服装
```
- <font color="DarkTurquoise">olタグの使い方</font>
olタグは、順序のあるリストを作る際に使われるタグであり、olから/olまでがリストになる。そして、ulタグと同じく、この中にliタグを記述する。なお、olは、英語のordered listの略。
```html
<ol style="list-style-type: decimal">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>
```
〜　数字を使ったリストの例　〜

```html
<ol style="list-style-type: decimal">
  <li>受付で登録用紙をもらう</li>
  <li>登録用紙に必要事項を記入する</li>
  <li>登録用紙を窓口に提出してパンフレットをもらう</li>
  <li>パンフレットでスケジュールをチェック</li>
  <li>気になるブースへLet's Go</li>
</ol>
```
```
表示例

1. 受付で登録用紙をもらう
2. 登録用紙に必要事項を記入する
3. 登録用紙を窓口に提出してパンフレットをもらう
4．まずはパンフレットでスケジュールをチェック
5. 気になるブースへLet’s Go
```

### <font color="blue">ブロック要素・インラインブロック要素・インライン要素の特徴と違いは？

-  <font color="DarkTurquoise">ブロックレベル要素の特徴</font>
縦に要素が並ぶ
幅と高さを指定できる
余白を自由に調整できる
要素の配置を指定できない

- <font color="DarkTurquoise">インライン要素の特徴</font>
横に要素が並ぶ
幅と高さは指定できない
上下の余白が調整できない（上下のpaddingは指定できるが非推奨）
要素の配置を指定できる
インライン要素を使用する際は基本的にブロックレベル要素の中で使用します。

- <font color="DarkTurquoise">インラインブロック要素の特徴</font>
横に要素が並ぶ
幅と高さが指定できる
余白を自由に調整できる
要素の配置を指定できる
インラインブロック要素は「要素は横並びにしたいけど、横幅・高さや余白を調整したい」などの場面で使用する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3123154/69fd7b48-68f2-94f1-878d-d0412d7379e1.png)



### <font color="blue">レスポンシブデザインとはどんなもの?

レスポンシブデザインとは、Webサイトのデザインを「閲覧ユーザーが使用するデバイスの画面サイズに応じて表示を最適化するデザイン」を指す。

######   <font color="red"> 〜メリット〜
- SEO対策として有利
- 各デバイス別のページが安く作成できる
- メンテナンスが楽
- ホームページの更新が1度で済む
- デバイス別のURLを用意する必要がない

###### <font color="Cyan">〜デメリット〜</font>
- Webデザインに制限がありデザインが崩れやすい
- コーディングに時間がかかる
- スマートフォンでページの表示速度が遅くなることがある



### <font color="blue">Flexboxとはどんなものか？

- floatで作っていた横並びを、もっと簡単に作れるようになる。flexboxはfloatやインラインブロックよりも簡単で、後からの修正にも強く、横並びレイアウトの新定番となっているレイアウトモジュール。

- flexboxとは、webサイトなどの装飾を行うCSSにおいて、短く柔軟なコードで配置を行うためのレイアウトモードのこと。CSS3から追加された比較的新しい機能であるためIE9以前など古いバージョンのブラウザには対応していないが、現行のものであれば2019年時点ではほとんどのブラウザに対応している。配置というと「float」「display」「margin」などのプロパティを使うのが一般的である。しかし、このようなプロパティは癖が強いため、ちょっとした設定ミスでもレイアウトが崩れがちである。

<font color="red"> ※その点、flexboxのコードはシンプルで、CSSのみで要素内の配置や表示順序を変えることができます。また、要素間の幅の指定はもちろん、要素内の分量が異なる場合でも高さや幅を調整可能です。要素間の余白設定も簡単なので、より少ない時間でレイアウトを整えられます。