学習報告②

暑い、じめじめしてる、そんな6月。

どんどん不快指数が増えてきて寝づらくなってきました。

そろそろ扇風機や冷房を付けないと寝れないかな・・・・。

本日の進捗です。

結果報告

中級コース 完了

残数

• 初級コース
• 中級コース
  • 初級演習問題①
  • 中級演習問題②
• 上級コース
  • 上級演習問題

計4つ　予定総時間　9h 30m

学習内容

• containerという考え方
• 背景画像の挿入

background-img:url(URL);

• 拡大、収縮対応

.img {
background-size: cover;
}

• 要素の透過(0.0~1.0まで)

.img {
  opacity: 0.5;
}

• インラインブロック要素: インライン要素、ブロック要素の特徴を持つ要素。displayのオプションで作成。

.icons {
display: inline-block; /* その他オプションはblock, inline */
}

• マウスホバー時の処理

.selector:hover{}

• 「margin: 0」と「text-align:center」の違い
  • 「margin: 0」
    • 広い範囲を囲うようなブロック要素に使用
  • 「text-align:center」
    • テキスト、ボタンのようなインライン要素、インラインブロック要素に使用
• Font Awesome(アイコンのサイト)
• 「opacity」と「rgba」
  • 「opacity」
    • 要素の中身をすべて透過してしまう
  • 「rgba」
    • 背景のみの透過ができる

.img {
  background-color: rgba(0, 0, 0, 0.5);
}

• アニメーション

.selector {
  transition: all 1s;
}

• 要素同士を重ねる際に使用。サイトの左上が基準位置となる。

.selector {
  position: absolute;
}

• 親の要素に「position: relative」と指定すると、その要素の左上が基準位置となる
• 要素がクリックされている間

.img:active {}

• 影を付けた要素を、へこませるような処理(影を6pxとする)

.selector:active{
  position: relative;
  top: 6px;
  box-shadow: none;
}

「position: relative」と「top」によって、影の部分だけ位置を下げることで実装している

• 画面上に要素を固定する

header{
  position: fixed;
}

所感

今まで何となくで使っていてしまっていた、「display」や「absolute」等について理解を深めることができたことが一番大きかったかと思います。 プロパティによって何が起き、レイアウトにどう影響するか・・・・今までしっかり学習していなかった所を改めて学ぶことができ、幸せです。

仕事が決まればもっと幸せですが・・・・・。

本日はここまで。