8月10,11,13日 学習記録

実施内容

• progate

  HTML/CSS 中級編 道場コース

  第1章:中級編を復習しよう

  トップ部分を作ろう

  ヘッダーを作ろう

本日学習した内容

• 1:トップ部分作成

  トップ部分は、初級編と似ている箇所が多かったので、手こずった所は少なかった。

  ただし、いくつか忘れてた事項があったので、それらを復習しつつ行った。

  ↓復習した内容

  ①text-align

  テキストのインライン要素や、インラインブロック要素の位置を指定できる。

  「left」で左寄せ、「center」で中央寄せ、「right」で右寄せとなる。

  ②background-image:url(～)

  背景画像を設定。「～」の部分は画像のURLを記述。

  ③border-radius 数値

  要素の角を丸める。数値が大きいほど角が丸くなる。

• 2:ヘッダー部分作成

  大まかな見た目の作成は苦労しなかったが、背景画像がヘッダー部分に回り込むようにしたり、ボタンにカーソルを乗せたときの挙動などについて忘れていた部分があった。

  ↓復習した内容

  ①position:fixed;

  このプロパティを設定し、top、bottom、right、leftを設定することで、要素をその位置に固定させる事ができる。

  ②z-index 数値

  要素が重なる順番を設定できる。数値が大きいほど上に表示される。

  ※このプロパティは必ず「position:fixed;」と併用する必要があるので注意。

  ③セレクタ:hover

  要素にカーソルを乗せた時の挙動を指定できる。

  ④:transition 変化の対象 変化させる時間

  「セレクタ:hover」と併用して、要素にカーソルを乗せた際にアニメーションを付けることができる。

  変化の対象にはcolorなどを設定できるが、allとすることで、全てを変化させられる。

  変化させる時間は、1秒間なら「1s」という風に書く。

  例えば、対象の要素にカーソルを乗せた際に、2秒間色を変化させたい場合は、「transition:color 2s;」と記述する。

• 3:作成したソースコード

• 4:サイトのプレビュー

  

今日のエラー

要素の太さを指定する際に、「font-weight」ではなく「font-size」と書いてしまった。