Webエンジニア目指して#5

Progate HTML CSS

どうも夜勤明け貫徹失敗マンです。夜勤明けを休みとしてカウントしたくない。

イヤホンの修理に挑戦してました。工作は楽しいね
2pinと線材に半田付けするときに乗せる感じでやってたら熱で樹脂が変形したのでもう一回パーツ買ってやり直しです...

乗せる感覚でやるのが癖になってますけど熱にデリケートなものは半田を落とす感じでやらないと大変なことになりますね

 

あと煤竹の高い耳かき買ったら想像すらしていないごつさだったのでヤスリ買って加工してました。プロ並みのクオリティの"耳掃除道具"が完成しました。耳かきではありません。痛い。繊細に使わないと痛い。痒くないところまで届きます。デフォルトは流石にごつすぎるけど使ってて気持ちいい薄さ、細さがどっかにあるんでしょうね...

 

というわけでProgateのHTML＆CSS中級です。

HTML

  • HTML5では<footer></footer>、<header></header>タグが用意されている。divタグでフッターヘッダーを作る必要はない
    これらのタグを使った際はうっかりCSSでクラス指定しないように注意

    これ書いてませんでしたね。やってる途中でうっかりクラス指定したからそういうことです。

CSS

  • background-color:rgba(255,255,255,0.9); 赤、緑、青、不透明度を指定
    　aってなんだと思ったらAlpha値なんですね～

  • transition:all 1s;　colorなどのプロパティ、秒数を指定
    　セレクタ:hoverを使うときに変化をアニメートするもの
    　変化元の要素に記述する

  • line-height:10px;　行間を指定
    　縦の中央配置にも用いる

  • <a>はインライン要素のためクリック範囲が狭い。ブロック要素にすることでボタンの範囲を指定できる

  • font-weight:normal;　文字の太さを指定　normalとboldで指定する　
    　h1~h6タグはデフォがboldなのでそれをnormalにしたい時などに使う

  • width:25%;　階層が一つ上のセレクタのボックス（親ボックス）の中で
    　ボックスサイズ比率を指定　heightもある

  • position:absolute;　要素の位置をサイト全体の左上を原点として絶対指定
    　親ボックスで値をrelativeにすると、子ボックスでabsoluteにした際、
    　親ボックスのブロックの左上を原点とする
    　位置の指定はtop: right: left: bottom:

  • box-shadow:5px 5px #fff;　ボックスの影を描写　下方向、右方向、色を指定
    　負の値を入れると上方向、左方向に描写できる

  • cursor:pointer;　ボックスにマウスオーバーしたときのマウスグラフィックの指定
    　pointerが指、textが大文字のIみたいなやつ、defaultがいつもの矢印

  • セレクタ:active　要素がクリックされている間、CSSを適用させる。
    　ボタンの挙動に使ったりする。
    　:hoverや:activeで変化元のCSSを打ち消す際はプロパティ:none;とする

  • 同要素内でposition:relativeと位置プロパティを指定すると、その要素の本来の
    　位置に対して配置を指定できる
    　セレクタ:activeでクリック時に影を短くしボックスを下にずらすように
    　すると、ボタンを押してる感のあるグラフィックが描写できる

  • position:fixed;　要素の位置を固定しページをスクロールしても表示されたまま
    　にする。top:0;にしてヘッダーによく使う。
    　位置を固定した際、スクロールしていくと他の要素の描画が上に乗っかって
    　しまう。そのため、下記のz-indexをセットで使う。
  • z-index:10;　いわゆるレイヤー。数字が大きいほど表示優先度が高い。
    ネットのクッソ鬱陶しい広告もこれ使ってんですかね？

というわけで中級終了！Webデザインらしくなってきて面白いですね～

次は上級、レスポンシブデザイン。

単語自体はよく見かけるけど響き的に動的なサイトかな～と思ってたらスマホやらPCやらで表示を変化させることなんですね。弊社の勤怠管理サービスがレスポンシブデザインではないため、レスポンシブデザインを学んで是非とも弊社の勤怠管理サービスをレスポンシブデザインにしていきたいですね。この辺にしときましょうか。

 

反省:セレクタ:activeや:hoverですが、セレクタ[スペース]:activeだと動きません。

あれ？動かねえ！バグ！？（思考停止）つってコード見たら:hoverのときはちゃんとスペース開けてませんでした。変に慣れてしまった故のミスって感じですね

初心者あるあるになってそうな問題でした。

よく考えたらスペース入れることでセレクタを追加（子セレクタの指定でした　2019/8/16追記）するわけで、[スペース]:activeとするとCSS君は「え、何がactiveのとき？」ってなるんですね。

 

Progateのフロントエンド部分が終わったあたりで読む本を見つけました、早速ぽちって終わる前からフライングします。スマホは長期的に見て効率悪いから本を読んでいきたい。

 

ではでは。