HTMLとCSS (中級編）②
こんにちは。一様、ProgateのHTML&CSSレッスンは全て終え、大まかに理解したような感じですが、やはり実際に間違えながら自分でサイトを作ってみる事が一番自分の物になるような気がします・・・今日は前回の続き、HTML＆CSS（中級編）のまとめです。
★text-align → テキストの配置プロパティーでインライン要素とインラインブロック要素の配置指定。（CSS)
例： text-aligan:left; （左寄せ）
text-aligan:center;（中央寄せ）
text-align:right; （右寄せ）
※上記の様にテキストやボタンのようなインライン要素やインラインブロック要素には
text-align:center; を使うが、containerクラスの様に広い範囲を囲うようなブロック要素には → magin: 0 auto;'を使う。
★アイコン表示方法
- まずは沢山のアイコンが用意されているfont awesomeでアイコン取得可能。実際に自分のサイトにアイコンを表示したい場合はFont awesomeのCSSファイルを読み込む。以下が読み込みか方 ↓
<head> <link rel="stylesheet" href="font awesome.css> </head>
- <span>タグにfaクラスとfaアイコン名を指定する。(Font awesomeにアイコンごとのクラス名が載っている。）
例：<span class="fa fa-facebook"></span>
<span class="fa fa-twitter"></span>
★opacity → 要素の中身を全て透明にする。
★raba → ＊要素の背景のみ透明にする。
＊4つの値なっていて、最後の値が透明度を表す値
＊コンマでそれぞれの値を区切る
※ raba学ぶ前に理解しておくべきrgb（色指定：3つの値の組み合わせ）
例：① background-color:rgb(225,147,30);
② background-color:#ff931e;
①と②は同じ色！
★transition
- 多くの場合hoverと組み合わせて使う。
- アニメーションをつける事が出来る。
- 変化の対象や変化にかかる時間などの指定ができる。
- 変化の対象にcolorなどのプロパティーを使うがall指定すると全てに適応される。
例：trasnsition: all 1s;
all=変化の対象
1s=変化の時間
★line-height → 行間指定プロパティーで値が大きいほど行間が大きくなる。
例： line-height: 10px;
以上、これでHTML&CSS（中級編）は終わりです。次回は上級編です。つづく～
