だらだらいふ

就職できないので手を出したブログ

学習報告②

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

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

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

本日の進捗です。

結果報告

中級コース 完了 f:id:darunn:20180608171402p:plain

残数

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

計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」等について理解を深めることができたことが一番大きかったかと思います。 プロパティによって何が起き、レイアウトにどう影響するか・・・・今までしっかり学習していなかった所を改めて学ぶことができ、幸せです。

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

本日はここまで。

今日の進捗

朝から失業認定でお山にあるハローワークへ自転車でいってきました。とても疲れました。

本日の進捗はこちら。

結果報告

初級コース 完了 f:id:darunn:20180607172929p:plain

残数

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

計5つ　予想総時間　14h

学習内容

  • 基本的なタグ
    • <h1>, <h2>, <div>
  • インライン要素、ブロック要素とは
    • インライン <span>
    • ブロック <p>
  • CSSの読み込み方
    • < link rel="stylesheet" href="hogehoge.css" >

所感及び反省

少し横になったら4hが経過していた。次から必ずアラームをセットし、時間を決めて起きる。

学習内容のインライン要素、ブロック要素の意味や説明と、何気なく使っていたlink rel のrelはrelation（関係）hrefはhypertext referenceであると、意味と用途を知ることができました。

過去に学習した内容がいかに突貫工事だったかを思い知りました・・・・。

今後も、魔法の呪文だけで済ませるのではなく、言葉や用途の意味まで一緒に学習していきます。

本日はここまで！

正直な話

人生

舐めていました、色々と。

その結果が人生で二度目の無職体験、Hahaha!!!

笑いごとじゃないんですが、笑っておきます。

さて、後悔してゲームに逃げてばかりでは何も進まないので、今の期間の間に手を動かそうかと・・・・。

エンジニアやりたいです！っていってるのに「公開できるものありますか？」の問いに「ありません。」と返すのは乾いた笑いしかでてこないので。

ということで、初歩中の初歩から学習を始めます。

学習に使うサイト

上記の学習サイトで下記言語の学習を１つ１時間以上、楽しくなってきたら飽きるまで。

そんなペースで大丈夫か？

大丈夫じゃない。

人間だもの、いきなりフルスロットルは難しいよ。

終わりに

この記事を最後に蒸発しないように毎日何かしら更新をします。

れ～つだらだら～いふ。