【HTML,CSS,JS】フロント三種分からんからまとめ

おつです。HTML, CSS, JavaScriptもちょいちょいやってくので、学習記録を下記に今後まとめていくぞ。

概要

HTML, CSS, JavaScriptの勉強でやったこと、まとめておきたいことを記事にする。

勉強法

基本的にProgateをガンガンやる。

分からんところ

HTML - class="container"について

よくこのクラス名"container"でdivタグが取られている。毎度同じクラス名なので多分CSSを適用しないことを前提に作ってるんだと思うけど、このdivってどんな意図を持って設定されているんだろう。同様に、class="XXX-wrapper"ってのもよく見かける。これもどういうdiv要素に対してつけてるんだろ。
つーかそもそも、何重にもdivタグ使うことあるけどなんなん。実例下記。
（これProgateで使われるコード。みんなもやろうねProgate）

    <div class="message-wrapper">
      <div class="container">
        <div class="heading">
          <h2>
            さぁ、あなたもProgateでプログラミングを学んでみませんか?
          </h2>
          <h3>
            Let's learn to code, learn to be creative!
          </h3>
        </div>
        <span class="btn message">
          さっそく開発する
        </span>
      </div>
    </div>

ここでも"message-wrapper"と"container"が、それ以下の要素を二重に覆っている。どっちかあればいいじゃん。
俺の考え①
一つの回答としては、wrapperとcontainerでは意味合いが違う。wrapperは全体に対してここがどんなエリアなのかを説明しており、containerは下位要素のcontainer（文字通り）なんじゃないか。
containerについて詳しくいうと、並列に扱いたい・まとめて一つの概念として扱いたいタグ達を<div class="container">に入れてまとめてる。
また、一つの概念として扱う・並列関係にある、という意味的な整理のため以外にも、単にそのcontainerセレクタに対してCSSを適用すれば下位の要素たちに一律に同じCSSを適用できるって利点もある。

→ 『HTML5/CSS3 モダンコーディング』に下記のような記述があった。

メイン領域とサイドメニューを横並びにするため、その２つを囲む.wrapperというdiv要素も定義しています。

へー、横並びにしたいときに囲むのかな？　まあ別の意図もあるっちゃあるんだろうけど。

HTML - h1~6の要素について

全部p要素でよくない？？？CSSで太さとかいじればいいじゃん。 → セクションって概念がある。普通のブログ記事みたいに、見出し、小見出しがあって構造化してくれるみたい。マジか。

HTML, CSS - HTMLのimg要素と CSSのbackground-imageの違い

分かんね。

CSS - marginとpaddingの使い分け

ここら辺は魔の道なので、先行者のやり方をまず真似てみたいなと思う。
[CSS] marginとpaddingの使い分けに本気出してみた。が、borderもちゃんと考える。 - Qiita

要点は、
・BOX要素は内から順に「文字とか入るエリア、padding、border、margin」と並ぶ
・背景色が適用されるのはborderまで
・box-sizing:border-box指定をせよ
また、上記の記事の中でmaiginとpaddingの使い分けについて、コンポーネントがなんやかんやみたいな記述があるんだが、全くもって意味がわからないのでそこは無視する。で、改めて自分で考えてみたんだが、box同士の関係性って結局隣接するか親子関係になるかのふた通りだ。だったら、隣接するときはmargin、親子のときはpaddingでいいのかなと思った。（※ただ、次のケースでどうpaddingさせるのかちょっと分からん。親要素の中に二つの子要素が並列されており、子要素ごとに親要素からの距離？隙間？が違うときどう設定するのか。うーん、まあ子要素の大きさ揃えればええやろって思うけど。。）

CSS - 横位置中央揃え

横位置中央揃えにするとき、対象の要素がblockか否かでやり方が異なる。
・block要素

margin: 0 auto;

・inline-block, inline要素

text-align:center;

追記。
blockか否かで単純化して覚えていたら、下記のケースでクッソ詰まってしまった。
実例① div要素（block）の中の文字列を中央揃えしたいとき
これ、margin:0 auto;したら全く反応なくて詰まった。正解はtext-align: center;。なぜかっつーと、margin:0 auto;は親ブロックに対して子ブロックを中央揃えにするとき使うCSSで、子ブロックの中の文字列は中央揃えしてくれない。そこはtext-align: center;。

CSS - 縦位置中央揃え

縦位置中央揃えにするときはline-heightが使える。要素の高さとline-heightの高さを同じにすることで中央に文字を来させることが可能。

height:65px;
line-height:65px;

CSS - 要素をかぶせるやつ(position)

親子関係にある要素において、親要素基準に位置取りできる。

.parent{
  position:relative;
}
.child{
  position:absolute;
  top:30px;
  left:90px;
}

とか。

https://webliker.info/css-selector-cheat-sheet/

JQuery - 書き方

基本の書き方。function書きすぎやし()やら{}が多くて混乱するが覚える。

// ①全体の関数化？
$(function() {

//②イベント発生時に次の関数を起動
  $('.list-item').click(function(){

//③起動する関数 
    $(this).css('color', 'red');
  })  
});

コメントとしても書いたが、以下のような意味合い。 ①全体の関数化
ここ実は省略形らしくって、フルに書くと
$(document).ready(function(){ })らしい。これの意味はdocumentの読み込みが終わってから以下を実行するってこと。
②イベント発生時に次の関数を起動
③起動する関数

以上！！！

親です。

読んだ本とかについて書いてます