【1st】DAY3『Progate HTML & CSS 中級編(3章まで)』

プログラミング

内容

今日は、Progate HTML & CSS 中級編(3章まで)です。

やってみて思ったこと

所要時間は大体1時間くらいでした。

ほとんど知っていましたが、文字の間隔を指定できるletter-spacingは初めて知りました。

キーワード

headerとfooter

初級編では「header」と「footer」は「div」に、クラス名として書いていたと思うのですが、HTML5では<header>要素と<footer>要素を使うようになっています。

参考記事

背景画像の設定

背景画像を設定するときは、CSSに記述します。
書き方は、以下です。

div {
  background-image: url(visual.png);
  background-size: cover;
}

「background-size: cover;」は表示される範囲を1枚の画像で埋めるためのコードです。

参考記事

opacity

opacityプロパティーは要素の透明度を指定します。
opacityの意味は、「不透明」です。

指定する方法は、0.0~1.0の間で指定します。
0に近いほど透明になって、1に近いほど不透明です。

letter-spacing , line-height

文字の間隔はletter-spacingで指定します。

似たような機能で行間はline-heightを使います。
行間を指定できると同時に縦方向の中央に文字を配置します。

要素を中央に配置する

要素を中央寄せにする方法は2パターンあります。
marginを使う方法とtext-alignを使う方法です。

これらの違いを整理しましょう!

containerクラスのように、広い範囲を囲うようなブロック要素の場合はmarginを使います。

テキストやボタンのようなインライン要素・インラインブロック要素の場合はtext-alignを使います。

:hover

:hoverは「擬似クラス」というものらしいです。
擬似クラスを使えば、指定した要素に対して特定の状態を指定できます。

今回の:hoverではカーソルが指定した要素に乗った時のスタイルを指定できます。

ボーダーの角を丸くする

ボーダーの角を丸くしたいときは、「border-radius」を使います。

指定する単位は「px」や「%」などです。
数字が大きいほど角が丸くなります。

色の指定

色を指定する方法は4種類あります。

  1. #からはじまる6桁の数字の組み合わせ
  2. 色の名前を直接指定
  3. rgb表記
  4. rgba表記

rgba表記だけが透明度を指定できます。
他の表記のやり方では、opacityを使って別でコードを書かないといけません。

アイコン

アイコンを表示したいときは、「Font Awesome」を使うと便利です。

使い方の記事を書いたのでこちらをご覧ください!

transition

アニメーションをつけたいときに、「transition」を使います。
「transition」を使うと、変化の対象や変化にかかる時間などを指定できます。

参考記事

以上がDAY3でした。

コメント