【備忘録】HTML＆CSS 中級編

#はじめに
[HTML＆CSS初級編](https://qiita.com/pensuke628/items/fa82a7e4649c74bd2883)の続きになります。
勉強ついでに、学習したことを備忘録としてまとめようと思います。

環境
OS：macOS
エディタ：VSCode
ブラウザ：Google Chrome
受講コース：HTML & CSS 中級編

2021/05/11 追記
CSSで使用したプロパティに記入漏れがありましたので、追記しました。

#目次
1. [本コース中に使用したHTMLのタグとCSSのプロパティ](#1本コース中に使用したHTMLのタグとCSSのプロパティ)
1. [ブロック要素とインライン要素](#2ブロック要素とインライン要素)
1. [Font Awesomeについて](#3Font Awesomeについて)
1. [その他の学びや注意点について](#4その他の学びや注意点について)
1. [最後に](#5最後に)

#1　本コース中に使用したHTMLのタグとCSSのプロパティ
コース学習中に登場したHTMLタグとCSSのプロパティ、それらの使用用途を簡単にまとめました。
学習中にMDNを確認しているので、コース中では使われていない用途が書かれているかもしれません。
興味がある方は、調べてみてください。
https://developer.mozilla.org/ja/docs/Web/HTML/Element

####HTMLで使用したタグ
|タグ（要素）|使用用途|
|:-:|:-:|
|header|ページのヘッダーを表す要素|
|footer|ページのフッターを表す要素|


####CSSで使用したプロパティ
|プロパティ|使用用途|
|:-:|:-:|
|text-decoration|**テキストに装飾を指定する**<br>アンダーラインを引いたり、訂正の線を引いたりできる<br>(2021/05/11 追記)|
|background-image|**背景画像を指定する**<br>指定方法　background-image: url(画像のURL);|
|background-size|**背景画像の寸法を指定する**<br>「cover」を指定すると、１枚の画像で表示範囲を埋め尽くす|
|opacity|**要素の透明度を指定する**<br>`0.0~1.0(0.0で完全に透明、1.0で完全に不透明）`で値を指定する|
|letter-spacing|**文字の間隔を指定する**|
|display|要素をブロック要素、インラインブロック要素、インライン要素<br>いずれかに変更できる|
|border-radius|**要素の角を丸める**<br>数字が大きいほど角が丸くなる|
|text-align|**インライン要素やインラインブロック要素の配置を指定する**<br>`left`で左寄せ、`center`で中央揃え、`right`で右寄せになる|
|rgba|**要素の色と透明度を指定する**<br>r,g,b(各0~255の256段階),透明度で色を指定する|
|transition|**アニメーションをつける**<br>変化の対象（プロパティ名）、時間を指定する|
|line-height|**行の高さを指定する**<br>要素の高さと同じ値を指定すると、文字が縦方向の中央に配置される|
|font-weight|**文字の太さを変更する**<br>`normal`または`bold`を指定する|
|position|**要素の位置を指定する**<br>基準位置からの位置を`top`や`left`などを用いて指定する|
|box-shadow|**ボックスに影をつける**<br>影をつけたい水平方向、垂直方向、影の色を指定する|
|cursor|**要素にカーソルが乗った時のカーソルの形を指定する**<br>|
|z-index|**要素の重なり順序を指定する**<br>値が大きいほど、重なったときに上部に表示される|

####CSSの類似クラス
|類似クラス|使用用途|
|:-:|:-:|
|hover|要素にカーソルが乗った時のCSSを指定する|
|active|要素をクリックしているときのCSSを指定する|


#2　ブロック要素とインライン要素
ブロック要素の中には、他のブロック要素やインライン要素を配置できる。一方、インライン要素の中には、テキストデータや他のインライン要素を配置できるが、ブロック要素を配置することはできない。
また、ブロック要素とインライン要素の両方の特徴を持つ`インラインブロック要素`というものもある。displayプロパティで指定することができる。

・ブロック要素：前後で改行が入り、親要素の幅一杯に広がる要素（例：div、h1、pなど）
・インラインブロック要素：ブロック要素とインライン要素の両方の特徴を併せ持った要素
・インライン要素：改行されない要素（例：span、aなど）

||ブロック要素|インラインブロック要素|インライン要素|
|:-:|:-:|:-:|:-:|
|width,height|指定できる|指定できる|指定できない|
|margin,padding|指定できる|指定できる|左右のみ指定できる|
|配置|縦並び|横並び|横並び|

#3　Font Awesomeについて
webページにアイコンを表示させたい場合、「Font Awesome」を使用すると良い。
ほとんどのサービスを無料で使用できる。
アイコンの一覧や詳しい使用方法については、下記ページに記載されています。
https://fontawesome.com/

####Font Awesomeの導入
head要素内でCSSを読み込みます。読み込みたいバージョンを指定します。
（注：ver5.9以降を利用するには、メールアドレスを登録してアカウントを作成する必要があるようです）

```html:
*省略
  <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v○.○.○/css/all.css">
    <!--v○.○.○には使用したいバージョンの情報を入力する -->
  </head>
*省略
```

####アイコンを表示させる方法
`span`タグに`fa`クラスと`fa-アイコン`名クラスを指定する。
（表示させたいアイコンを公式ページで検索すると、指定すべきクラス名が出てきます）

```html:test.html
*省略
<div class="test1">
  <h3>ハート<span class="fa fa-heart"></span></h3>
  <h3>スター<span class="fa fa-star"></span></h3>
  <h3>amazon<span class="fab fa-amazon"></span></h3>
</div>
*省略
```

![スクリーンショット 2021-05-08 1.19.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1382306/6ccf2056-7ac4-ef91-8d86-4b11465398e3.png)

#4　その他の学びや注意点について
・文字や要素の中央寄せについて
　`ブロック要素`：marginの左右を`auto`に指定する（必ず`width`を併せて指定する）
　`インライン要素、インラインブロック要素`：text-alignを`center`に指定する
・class名は1つのタグに対して複数指定でき、半角スペースでclass名を区切る<br>　`例：(class="a b")`
・ボックス要素の`width`や`height`を`px`ではなく`%`で指定すると、<br>　親要素に対しての幅や大きさを指定できる。
・positionによる基準位置の指定について
　`absolute`：サイト全体の左上部分が基準位置となる。
　`relative`：その要素の左上部分が基準位置となる。基準としたい親要素に指定すると、親要素の位置に対する子要素の位置を指定できる。
　`fixed`：常に要素を画面上の指定の位置に固定させる。


#5　最後に
続いて、上級編を学習していきます。
内容の誤りや補足等ありましたら、コメントにて教えていただけますと助かります。