副業

HTMLの全体のレイアウト

2020年8月22日

こんにちは.Ryuです.

 

今回もプロゲートでの学びのアウトプットです.

 

  • Webページは大きくヘッダー,メイン,フッターに分かれる
  • レイアウトは<div>要素によって構成する.ついにでてきました!<div>!
  • マコなり社長が運営するプログラミング教育事業を行う会社名もdivですね.<div>要素の「div」は「division」の略で、要素をグループ化するために使用されるとのこと.「要素をグループ化するため」これを会社名に選んだんですね.面白いですね.ベテランのエンジニアが評価したら「ベタすぎるわ~」とか思うのかもしれないですが,少なくとも私は「面白いな」と思いました.
  • ヘッダーは<div class="header"></div>,メインは<div class="main"></div>,フッターは<div class="footer"></div>
  • エディタの補助機能としてTabキーを使用すると便利.<div>というタグ名を入力した時点でTabキーを押すと自動で</div>が入力される.タグによっては余計なものまで保管され入力される可能性があるので注意は必要.
  • CSSではheaderの前に.をつけることを忘れていた.
  • backgroundとcolorの間の-も抜けていた.
  • 色々な要素も同じ{}内に入れて大丈夫.
  • heightのスペルを忘れていた.
  • CSSでヘッダーに背景色と高さを指定する課題はついては,.header{background-color:#f7f2b4;
    height:90px;
    }で正解.

 

なんとなく全体像はつかめるのですが,細かいスペルミスや.を入力し忘れなどのケアレスミスが目立ちました.理解ができていないことがよくわかります.

 

プロゲートでの課題に取り組んでいるときは,そのままの答えは見ないようにしています.自分で考え,スライドを見てヒントを得て,できる限り手打ちで行っています.

 

いずれ色々な便利な自動入力ツールや方法などが出てくるのかもしれませんが,アナログで一つ一つ打っていることで理解が深まると思っているからです.

 

デモンストレーションの動画などでも,結構一つ一つ入力している印象です.

 

平日に学習が進められていないことを改善しなければなりません.

 

やはり早起きしかなさそうです.

 

学習時間
現在合計3時間(残り197時間)

-副業

© 2025 リハポケ Powered by AFFINGER5