プログラミングつまづき、学び

HTML CSS JAVASCRIPT

基本的にはここ数週間の反省文なのだが、結構自分と同じところで躓く初心者がいる!
ということもあるので書いてみる。
(テックブログっていうのはやっぱりスキルがどういうレベルでも書いたほうが技量向上のためにいい。とのこと。)


よって、プログラミング学習などを通じて見落としがち、実はここら辺が自信がない!ってポイント
あやふやな理解のままなんとなくやっていたなどあったら役に立つのではないかと思う。

上記のように述べているにもかかわらず以下の技術に関する記載の正当性に保証はないということ!

HTML CSS

html

  • section とか navと などをあまり適切に使ってなかった。
    例えば、sectionは見出しの意味があるから次にh2など、見出しとなるようなタグをいれておくようにする。ul li タグの前にnavタグを入れるなど。
  • inputタグのname属性がphpで紐づくこと。
    ユーサビリティを考慮してlabel for がinput type のid名と一致するようにすること
    <label for=”id名”>と<input type=”【何か】” name=【id名】id=【何か】>
    結構重要なはず!
  • header は割とどこでもつかっていい。

CSS

  • 一番はアニメーション効果について。例えばボタンにホバーしたときに動作が変化するという場合。よくみるハンバーガーボタン(リンク先に飛びます)の実装。
    <buttn><span></span></button> もしくは
     <buttn><span></span><span></span><span></span></button>(ボタンタグ内にspanタグ3つ) 前者のbuttonタグ内にspanタグを1つ入れる場合span,span::before,span::after
    それぞれを使って3本の線としてハンバーガボタンの線を実装する。
    後者のspanタグをbuttonタグ内に3つ子要素としてラッピングする場合はnth-child をつかって
    それぞれの線を描画する。(ここで線自体が持つ長さ などをケアしないと正しく均等にはならない)。
    大体、ボタンをタップ(もしくはクリックするとハンバーガーの縦3本線が×印になって
    画面が切り替わるという挙動を示す。)  transition プロパティを使う。
  • em rem vw という単位。 いまいちわからない。
    ただ聞く限り、remは使うのはなれるまでやめておこうと思う。

Javascript 

すぐ、スコープにひっかかって冗長なコードをかく。あと非同期を活用できない。
初心者は非同期理解していない人多いらしい。

おしまい

その他いろいろあります。一度二度、いや三度 習ったことでも「あれ。もしかして自分はできなくなってるんじゃない?」とか自分を疑いながら試しに「できるであろうこと」をやってみると意外とたくさん気付ける。(もう理解していないという事実がある以上ポジティブに考えるしかないでしょ!)

コメント

タイトルとURLをコピーしました