はじめに
HTML＆CSS初級編の続きになります。
勉強ついでに、学習したことを備忘録としてまとめようと思います。
環境
OS：macOS
エディタ：VSCode
ブラウザ：Google Chrome
受講コース：HTML & CSS 中級編
2021/05/11 追記
CSSで使用したプロパティに記入漏れがありましたので、追記しました。
目次
1 本コース中に使用したHTMLのタグとCSSのプロパティ
コース学習中に登場したHTMLタグとCSSのプロパティ、それらの使用用途を簡単にまとめました。
学習中にMDNを確認しているので、コース中では使われていない用途が書かれているかもしれません。
興味がある方は、調べてみてください。
https://developer.mozilla.org/ja/docs/Web/HTML/Element
HTMLで使用したタグ
| タグ（要素） | 使用用途 |
|---|---|
| header | ページのヘッダーを表す要素 |
| footer | ページのフッターを表す要素 |
CSSで使用したプロパティ
| プロパティ | 使用用途 |
|---|---|
| text-decoration |
テキストに装飾を指定する アンダーラインを引いたり、訂正の線を引いたりできる (2021/05/11 追記) |
| background-image |
背景画像を指定する 指定方法 background-image: url(画像のURL); |
| background-size |
背景画像の寸法を指定する 「cover」を指定すると、１枚の画像で表示範囲を埋め尽くす |
| opacity |
要素の透明度を指定する0.0~1.0(0.0で完全に透明、1.0で完全に不透明）で値を指定する |
| letter-spacing | 文字の間隔を指定する |
| display | 要素をブロック要素、インラインブロック要素、インライン要素 いずれかに変更できる |
| border-radius |
要素の角を丸める 数字が大きいほど角が丸くなる |
| text-align |
インライン要素やインラインブロック要素の配置を指定するleftで左寄せ、centerで中央揃え、rightで右寄せになる |
| rgba |
要素の色と透明度を指定する r,g,b(各0~255の256段階),透明度で色を指定する |
| transition |
アニメーションをつける 変化の対象（プロパティ名）、時間を指定する |
| line-height |
行の高さを指定する 要素の高さと同じ値を指定すると、文字が縦方向の中央に配置される |
| font-weight |
文字の太さを変更するnormalまたはboldを指定する |
| position |
要素の位置を指定する 基準位置からの位置を topやleftなどを用いて指定する |
| box-shadow |
ボックスに影をつける 影をつけたい水平方向、垂直方向、影の色を指定する |
| cursor |
要素にカーソルが乗った時のカーソルの形を指定する |
| z-index |
要素の重なり順序を指定する 値が大きいほど、重なったときに上部に表示される |
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以降を利用するには、メールアドレスを登録してアカウントを作成する必要があるようです）
*省略
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v○.○.○/css/all.css">
<!--v○.○.○には使用したいバージョンの情報を入力する -->
</head>
*省略
アイコンを表示させる方法
spanタグにfaクラスとfa-アイコン名クラスを指定する。
（表示させたいアイコンを公式ページで検索すると、指定すべきクラス名が出てきます）
*省略
<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>
*省略
4 その他の学びや注意点について
・文字や要素の中央寄せについて
ブロック要素：marginの左右をautoに指定する（必ずwidthを併せて指定する）
インライン要素、インラインブロック要素：text-alignをcenterに指定する
・class名は1つのタグに対して複数指定でき、半角スペースでclass名を区切る
例：(class="a b")
・ボックス要素のwidthやheightをpxではなく%で指定すると、
親要素に対しての幅や大きさを指定できる。
・positionによる基準位置の指定について
absolute：サイト全体の左上部分が基準位置となる。
relative：その要素の左上部分が基準位置となる。基準としたい親要素に指定すると、親要素の位置に対する子要素の位置を指定できる。
fixed：常に要素を画面上の指定の位置に固定させる。
5 最後に
続いて、上級編を学習していきます。
内容の誤りや補足等ありましたら、コメントにて教えていただけますと助かります。